手记 / 侧边导航案例

侧边导航案例

4天前7浏览0评论
<div class="middle">
<div class="content">
<ul class="menu">
<li><a href="#"><i class="fa fa-hand-o-right"></i>女装/内衣</a>
<div class="menu_content">
<div class="menu_left">
<p><b>当季流行</b><span class="fa fa-angle-right"></span></p>
<p class="hr">
<a href="" style="color: pink;">夏季新品</a>
<a href="">商场同款</a>
<a href="">仙女连衣裙</a>
<a href="">T恤</a>
<a href="">衬衫</a>
<a href="">时髦外套</a>
<a href="">休闲外套</a>
<a href="">牛仔裤</a><br>
<a href="">无痕文胸</a>
<a href="">运动文胸</a>
<a href="">潮流家居服</a>
<a href="">百搭船袜</a>
</p>
<p><b>当季流行</b><span class="fa fa-angle-right"></span></p>
<p class="hr">
<a href="" style="color: pink;">夏季新品</a>
<a href="">商场同款</a>
<a href="">仙女连衣裙</a>
<a href="">T恤</a>
<a href="">衬衫</a>
<a href="">时髦外套</a>
<a href="">休闲外套</a>
<a href="">牛仔裤</a><br>
<a href="">无痕文胸</a>
<a href="">运动文胸</a>
<a href="">潮流家居服</a>
<a href="">百搭船袜</a>
</p>
<p><b>当季流行</b><span class="fa fa-angle-right"></span></p>
<p class="hr">
<a href="" style="color: pink;">夏季新品</a>
<a href="">商场同款</a>
<a href="">仙女连衣裙</a>
<a href="">T恤</a>
<a href="">衬衫</a>
<a href="">时髦外套</a>
<a href="">休闲外套</a>
<a href="">牛仔裤</a><br>
<a href="">无痕文胸</a>
<a href="">运动文胸</a>
<a href="">潮流家居服</a>
<a href="">百搭船袜</a>
</p>
<p><b>当季流行</b><span class="fa fa-angle-right"></span></p>
<p class="hr">
<a href="" style="color: pink;">夏季新品</a>
<a href="">商场同款</a>
<a href="">仙女连衣裙</a>
<a href="">T恤</a>
<a href="">衬衫</a>
<a href="">时髦外套</a>
<a href="">休闲外套</a>
<a href="">牛仔裤</a><br>
<a href="">无痕文胸</a>
<a href="">运动文胸</a>
<a href="">潮流家居服</a>
<a href="">百搭船袜</a>
</p>
<p><b>当季流行</b><span class="fa fa-angle-right"></span></p>
<p class="hr">
<a href="" style="color: pink;">夏季新品</a>
<a href="">商场同款</a>
<a href="">仙女连衣裙</a>
<a href="">T恤</a>
<a href="">衬衫</a>
<a href="">时髦外套</a>
<a href="">休闲外套</a>
<a href="">牛仔裤</a><br>
<a href="">无痕文胸</a>
<a href="">运动文胸</a>
<a href="">潮流家居服</a>
<a href="">百搭船袜</a>
</p>
<p><b>当季流行</b><span class="fa fa-angle-right"></span></p>
<p class="hr">
<a href="" style="color: pink;">夏季新品</a>
<a href="">商场同款</a>
<a href="">仙女连衣裙</a>
<a href="">T恤</a>
<a href="">衬衫</a>
<a href="">时髦外套</a>
<a href="">休闲外套</a>
<a href="">牛仔裤</a><br>
<a href="">无痕文胸</a>
<a href="">运动文胸</a>
<a href="">潮流家居服</a>
<a href="">百搭船袜</a>
</p>
<p><b>当季流行</b><span class="fa fa-angle-right"></span></p>
<p>
<a href="" style="color: pink;">夏季新品</a>
<a href="">商场同款</a>
<a href="">仙女连衣裙</a>
<a href="">T恤</a>
<a href="">衬衫</a>
<a href="">时髦外套</a>
<a href="">休闲外套</a>
<a href="">牛仔裤</a><br>
</p>
</div>
<div class="menu_right">
<a href=""><img src="static/images/3.jpg"></a>
           <a href=""><img src="static/images/4.jpg"></a>
           <a href=""><img src="static/images/5.jpg"></a>
           <a href=""><img src="static/images/6.jpg"></a>
           <a href=""><img src="static/images/3.jpg"></a>
           <a href=""><img src="static/images/3.jpg"></a>
           <a href=""><img src="static/images/3.jpg"></a>
           <a href=""><img src="static/images/3.jpg"></a>
           <a href=""><img src="static/images/3.jpg"></a>
           <a href=""><img src="static/images/3.jpg"></a>
           <a href=""><img src="static/images/3.jpg"></a>
           <a href=""><img src="static/images/3.jpg"></a>
           <a href=""><img src="static/images/3.jpg"></a>
           <a href=""><img src="static/images/3.jpg"></a>
           <a href=""><img src="static/images/5.jpg"></a>
           <a href=""><img src="static/images/6.jpg"></a>
                            <a href=""><img src="static/images/5.jpg"></a>
           <a href=""><img src="static/images/6.jpg"></a>
</div>
</div>
</li>
<li><a href="#"><i class="fa fa-hand-o-right"></i> 男装/运动户外</a></li>
<li><a href="#"><i class="fa fa-hand-o-right"></i> 女鞋/男鞋/箱包</a></li>
<li><a href="#"><i class="fa fa-hand-o-right"></i> 美妆/个人护理</a></li>
<li><a href="#"><i class="fa fa-hand-o-right"></i> 腕表/眼镜/珠宝饰品</a></li>
<li><a href="#"><i class="fa fa-hand-o-right"></i> 手机/数码/电脑办公</a></li>
<li><a href="#"><i class="fa fa-hand-o-right"></i> 母婴玩具</a></li>
<li><a href="#"><i class="fa fa-hand-o-right"></i> 零食/茶酒/进口食品</a></li>
<li><a href="#"><i class="fa fa-hand-o-right"></i> 生鲜水果</a></li>
<li><a href="#"><i class="fa fa-hand-o-right"></i> 女鞋/男鞋/箱包</a></li>
<li><a href="#"><i class="fa fa-hand-o-right"></i> 美妆/个人护理</a></li>
<li><a href="#"><i class="fa fa-hand-o-right"></i> 腕表/眼镜/珠宝饰品</a></li>
<li><a href="#"><i class="fa fa-hand-o-right"></i> 手机/数码/电脑办公</a></li>
<li><a href="#"><i class="fa fa-hand-o-right"></i> 母婴玩具</a></li>
<li><a href="#"><i class="fa fa-hand-o-right"></i> 图书音像</a></li>
</ul>
</div>
</div>


.middle {
width: 100%;
height: 500px;
background: url(../images/2.png);
background-size: cover;
margin-top: 40px;
}
.middle .content {
margin: 0px auto;
width: 1300px;
height: 500px;
}
.middle .menu {
width: 200px;
height: 500px;
background: #000;
background: rgba(0,0,0,0.4);
position: relative;
}
.menu li {
height: 33px;
line-height: 33px;
}
.menu li:hover {
background: #fff;
}
.menu li a[href="#"] {
color: #fff;
font-weight: 400px;
}
.menu li:hover a[href="#"] {
color: red;
}
.menu li:hover i {
color: red;
}
.menu li a i {
margin: 0px 10px 0px 15px;
}
.menu_content {
width: 820px;
height: 500px;
position: absolute;
left: 200px;
top: 0px;
background: #f2f2f2;
display: none;
}
.menu li:hover .menu_content {
display: block;
}
.menu_left {
width: 660px;
height: 500px;
float: left;
background: #fff;
}
.menu_left p {
float: left;
margin: 10px 0px 0px 20px;
}
.menu_left p a {
margin-right: 5px;
color: #6D6E6A;
}
.menu_content p span {
margin: 0px 10px 0px 5px;
}
.hr {
border-bottom: 1px dashed #ccc;
}
.menu_right {
width: 140px;
height: 480px;
float: right;
margin: 8px 10px;
line-height: 20px;
}
.menu_right a img {
height: 50px;
width: 65px;
}

总结:侧边导航的实现,学会了css中一些属性的巧用。上次的作业css没有格式化,辛苦老师了,这次的css格式化啦。仿淘宝侧边导航.png

相关标签:HTMLCSS
    0推荐

      奋斗

      PHP开发工程师

      作者的热门手记

      PHP中文网

      未登录