1.创建一个html页面
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>家用电器分类</title>
<link href="css/type.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="type">
<div id="title">家用电器</div>
<div class="secondTitle"><a href="#">大家电</a></div>
<p><a href="#">平板电视</a> <a href="#">洗衣机</a> <a href="#">冰箱</a><br/>
<a href="#">空调</a> <a href="#">烟机/灶具</a> <a href="#">热水器</a><br/>
<a href="#">冷柜/酒柜</a> <a href="#">消毒柜</a> <a href="#">家庭影院</a></p>
<div class="secondTitle"><a href="#">生活电器</a></div>
<p><a href="#">电风扇</a> <a href="#">净化器</a> <a href="#">吸尘器</a><br/>
<a href="#">净水设备</a> <a href="#">挂烫机</a> <a href="#">电话机</a></p>
<div class="secondTitle"><a href="#">厨房电器</a></div>
<p><a href="#">榨汁机</a> <a href="#">电压力锅</a> <a href="#">电饭煲</a><br/>
<a href="#">豆浆机</a> <a href="#">微波炉</a> <a href="#">电磁炉</a></p>
<div class="secondTitle"><a href="#">五金家装</a></div>
<p><a href="#">淋浴/水槽</a> <a href="#">电动工具</a> <a href="#">手动工具</a><br/>
<a href="#">仪器仪表</a> <a href="#">浴霸/排气</a> <a href="#">灯具</a></p>
</div>
</body>
</html>
2.创建对应的type.css
#type{
width: 300px;/*总div的宽度*/
}
a{
text-decoration: none; /*设置超链接没有下划线*/
}
a:hover{
text-decoration: underline; /*设置超链接鼠标悬浮有下划线*/
}
#title{
font-size: 18px; /*字体大小*/
font-weight:bold;/*字体粗细*/
line-height: 35px;/*行高*/
background-color: #0f7cbf;/*背景色*/
color: white;/*字体颜色*/
}
.secondTitle{
font-size: 14px;
font-weight:bold;
line-height: 30px;
background-color: #e4f1fa;
color: #0f7cbf;
}
p{
font-size: 12px;
line-height: 20px;
color: #666666;
text-align: left; /*对齐方式*/
}
p a:hover{/*p标签下面的a标签悬浮时*/
color:#f60;
}
3.效果图