实现HTML5高防天猫左侧导航代码
实现HTML5高防天猫左侧导航代码:

今天给大家分享一个高防天猫左侧导航栏的html代码，还是有个百分之80吧。
直接上代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./font-awesome/css/font-awesome.min.css">
<style type="text/css">
body{
background-image:url(http://img.alicdn.com/imgextra/i4/21/O1CN01D4F8TS1C1eqjIvxHr_!!21-0-luban.jpg_q100.jpg);
background-size: 1500px;
}

*{
list-style: none;
text-decoration: none;
}
#zhong li{
display: block;
float: left;
/*border: 1px solid red;*/
height: 35px;
width: 120px;
text-align: center;
margin: 0px auto;
line-height: 35px;

}

#da{
/*border: 1px solid red;*/
height: 572px;
width: 240px;
background-color: rgba(0,0,0,.55);
}
#zhong li a{
display: block;
height: 35px;
font-family: '黑体';
}


#zhong{
/*border: 1px solid blue;*/
height: 17px;
}
#zuo{
color: red;
background: #eeeeee;
/*margin-right: 20px;*/
}
#zuo a:hover{
color: red;
background: black;
/*background: #eeeeee;*/
/*margin-right: 20px;*/
}
#zuo a:link{
color: red;

}
#zuo a:visited{
color: red;
}

#liu{
background: red;
color: yellow;

/*float: right;*/
}
#liu a:hover{
color: yellow;
background: blue;
/*background: #eeeeee;*/
/*margin-right: 20px;*/
}
#liu a:link{
color: yellow;

}
#liu a:visited{
color: yellow;
}

ul{
margin: 18px 0px 0px -15px;
/*width: 800px;*/
}

ul li{
margin: 15px 0px;
}

ul li a{
/*margin: 15px 0px;*/
display: block;
height: 30px;
width: 200px;
/*background: red;*/
color: white;
font-family: '黑体';

}
ul li a:hover{
/*background: white;*/
color: #e9467d;
}


#div2:hover{
background: white;
/*color: red;*/

}


#div2 ul li{
/*text-align: center;*/
line-height: 30px;
width: 120px;
}


.div3:hover{
/*margin-top: 210px;*/
background: white;
/*color: red;*/
}
.div3 ul li{
margin: -15px 0px 0px 0px;
/*text-align: center;*/
line-height: 30px;
width: 120px;
}
</style>
<!-- <link rel="stylesheet" href="//g.alicdn.com/??mui/global/3.0.31/global.css,zebra-pages/fp5/6.0.86/pc/css/index.css" /> -->
</head>
<body>


<div id="da">

<div id="zhong">
<li id="zuo"><a href="#">商品分类</a></li>
<li id="liu"><a href="#">6.1狂欢</a></li>
</div>


<div id="div2">
<ul>
<li><a href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp;女装/内衣</a></li>
</ul>
</div>


<div class="div3">
<ul>
<li><a href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp;男装 /运动户外</a></li>
</ul>
</div>

<div class="div3">
<ul>
<li><a href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp;女鞋 /男鞋 /箱包</a></li>
</ul>
</div>
<div class="div3">
<ul>
<li><a href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp;美妆 /个人护理</a></li>
</ul>
</div>
<div class="div3">
<ul>
<li><a href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp;腕表 /眼镜 /珠宝饰品</a></li>
</ul>
</div>

<div class="div3">
<ul>
<li><a href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp;手机 /数码 /电脑办公</a></li>
</ul>
</div>


<div class="div3">
<ul>
<li><a href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp;母婴玩具</a></li>
</ul>
</div>

<div class="div3">
<ul>
<li><a href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp;零食 /茶酒 /进口食品</a></li>
</ul>
</div>

<div class="div3">
<ul>
<li><a href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp;生鲜水果</a></li>
</ul>
</div>


<div class="div3">
<ul>
<li><a href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp;大家电 /生活电器</a></li>
</ul>
</div>

<div class="div3">
<ul>
<li><a href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp;家具建材</a></li>
</ul>
</div>

<div class="div3">
<ul>
<li><a href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp;汽车 /配件 /用品</a></li>
</ul>
</div>

<div class="div3">
<ul>
<li><a href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp;家纺 /家饰 /鲜花</a></li>
</ul>
</div>

<div class="div3">
<ul>
<li><a href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp;医药保健</a></li>
</ul>
</div>

<div class="div3">
<ul>
<li><a href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp;厨具 /收纳 /宠物</a></li>
</ul>
</div>

<div class="div3">
<ul>
<li><a href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp;图书音像</a></li>
</ul>
</div>
<!-- <i class="fa fa-square-o fa-stack-2x"></i> -->
</div>

</body>
</html>
压缩包下载:

http://cdn.aidezy.com/f.php?k=01c38