代码
1.HTML文件
<title>淘宝女装</title>
<link type="text/css" rel="stylesheet" href="淘宝女装.css"/>
</head>
<body>
<div class="nav">
<div>
<p class="a1" align="center">夏季流行</p>
</div>
<div>
<span>夏季新品 </span> <span>雪纺裙 </span> <span>短袖T </span> <span>铅笔裤 </span> <span>短裤 </span> <span> 短袖衬衫 </span> <span>小脚牛仔裤 </span> <span>开衫 </span> <span>蕾丝/雪纺衫 </span> <span>韩版外套 </span> <span>小西装 </span> <span>中长款裙 </span>
</div>
<div>
<p class="a2" align="center">上装</p>
</div>
<div>
<span>T恤 </span> <span>衬衫 </span> <span>针织衫 </span> <span>长袖T </span> <span>韩版T </span> <span>情侣衫 </span> <span>雪纺衬衫 </span> <span>韩版衬衫 </span> <span>防晒衣 </span> <span>休闲套装 </span> <span>卫衣 </span> <span>背心/吊带 </span>
</div>
<div>
<p class="a3" align="center">裙子</p>
</div>
<div>
<span>连衣裙 </span> <span>半身裙 </span> <span>长裙 </span> <span>袖裙 </span> <span>短蕾丝连衣裙 </span> <span>长袖裙 </span> <span>无袖/背心裙 </span> <span>A字裙 </span> <span>牛仔裙 </span> <span>半身中长裙 </span> <span>半身短裙 </span> <span>包臀裙 </span>
</div>
<div>
<p class="a4" align="center">裤子</p>
</div>
<div>
<span>裤子 </span> <span>休闲裤 </span><span>牛仔裤 </span> <span>打底裤 </span> <span>长裤 </span> <span>哈伦裤 </span> <span>阔腿裤 </span> <span>短裤/热裤 </span> <span>连体裤 </span> <span>七/九分裤 </span> <span>牛仔短裤 </span> <span>西装裤 </span>
</div>
<div>
<p class="a5" align="center">其他女装</p>
</div>
<div>
<span>胖M装 </span> <span>中老年 </span> <span>婚纱 </span> <span>礼服 </span> <span>旗袍 </span> <span>夜店 </span> <span>台装 </span> <span>舞唐装 </span> <span>全球购 </span> <span>羊绒衫 </span> <span>毛衣 </span> <span>呢大衣 </span> <span>羽绒服 </span> <span>真皮皮衣</span>
</div>
</div>
</body>
2.CSS文件
.nav{
width:400px;}
a{
color:#000;
font-size:12px;
text-decoration:none;}
a:hover{
color:#F60;
text-decoration:underline;}
.a1{
font-size: 18px;
width:160px;
height: 40px;
font-weight: bold;
background:url(%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90/dress01.png) 0px -2.5px no-repeat;}
.a2{
font-size: 18px;
width:160px;
height: 40px;
font-weight: bold;
background:url(%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90/dress02.png) 0px -2.5px no-repeat;}
.a3{
font-size: 18px;
width:160px;
height: 40px;
font-weight: bold;
background-image:url(%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90/dress03.png);
background-repeat:no-repeat;
background-position:0px -2.5px;}
.a4{
font-size: 18px;
width:160px;
height: 40px;
font-weight: bold;
background-image:url(%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90/dress04.png);
background-repeat:no-repeat;
background-position:0px -2.5px;}
.a5{
font-size: 18px;
width:160px;
height: 40px;
font-weight: bold;
background-image:url(%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90/dress05.png);
background-repeat:no-repeat;
background-position:0px -2.5px;}
效果
