2021-06-03

2021-06-03 21:31:11 阅读：141 来源： 互联网

标签：03 06 color text height 2021 indent div font

css做表格，用css设置颜色，字体，鼠标经过时变换颜色，增加下划线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div.zong{
            width: 250px;
        }
        div.jydq{
            background-color: #0f7cbf ;
            font-size: 18px;
            color:white;
            height: 35px;
            text-indent: 5%;
            font-weight: bold;
        }
        div.djdbt{
            background-color:#e4f1fa;
            font-size: 17px;
            text-indent: 10%;
            font-weight: bold;
            height: 30px;
            color: #0f7cbf;
        }
        div.shdqbt{
            background-color:#e4f1fa;
            font-size: 17px;
            text-indent: 10%;
            font-weight: bold;
            height: 30px;
            color: #0f7cbf;
        }
        div.cfdqbt{
            background-color:#e4f1fa;
            font-size: 17px;
            text-indent: 10%;
            font-weight: bold;
            height: 30px;
            color: #0f7cbf;
        }
        div.wjjzbt{
            background-color:#e4f1fa;
            font-size: 17px;
            text-indent: 10%;
            font-weight: bold;
            height: 30px;
            color: #0f7cbf;
        }
        div.djd{
            color: #666;
            height: 75px;
            text-indent: 5%;
        }
        div.shdq{
            color: #666;
            height: 50px;
            text-indent: 5%;
        }
        div.cfdq{
            color: #666;
            height: 50px;
            text-indent: 5%; 
        }
        div.wjjz{
            color: #666;
            height: 50px;
            text-indent: 5%; 
        }
        
        div.djd:hover{
            color: #F60;
            text-decoration:underline;
        }
        div.shdq:hover{
            color: #F60;
            text-decoration:underline;
        }
        div.cfdq:hover{
            color: #F60;
            text-decoration:underline;
        }
        div.wjjz:hover{
            color: #F60;
            text-decoration:underline;
        }

    </style>
</head>
<body>
    <div class="zong">
        <div class="jydq">
            家用电器
        </div>
        <div class="djdbt">
            大家电
        </div>
        <div class="djd">
            平板电视  洗衣机  冰箱 空调  烟机/灶具  热水器 冷柜/酒柜  消毒柜  家庭影院
         </div>
         <div class="shdqbt">
             生活电器
         </div>
         <div class="shdq">
            电风扇  净化器  吸尘器
            净水设备  挂烫机  电话机
          
         </div>
         <div class="cfdqbt">
             厨房电器
         </div>
         <div class="cfdq">
            榨汁机  电压力锅  电饭煲
            豆浆机  微波炉  电磁炉
          
         </div>
         <div class="wjjzbt">
             五金家装
         </div>
         <div class="wjjz">
            淋浴/水槽  电动工具  手动工具
            仪器仪表  浴霸/排气  灯具
          
         </div>

    </div>
</body>
</html>

标签：03,06,color,text,height,2021,indent,div,font
来源： https://blog.csdn.net/qq_51490348/article/details/117534796

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

2021-06-03