下面我为大家分享一个我制作的简易日历,话不多说,直接上代码
body部分
<body>
<div id='tab'>
<ul>
<li class="active"><h2>JAN</h2></li>
<li><h2>FEB</h2></li>
<li><h2>MAR</h2></li>
<li><h2>APR</h2></li>
<li><h2>MAY</h2></li>
<li><h2>JUN</h2></li>
<li><h2>JUL</h2></li>
<li><h2>AUG</h2></li>
<li><h2>SEP</h2></li>
<li><h2>OCT</h2></li>
<li><h2>NOV</h2></li>
<li><h2>DEC</h2></li>
</ul>
</div>
<div id='div1'>
<h2>一月</h2>
<p>爆竹声中一岁除,春风送暖入屠苏</p>
</div>
</body>
css部分
<style>
#tab ul{width: 200px;height:230px ;text-align:center;}
#tab ul li{float: left;width:50px;height:50px ;margin:5px;background:orange;border: 1px solid green;list-style-type: none;text-align: center;}
#tab .active{background-color: #ccc;}
#div1{width: 230px;height:150px;border:1px solid green ;text-align: center;margin-left: 20px;background:beige;}
</style>
script部分