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>