我们知道,万年历在人们的生活中是在平常不过的一种东西了,那么怎样用JS来实现在网页中展示一个与众不同万年历呢
1.HTML布局:
rush:xhtml;">
年
- 星期日
- 星期一
- 星期二
- 星期三
- 星期四
- 星期五
- 星期六
我们知道,万年历在人们的生活中是在平常不过的一种东西了,那么怎样用JS来实现在网页中展示一个与众不同万年历呢
1.首先在布局上,可以先用一个id为calender(日历)的div将你的万年历包住,以便我们对万年历的位置进行设置;
2.在这个大的div中有三部分: 1. month_year 用以设置年月; 2.title 用以显示星期; 3.detesUl 用以显示具体的日期;
}
#calendar::after{
content: "";
display: block;
clear: both;
}
#month_year{
width: 700px;
height: 50px;
line-height: 50px;
text-align: center;
}
ul > li{
float: left;
width: 100px;
height: 50px;
text-align: center;
line-height: 50px;
}
#datesUl > li:empty{
opacity: 0;
}
#datesUl > li:hover{
background-color: lightblue;
}
JS代码分析:
