<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>日历表</title>
<style type="text/css">
* {
margin:0px;
padding:0px;
}
html, body, span, em, h5, h6, p, b {
font-weight:normal;
font-family:"楷体";
font-style:normal;
line-height:normal;
text-align:center;
font-size:14px;
}
.box {
width:650px;
height:500px;
margin:35px 80px;
border:1px solid #eee;
}
.datebox {
width:500px;
height:500px;
float:left;
}
/* 日历头*/
.datetop {
width:500px;
height:53px;
overflow:hidden;
background:#fefefe;
position:relative;
}
.datetop div {
display:block;
height:53px;
float:left;
text-align:center;
margin:0px 5px 0px 10px;
padding:10px 0px;
}
.datetop input, .datetop select {
height:30px;
line-height:30px;
vertical-align:bottom;
float:left;
font-size:15px;
border:1px solid #ddd;
font-family:"楷体";
text-align:center;
box-shadow:0px 0px 10px 1px rgba(227,227,270,0.6) inset;
}
.datetop select {
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
border-radius:3px;
outline:none;
text-align:center;
padding:0px 20px 0px 8px;
}
.datetop select:hover {
box-shadow:0px 0px 3px 0px rgba(0,0,0, 0.3);
}
.datetop .qiehuan {
width:30px;
height:30px;
cursor:pointer;
margin:0px 1px;
background:#eefaf9;
}
.datetop .qiehuan:hover {
box-shadow:0px 0px 2px 1px rgba(0,0,0, 0.1);
}
.datetop .jintian {
background:#f1faf9;
border:1px solid #eefaf9;
border-radius:2px;
padding:0px 15px;
margin:0px 0px 0px 15px;
color:#333;
cursor:pointer;
box-shadow:0px 0px 1px 1px rgba(0,0,0, 0.1);
}
.datetop .jintian:hover {
background:#eaf9f5;
box-shadow:0px 0px 3px 2px rgba(0,0,0, 0.3);
}
.datetop .julitian span {
display:block;
height:33px;
line-height:33px;
font-size:15px;
color:#333;
position:absolute;
top:10px;
right:25px;
}
/* 日历星期表 */
.days {
width:470px;
height:35px;
padding:0px 15px;
border-top:1px solid #dedede;
background:#f9f9f9;
}
.days span {
display:block;
height:35px;
float:left;
width:67px;
font-size:18px;
line-height:35px;
font-family:"宋体";
font-weight:bold;
}
/* 日历表 */
.daybox {
width:470px;
height:380px;
padding:15px 15px;
overflow:hidden;
position:relative;
}
.daybox div {
width:55px;
height:50px;
float:left;
border:1px solid #efefef;
margin:12px 5px;
background:#fcf5dc;
cursor:pointer;
}
.daybox2 > div {
margin:3px 5px 10px 5px;
}
.daybox > div:hover {
border:1px solid blue;
}
.daybox div h5, .daybox div h6 {
display:block;
height:25px;
line-height:25px;
font-size:18px;
font-weight:bold;
}
.daybox div h5 {
color:#bbb;
}
.daybox div span, .daybox div em {
display:block;
height:20px;
font-family:"宋体";
line-height:20px;
font-size:13px;
color:#aaa;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
.daybox div em {
color:red;
}
.daybox .zhoumo, .days .zhoumo { /* 周末 */
color:#fa59af;
}
.daybox .dangtian { /* 当天 */
background:#8cbaff;
color:#fff;
}
.daybox .dangtian > span { /* 当天 */
color:#fff;
}
.daybox .xtday { /* 选住的日子 */
border:1px solid blue;
}
/* 右边显示的日期 */
.xianshi {
width:150px;
height:500px;
background:blue;
float:left;
}
.xianshi .xsriqi span, .xianshi .xsriqi b {
height:28px;
line-height:28px;
color:#fff;
font-family:"宋体";
}
.xianshi .xsriqi {
width:150px;
height:255px;
padding:15px 0px 0px 0px;
margin:0px auto;
box-shadow:0px -125px 255px 0px rgba(170,230,255,0.3) inset;
}
.xianshi .xsriqi .glriqi {
display:block;
width:150px;
height:28px;
line-height:28px;
margin:0px auto;
background:#ff0000;
}
.xianshi .xsriqi .glriqi span {
font-size:20px;
font-family:"楷体";
}
.xianshi .xsriqi .xsri span {
display:block;
width:80px;
height:80px;
border-radius:3px;
background:#8cbaff;
margin:10px auto;
line-height:80px;
font-weight:bold;
font-size:50px;
font-family:"楷体";
}
/*.xsjieri p span {
display:block;
width:120px;
overflow:hidden;
white-space:nowrap;
color:#ff0000;
}*/
</style>
<!-- <script type="text/javascript" src="js/rili.js"></script> -->
</head>
<body>
<div id="box">
<div >
<div>
<div id="topnian">
<!-- 选择年份 -->
<select name="nian" id="select_nian">
<!-- <option value="2017"><span>2017</span>年</option>; -->
</select>
</div>
<div id="topyue">
<!-- 上一月按钮 -->
<input type="button" class="shangyue qiehuan" name="shangyue" id="shangyue" value="<">
<!-- 选择月份 -->
<select name="yue" id="select_yue">
<!-- <option value="1"><span>1</span>月</option> -->
</select>
<!-- 下一月按钮 -->
<input type="button" class="xiayue qiehuan" name="xiayue" id="xiayue" value=">">
</div>
<div>
<!-- 回到今天按钮 -->
<input type="button" name="jintian" id="jintian" value="回到今天" onclick="hdjintian()">
</div>
<div id="julitian">
<span>今天</span>
</div>
</div>
<div><!-- 星期 -->
<span>一</span>
<span>二</span>
<span>三</span>
<span>四</span>
<span>五</span>
<span>六</span>
<span>日</span>
</div>
<div id="daybox">
<!-- 日历表 js生成 -->
<div onclick="tianclick(this)">
<h6>1</h6>
<span><em>劳动节</em></span>
</div>
<div onclick="tianclick(this)">
<h6>2</h6>
<span>初七</span>
</div>
<div onclick="tianclick(this)">
<h6>3</h6>
<span>初八</span>
</div>
<div onclick="tianclick(this)">
<h6>4</h6>
<span><em>青年节</em></span>
</div>
<div onclick="tianclick(this)">
<h6>5</h6>
<span>立夏</span>
</div>
<div onclick="tianclick(this)">
<h6>6</h6>
<span>十一</span>
</div>
<div onclick="tianclick(this)">
<h6>7</h6>
<span>十二</span>
</div>
<div onclick="tianclick(this)">
<h6>8</h6>
<span>十三</span>
</div>
<div onclick="tianclick(this)">
<h6>9</h6>
<span>十四</span>
</div>
<div onclick="tianclick(this)">
<h6>10</h6>
<span>十五</span>
</div>
<div onclick="tianclick(this)">
<h6>11</h6>
<span>十六</span>
</div>
<div onclick="tianclick(this)">
<h6>12</h6>
<span>十七</span>
</div>
<div onclick="tianclick(this)">
<h6>13</h6>
<span>十八</span>
</div>
<div onclick="tianclick(this)">
<h6>14</h6>
<span>十九</span>
</div>
<div onclick="tianclick(this)">
<h6>15</h6>
<span>二十</span>
</div>
<div onclick="tianclick(this)">
<h6>16</h6>
<span>廿一</span>
</div>
<div onclick="tianclick(this)">
<h6>17</h6>
<span>廿二</span>
</div>
<div onclick="tianclick(this)">
<h6>18</h6>
<span>廿三</span>
</div>
<div onclick="tianclick(this)">
<h6>19</h6>
<span>廿四</span>
</div>
<div onclick="tianclick(this)">
<h6>20</h6>
<span>廿五</span>
</div>
<div onclick="tianclick(this)">
<h6>21</h6>
<span>小满</span>
</div>
<div onclick="tianclick(this)">
<h6>22</h6>
<span>廿七</span>
</div>
<div onclick="tianclick(this)">
<h6>23</h6>
<span>廿八</span>
</div>
<div onclick="tianclick(this)">
<h6>24</h6>
<span>廿九</span>
</div>
<div onclick="tianclick(this)">
<h6>25</h6>
<span>三十</span>
</div>
<div onclick="tianclick(this)">
<h6>26</h6>
<span>五月</span>
</div>
<div onclick="tianclick(this)">
<h6>27</h6>
<span>初二</span>
</div>
<div onclick="tianclick(this)">
<h6>28</h6>
<span>初三</span>
</div>
<div onclick="tianclick(this)">
<h6>29</h6>
<span>初四</span>
</div>
<div onclick="tianclick(this)">
<h6>30</h6>
<span><em>端午节</em></span>
</div>
<div onclick="tianclick(this)">
<h6>31</h6>
<span>初六</span>
</div>
<div onclick="tianclick(this)">
<h5>1</h5>
<span>儿童节</span>
</div>
<div onclick="tianclick(this)">
<h5>2</h5>
<span>初八</span>
</div>
<div onclick="tianclick(this)">
<h5>3</h5>
<span>初九</span>
</div>
<div onclick="tianclick(this)">
<h5>4</h5>
<span>初十</span>
</div>
</div>
</div>
<div>
<div>
<div>
<div id="glriqi"><!-- 公历年月 -->
<p>
<span>2017年</span>
<span>5月</span>
</p>
</div>
<div id="xsri"> <!-- 选中的日子 -->
<p><span>1</span></p>
</div>
<div id="xsxingqi"><!-- 选中显示的星期 -->
<p><span>星期一</span></p>
</div>
</div>
<div>
<div id="nlriqi">
<p>
<span>四月</span>
<span>初六</span>
</p>
</div>
<div id="xsshengxiao"><!-- 生肖年 -->
<p>
<span>丁酉年</span>
<b>【</b><span>鸡年</span><b>】</b>
</p>
</div>
<div id="xsganzhi"><!-- 干支月日 -->
<p>
<span>甲子月</span>
<span>甲子日</span>
</p>
</div>
<!-- <div>
<p><span>节日</span></p>
</div> -->
</div>
</div>
</div>
</div>
<!-- <script type="text/javascript" src="js/script.js" charset="UTF-8"></script> -->
<!-- <script type="text/javascript" src="js/donghua.js" charset="utf-8"></script> -->
</body>
</html>