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.效果图
