代碼
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>衛(wèi)衣 </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;}
效果
