<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>日历</title>
<style>
body {
font: 14px "microsoft yahei", Arial, Helvetica, sans-serif;
color:#333;
margin:0;
padding:0;
}
ul,li,p,h1,h2,h3,h4,h5,h6,dl,dt,dd {
margin:0;
padding:0;
border:none;
list-style:none;
}
a{
color:#333;
text-decoration:none;
}
.clear:after {
clear:both;
display: block;
content: '';
}
.calender-box{
width: 303px;
min-height: 220px;
border: 1px solid #e9e9e9;
box-shadow: 5px 5px 10px #D0D0D0;
margin: 0 auto;
padding-bottom: 5px;
}
.calender-header{
width: 100%;
height: 43px;
background: #E57373;
border-radius: 20px;
position: relative;
margin-bottom: 10px;
}
.years{
width: 180px;
margin: 0 auto;
text-align: center;
height: 43px;
line-height: 43px;
font-size: 18px;
font-weight: 900;
color: #fff;
}
.years-lf,.years-rt,.month-lf,.month-rt{
position: absolute;
display: inline-block;
color: #fff;
width: 43px;
height: 43px;
border-radius: 50%;
line-height: 43px;
top: 50%;
margin-top: -22px;
font-size: 18px;
text-align: center;
}
.years-lf:hover,.years-rt:hover,.month-lf:hover,.month-rt:hover{
background: #EF9A9A;
}
.years-lf{
left: 0;
}
.years-rt{
right: 0;
}
.month-lf{
left: 40px;
}
.month-rt{
right: 35px;
}
.week>span{
/*display: inline-block;*/
float: left;
text-align: center;
width: 43px;
font-weight: 800;
}
.today{
margin-top: 10px;
}
.today>span{
text-align: center;
padding: 0;
display: inline-block;
float: left;
width: 43px;
height: 30px;
line-height: 30px;
border-radius: 20px;
cursor: pointer;
}
.today>span.month:hover{
background: #EF9A9A;
color: #fff;
}
.active{
background: #E57373;
color: #fff;
}
.today>span.other{
color: #aaa;
font-style: normal;
}
/*弹出框*/
.month{
position: relative;
}
.popup{
position: absolute;
color: #000;
border: 1px solid #EF9A9A;
width: 350px;
min-height: 150px;
top: 35px;
background: #fff;
z-index: 999;
}
.popup>h1{
color: #FF8801;
font-size: 20px;
font-weight: normal;
border-bottom: 1px solid #EF9A9A;
}
.popup>ul{
text-align: left;
margin: 10px;
color: #666;
}
.triangle{
width: 9px;
height: 9px;
background: #fff;
border-top: 1px solid #EF9A9A;
border-left: 1px solid #EF9A9A;
transform: rotate(45deg);
z-index: 1200;
position: absolute;
left: 17px;
}
</style>
<script language="JavaScript" src="js/jquery.js"></script>
</head>
<body>
<h1 style="text-align: center;">日历</h1>
<div class="calender-box">
<div class="calender-header">
<a class="years-lf" href="#"><<</a>
<a class="month-lf" href="#"><</a>
<p class="years">2017年1月</p>
<a class="month-rt" href="#">></a>
<a class="years-rt" href="#">>></a>
</div>
<div class="calender-content">
<div class="week">
<span>日</span>
<span>一</span>
<span>二</span>
<span>三</span>
<span>四</span>
<span>五</span>
<span>六</span>
</div>
<div class="today">
<!--第一行-->
<span class="other">30</span>
<span class="other">31</span>
<span class="month">1</span>
<span class="month">2</span>
<span class="month">3</span>
<span class="month">4</span>
<span class="month">5</span>
<!--第二行-->
<span class="month">6</span>
<span class="month">7</span>
<span class="month">8</span>
<span class="month">9</span>
<span class="month">10</span>
<span class="month">11</span>
<span class="month">12</span>
<!--第三行-->
<span class="month">13</span>
<span class="month">14</span>
<span class="month">15</span>
<span class="month">16</span>
<span class="month">17</span>
<span class="month">18</span>
<span class="month">19</span>
<!--第四行-->
<span class="month">20</span>
<span class="month">21</span>
<span class="month">22</span>
<span class="month">23</span>
<span class="month">24</span>
<span class="month">25</span>
<span class="month">26</span>
<!--第五行-->
<span class="month">27</span>
<span class="month">28</span>
<span class="month">29</span>
<span class="month">30</span>
<span class="month">31</span>
<span class="other">1</span>
<span class="other">2</span>
<div class="clear"></div>
</div>
</div>
</div>
<script src="js/jquery.js"></script>
<script>
// 单击日期
$('.today>span.month').toggle(function(){
$(this).addClass('active');
},function(){
$(this).removeClass('active');
});
//弹出框
$('.today>span.month').hover(function () {
$(this).append("<p class='triangle'></p><div class='popup'><h1>标题1</h1><ul><li>视频1</li><li>图片2</li></ul></div>");
},function(){
$('.today>span.month>div').remove();
$('.today>span.month>p').remove();
});
</script>
</body>
</html>
随便写一个日历
最新推荐文章于 2024-08-18 08:01:56 发布