效果图:
初始1的样式如图,之后点击每个小块样式发生同样变化,且在文本框中会显示对应的备注信息。
css样式:
< type=“text/css”>
body,
ul,
li,
h2,
p {
margin: 0px;
padding: 0px;
}
#div1 {
width: 200px;
height: 200px;
background: #ccc;
}
.calendar {
width: 240px;
height: 345px;
background: #ccc;
margin: auto;
}
.calendar ul {
list-style: none;
width: 232px;
height: 260px;
margin: 0px;
padding: 0px;
}
.calendar ul li {
width: 45px;
height: 65px;
background: #333;
float: left;
display: inline;
margin-left: 11px;
margin-top: 10px;
border: 1px solid #ccc;
text-align: center;
color: