侧边导航html案例
原创
©著作权归作者所有：来自51CTO博客作者JackieDYH的原创作品，请联系作者获取转载授权，否则将追究法律责任
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜谱</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
a{
display: block;
text-decoration: none;
color: #fff;
}
.wrap{
width: 220px;
height: 360px;
margin: 20px auto;
background-color: #a09c96;
overflow: hidden;
}
.wrap .nav ul a{
font-size: 18px;
font-family: "微软雅黑";
text-indent: 53px;
}
.wrap .nav ul{
margin-top: 25px;
line-height: 60px;
}
.wrap .nav ul li{
width: 220px;
text-indent: 20px;
}
/* .wrap .nav ul li:hover a{
background-color: #a09c96;
color: orange;
} */
.wrap .nav ul .u-li1{
background: url(images/menu_03.jpg) no-repeat 25px 20px,url(images/menu_06.jpg) no-repeat 200px 26px;
}
.wrap .nav ul .u-li2{
background: url(images/menu_11.jpg) no-repeat 25px 20px,url(images/menu_06.jpg) no-repeat 200px 26px;
}
.wrap .nav ul .u-li3{
background: url(images/menu_15.jpg) no-repeat 25px 20px,url(images/menu_06.jpg) no-repeat 200px 26px;
}
.wrap .nav ul .u-li4{
background: url(images/menu_18.jpg) no-repeat 25px 20px,url(images/menu_06.jpg) no-repeat 200px 26px;
}
.wrap .nav ul .u-li5{
background: url(images/menu_20.jpg) no-repeat 25px 20px,url(images/menu_06.jpg) no-repeat 200px 26px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="nav">
<ul>
<li class="u-li1">
<a href="javascript:;">菜谱大全</a>
</li>
<li class="u-li2">
<a href="javascript:;">食谱大全</a>
</li>
<li class="u-li3">
<a href="javascript:;">品质珍选</a>
</li>
<li class="u-li4">
<a href="javascript:;">专题专区</a>
</li>
<li class="u-li5">
<a href="javascript:;">一起红</a>
</li>
</ul>
</div>
</div>
</body>
</html>
