Github代码地址

css07家用电器分类

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>&nbsp;<a href="#">洗衣机</a>&nbsp;<a href="#">冰箱</a><br/>
    <a href="#">空调</a>&nbsp;<a href="#">烟机/灶具</a>&nbsp;<a href="#">热水器</a><br/>
    <a href="#">冷柜/酒柜</a>&nbsp;<a href="#">消毒柜</a>&nbsp;<a href="#">家庭影院</a></p>
  <div class="secondTitle"><a href="#">生活电器</a></div>
  <p><a href="#">电风扇</a>&nbsp;<a href="#">净化器</a>&nbsp;<a href="#">吸尘器</a><br/>
    <a href="#">净水设备</a>&nbsp;<a href="#">挂烫机</a>&nbsp;<a href="#">电话机</a></p>
  <div class="secondTitle"><a href="#">厨房电器</a></div>
  <p><a href="#">榨汁机</a>&nbsp;<a href="#">电压力锅</a>&nbsp;<a href="#">电饭煲</a><br/>
    <a href="#">豆浆机</a>&nbsp;<a href="#">微波炉</a>&nbsp;<a href="#">电磁炉</a></p>
  <div class="secondTitle"><a href="#">五金家装</a></div>
  <p><a href="#">淋浴/水槽</a>&nbsp;<a href="#">电动工具</a>&nbsp;<a href="#">手动工具</a><br/>
   <a href="#">仪器仪表</a>&nbsp;<a href="#">浴霸/排气</a>&nbsp;<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.效果图

 

posted @ 2016-11-09 17:02  @小葱拌豆腐  阅读(699)  评论(0)  编辑  收藏  举报

霸气