2、排列css代码。
3、同属性提取共用css选择器。
4、分离网页颜色和背景设置样式(较大站点需要注意)。
5、条理化css代码。
是要这种效果吗?
<body>
<div class="cldBody">
<table>
<thead>
<tr>
<td colspan="7">
<div class="top">
<span id="left">&lt</span>
<span id="topDate"></span>
<span id="right">&gt</span>
</div>
</td>
</tr>
<tr id="week" >
<td>日</td>
<td>一</td>
<td>二</td>
<td>三</td>
<td>四</td>
<td>五</td>
<td>六</td>
</tr>
</thead>
<tbody id="tbody" ></tbody>
</table>
</div>
27</body>
CSS------------------
<style type="text/css">
.cldBody{background:#f7f7f7width: 420pxmargin: 10px auto}
.cldBody .top{height: 60pxline-height: 60pxtext-align: centerposition: relative}
#topDate{font-size: 24px}
#week td{font-size: 15px}
td{width: 60pxheight: 60pxline-height: 60pxtext-align: centerfont-size: 20px}
#tbody td:hover{background: #edededcursor: pointer}
.curDate{color: redfont-weight: bold}
#left,#right{width: 60pxheight: 60pxposition: absolutecursor: pointer}
#left{left: 0}
#right{right: 0}
#left:hover, #right:hover{background-color: rgba(30, 30, 30, 0.2)}
</style>
引入jq
1 <script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
太多了,我建议你看看这个博主的博客,这个是转载这个博客的网页链接望采纳,谢谢