css中日历表怎么优化的方案有哪些?

html-css039

css中日历表怎么优化的方案有哪些?,第1张

1、缩写css代码。

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>

太多了，我建议你看看这个博主的博客，这个是转载这个博客的网页链接望采纳，谢谢