完成仿天猫商品左侧导航功能案例

原创2019-03-13 22:50:38127
摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>天猫精选-上天猫，就够了</title> <link rel="stylesheet" href="./stat
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>天猫精选-上天猫，就够了</title>
<link rel="stylesheet" href="./static/css/style.css">
<link rel="shortcut icon" href="./static/images/logo1.png" type=“image/x-icon>
<link rel="stylesheet" href="./static/font-awesome/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<!-- 网页头部导航部分 -->
<div>
<div>
<div>
<a href="">喵，欢迎来到天猫</a>
<a href="">请登录</a>
<a href="">免费注册</a>
</div>
<div>
<ul>
<li><a href="">我的淘宝</a>
<ul>
<li><a href="">已买到的宝贝</a></li>
<li><a href="">已卖出的宝贝</a></li>
</ul>
</li>
<li><a href=""><i class="fa fa-heart"></i> 我关注的品牌</a></li>
<li><a href=""><i class="fa fa-shopping-cart"></i> 购物车0件</a></li>
<li><a href="">收藏夹</a>
<ul>
<li><a href="">收藏的宝贝</a></li>
<li><a href="">收藏的店铺</a></li>
</ul>
</li>
<li>|</li>
<li><a href=""><i class="fa fa-android"></i> 手机版</a></li>
<li><a href="">淘宝网</a></li>
<li><a href="">网页导航</a>
<div>
此处填网页导航分类内容
</div>
</li>
</ul>
</div>
</div>
<div></div>
</div>
<div>
<div>
<ul>
<li><span>女装/内衣 <i class="fa fa-angle-right" aria-hidden="true"></i></span>
<div>
<div>
<div>
<div>
<span>当季流行1<i class="fa fa-angle-right" aria-hidden="true"></i></span>
</div>
<div>
<a href="">夏季新品</a>
<a href="">商场同款</a>
<a href="">仙女连衣裙</a>
<a href="">T恤</a>
<a href="">衬衫</a>
<a href="">时髦外套</a>
<a href="">休闲外套</a>
<a href="">牛仔裤</a>
<a href="">无痕文胸</a>
<a href="">运动文胸</a>
<a href="">潮流家居服</a>
<a href="">百搭船袜</a>
</div>
</div>

<div>
<div>
<span>当季流行<i class="fa fa-angle-right" aria-hidden="true"></i></span>
</div>
<div>
<a href="">夏季新品</a>
<a href="">商场同款</a>
<a href="">仙女连衣裙</a>
<a href="">T恤</a>
<a href="">衬衫</a>
<a href="">时髦外套</a>
<a href="">休闲外套</a>
<a href="">牛仔裤</a>
<a href="">无痕文胸</a>
<a href="">运动文胸</a>
<a href="">潮流家居服</a>
<a href="">百搭船袜</a>
</div>
</div>
<div>
<div>
<span>当季流行<i class="fa fa-angle-right" aria-hidden="true"></i></span>
</div>
<div>
<a href="">夏季新品</a>
<a href="">商场同款</a>
<a href="">仙女连衣裙</a>
<a href="">T恤</a>
<a href="">衬衫</a>
<a href="">时髦外套</a>
<a href="">休闲外套</a>
<a href="">牛仔裤</a>
<a href="">无痕文胸</a>
<a href="">运动文胸</a>
<a href="">潮流家居服</a>
<a href="">百搭船袜</a>
</div>
</div>

<div>
<div>
<span>当季流行<i class="fa fa-angle-right" aria-hidden="true"></i></span>
</div>
<div>
<a href="">夏季新品</a>
<a href="">商场同款</a>
<a href="">仙女连衣裙</a>
<a href="">T恤</a>
<a href="">衬衫</a>
<a href="">时髦外套</a>
<a href="">休闲外套</a>
<a href="">牛仔裤</a>
<a href="">无痕文胸</a>
<a href="">运动文胸</a>
<a href="">潮流家居服</a>
<a href="">百搭船袜</a>
</div>
</div>

<div>
<div>
<span>当季流行<i class="fa fa-angle-right" aria-hidden="true"></i></span>
</div>
<div>
<a href="">夏季新品</a>
<a href="">商场同款</a>
<a href="">仙女连衣裙</a>
<a href="">T恤</a>
<a href="">衬衫</a>
<a href="">时髦外套</a>
<a href="">休闲外套</a>
<a href="">牛仔裤</a>
<a href="">无痕文胸</a>
<a href="">运动文胸</a>
<a href="">潮流家居服</a>
<a href="">百搭船袜</a>
</div>
</div>

<div>
<div>
<span>当季流行<i class="fa fa-angle-right" aria-hidden="true"></i></span>
</div>
<div style="border-bottom:none;">
<a href="">夏季新品</a>
<a href="">商场同款</a>
<a href="">仙女连衣裙</a>
<a href="">T恤</a>
<a href="">衬衫</a>
<a href="">时髦外套</a>
<a href="">休闲外套</a>
<a href="">牛仔裤</a>
<a href="">无痕文胸</a>
<a href="">运动文胸</a>
<a href="">潮流家居服</a>
<a href="">百搭船袜</a>
</div>
</div>
</div>

<div>
<a href=""><img src="./static/images2/3.jpg" alt=""></a>
<a href=""><img src="./static/images2/4.jpg" alt=""></a>
<a href=""><img src="./static/images2/5.jpg" alt=""></a>
<a href=""><img src="./static/images2/6.jpg" alt=""></a>
<a href=""><img src="./static/images2/3.jpg" alt=""></a>
<a href=""><img src="./static/images2/4.jpg" alt=""></a>
<a href=""><img src="./static/images2/5.jpg" alt=""></a>
<a href=""><img src="./static/images2/3.jpg" alt=""></a>
<a href=""><img src="./static/images2/4.jpg" alt=""></a>
<a href=""><img src="./static/images2/5.jpg" alt=""></a>
<a href=""><img src="./static/images2/3.jpg" alt=""></a>
<a href=""><img src="./static/images2/4.jpg" alt=""></a>
<a href=""><img src="./static/images2/5.jpg" alt=""></a>
<a href=""><img src="./static/images2/6.jpg" alt=""></a>
<a href=""><img src="./static/images2/3.jpg" alt=""></a>
<a href=""><img src="./static/images2/4.jpg" alt=""></a>
<a href=""><img src="./static/images2/5.jpg" alt=""></a>
<a href=""><img src="./static/images2/6.jpg" alt=""></a>
</div>
</div>
</li>
<li><span>男装/运动户外 <i class="fa fa-angle-right" aria-hidden="true"></i></span>
<div>
<div>
<div>
<div>
<span>当季流行2<i class="fa fa-angle-right" aria-hidden="true"></i></span>
</div>
<div>
<a href="">夏季新品</a>
<a href="">商场同款</a>
<a href="">仙女连衣裙</a>
<a href="">T恤</a>
<a href="">衬衫</a>
<a href="">时髦外套</a>
<a href="">休闲外套</a>
<a href="">牛仔裤</a>
<a href="">无痕文胸</a>
<a href="">运动文胸</a>
<a href="">潮流家居服</a>
<a href="">百搭船袜</a>
</div>
</div>

<div>
<div>
<span>当季流行<i class="fa fa-angle-right" aria-hidden="true"></i></span>
</div>
<div>
<a href="">夏季新品</a>
<a href="">商场同款</a>
<a href="">仙女连衣裙</a>
<a href="">T恤</a>
<a href="">衬衫</a>
<a href="">时髦外套</a>
<a href="">休闲外套</a>
<a href="">牛仔裤</a>
<a href="">无痕文胸</a>
<a href="">运动文胸</a>
<a href="">潮流家居服</a>
<a href="">百搭船袜</a>
</div>
</div>
<div>
<div>
<span>当季流行<i class="fa fa-angle-right" aria-hidden="true"></i></span>
</div>
<div>
<a href="">夏季新品</a>
<a href="">商场同款</a>
<a href="">仙女连衣裙</a>
<a href="">T恤</a>
<a href="">衬衫</a>
<a href="">时髦外套</a>
<a href="">休闲外套</a>
<a href="">牛仔裤</a>
<a href="">无痕文胸</a>
<a href="">运动文胸</a>
<a href="">潮流家居服</a>
<a href="">百搭船袜</a>
</div>
</div>

<div>
<div>
<span>当季流行<i class="fa fa-angle-right" aria-hidden="true"></i></span>
</div>
<div>
<a href="">夏季新品</a>
<a href="">商场同款</a>
<a href="">仙女连衣裙</a>
<a href="">T恤</a>
<a href="">衬衫</a>
<a href="">时髦外套</a>
<a href="">休闲外套</a>
<a href="">牛仔裤</a>
<a href="">无痕文胸</a>
<a href="">运动文胸</a>
<a href="">潮流家居服</a>
<a href="">百搭船袜</a>
</div>
</div>

<div>
<div>
<span>当季流行<i class="fa fa-angle-right" aria-hidden="true"></i></span>
</div>
<div>
<a href="">夏季新品</a>
<a href="">商场同款</a>
<a href="">仙女连衣裙</a>
<a href="">T恤</a>
<a href="">衬衫</a>
<a href="">时髦外套</a>
<a href="">休闲外套</a>
<a href="">牛仔裤</a>
<a href="">无痕文胸</a>
<a href="">运动文胸</a>
<a href="">潮流家居服</a>
<a href="">百搭船袜</a>
</div>
</div>

<div>
<div>
<span>当季流行<i class="fa fa-angle-right" aria-hidden="true"></i></span>
</div>
<div style="border-bottom:none;">
<a href="">夏季新品</a>
<a href="">商场同款</a>
<a href="">仙女连衣裙</a>
<a href="">T恤</a>
<a href="">衬衫</a>
<a href="">时髦外套</a>
<a href="">休闲外套</a>
<a href="">牛仔裤</a>
<a href="">无痕文胸</a>
<a href="">运动文胸</a>
<a href="">潮流家居服</a>
<a href="">百搭船袜</a>
</div>
</div>
</div>

<div>
<a href=""><img src="./static/images2/3.jpg" alt=""></a>
<a href=""><img src="./static/images2/4.jpg" alt=""></a>
<a href=""><img src="./static/images2/5.jpg" alt=""></a>
<a href=""><img src="./static/images2/6.jpg" alt=""></a>
<a href=""><img src="./static/images2/3.jpg" alt=""></a>
<a href=""><img src="./static/images2/4.jpg" alt=""></a>
<a href=""><img src="./static/images2/5.jpg" alt=""></a>
<a href=""><img src="./static/images2/3.jpg" alt=""></a>
<a href=""><img src="./static/images2/4.jpg" alt=""></a>
<a href=""><img src="./static/images2/5.jpg" alt=""></a>
<a href=""><img src="./static/images2/3.jpg" alt=""></a>
<a href=""><img src="./static/images2/4.jpg" alt=""></a>
<a href=""><img src="./static/images2/5.jpg" alt=""></a>
<a href=""><img src="./static/images2/6.jpg" alt=""></a>
<a href=""><img src="./static/images2/3.jpg" alt=""></a>
<a href=""><img src="./static/images2/4.jpg" alt=""></a>
<a href=""><img src="./static/images2/5.jpg" alt=""></a>
<a href=""><img src="./static/images2/6.jpg" alt=""></a>
</div>
</div>
</li>
<li><span>美妆/个人护理 <i class="fa fa-angle-right" aria-hidden="true"></i></span>
<div>
这里填写产品分类
</div>
</li>
<li><span>腕表/眼镜/珠宝饰品 <i class="fa fa-angle-right" aria-hidden="true"></i></span>
<div>
这里填写产品分类
</div>
</li>
<li><span>手机/数码/电脑办公 <i class="fa fa-angle-right" aria-hidden="true"></i></span>
<div>
这里填写产品分类
</div>
</li>
<li><span>母婴玩具 <i class="fa fa-angle-right" aria-hidden="true"></i></span>
<div>
这里填写产品分类
</div>
</li>
<li><span>零食/茶酒/进口食品 <i class="fa fa-angle-right" aria-hidden="true"></i></span>
<div>
这里填写产品分类
</div>
</li>
<li><span>生鲜水果 <i class="fa fa-angle-right" aria-hidden="true"></i></span>
<div>
这里填写产品分类
</div>
</li>
<li><span>女鞋/男鞋/箱包 <i class="fa fa-angle-right" aria-hidden="true"></i></span>
<div>
这里填写产品分类
</div>
</li>
<li><span>美妆/个人护理 <i class="fa fa-angle-right" aria-hidden="true"></i></span>
<div>
这里填写产品分类
</div>
</li>
<li><span>腕表/眼镜珠宝饰品 <i class="fa fa-angle-right" aria-hidden="true"></i></span>
<div>
这里填写产品分类
</div>
</li>
<li><span>手机/数码/电脑办公 <i class="fa fa-angle-right" aria-hidden="true"></i></span>
<div>
这里填写产品分类
</div>
</li>
<li><span>母婴玩具 <i class="fa fa-angle-right" aria-hidden="true"></i></span>
<div>
这里填写产品分类
</div>
</li>
<li><span>图书音像 <i class="fa fa-angle-right" aria-hidden="true"></i></span>
<div>
这里填写产品分类
</div>
</li>
<li><span>零食/茶酒/进口食品 <i class="fa fa-angle-right" aria-hidden="true"></i></span>
<div>
这里填写产品分类
</div>
</li>

</ul>
</div>
</div>


</body>
</html>
*{margin: 0px;padding: 0px;}
.head a{text-decoration: none;}
 li{list-style: none;}
.head i{color: red}
.clear{clear:both;}
.head{background: #F2F2F2;height: 30px;}
.top{margin:auto 50px;
	height: 30px;
	line-height: 30px;	
}
/*头部导航左侧区块*/
.topLeft{
	float:left;
	width: 230px;
}

.topLeft a{
	color: #6D6E6A;
	float: left;
	font-size: 12px;
	margin-left: 10px;
}

.topLeft a:hover{
	color: red;
}

/*头部导航右侧部分*/
.topright{
	float:right;
	
}

/*默认导航菜单*/
.menu_li{
	float: left;
	font-size: 11px;
	margin-right:15px;
}

/*有下拉功能的菜单*/
.menu_li1{
	width: 60px;
	float: left;
	font-size: 11px;
	position: relative;
	padding-left: 10px;
}

.menu_li1:hover{
	background: #fff;
	border-bottom: none;
}

.menu_li1:hover ul{
	display: block
}

.menu_li1:hover .menu_li_map{
	display: block
}
.menu_li_map{
	box-shadow:1px 3px 3px #ccc;
	border: 0px;
	position: absolute;
	right:0px;
	width: 1260px;
	height: 250px;
	display: none;
	z-index: 19;
	background: #fff;
}

.menu_li1 ul{	
	box-shadow:1px 3px 3px #ccc;
	border: 0px;
	position: absolute;
	display: none;
	left:0px;
	background: #fff;
}

/*二级菜单部分*/
.menu_li2{
	width: 80px;
	text-align: center;
}



.topright a{
	color: #6D6E6A;
}

.topright a:hover{
	color: red;
}

/*banner导航部分*/
.banner{
	width:100%;
	height: 500px;
	background: url(../images2/2.png);
	margin-top: 5px;
}

.banner_content{
	width: 1260px;
	height: 500px;
	margin: 0 auto;
}

.banner_menu{
	width: 200px;
	height: 500px;
	background: rgba(0,0,0,0.4);
	position: relative;
}

.banner_menu_li span{
	text-decoration: none;
	color: #fff;
	font-size: 13px;
	margin-left: 25px;
}

.banner_menu_li i{
	float: right;
	margin-right:20px;
	margin-top: 12px;
}

.banner_menu_li{
	height: 33.2px;
	line-height: 33.3px;
	width: 100%;	
}

.banner_menu_li:hover{
	background:rgba(255,255,255,0.4);	
}

.banner_menu_li:hover>span{
	color: #fff;
}

.banner_menu_li:hover .banner_menumap{
	display: block;
}
.banner_menumap{
	position: absolute;
	height: 496px;
	background: #fff;
	width: 780px;
	top:0px;
	left: 200px;
	margin-top: 2px;
	display: none;
	float: left;
}

.banner_menumap_content{
	float: left;
	height: 100%
	background:red;
	width: 500px;
	padding-right: 50px;
}

.banner_menumap_left{
	height: 100%;
	width: 500px;
	background: #fff;
	height: 80px;
	width: 500px;
	margin-top: 2px;
}

.banner_menumap_right{
	background: #ccc;
	height: 100%;
	width: 230px;
	float:left;

}

.banner_menumap_right img{
	width: 100px;
	float: left;
	margin-left: 10px;
	margin-top: 4.5px;
	
}

.menumap_left_title span{
	font-size: 15px;
	color:#000000;
	width: 100px;
	float:left;
	line-height: 80px;

}

.menumap_left_title span i{
	margin-top: 32px;
}
.menumap_left_title {
	margin-left: 10;
	font-weight:bold;
	float:left;
	height: 80px;
	width: 120px;
}
.menumap_content{
	font-size: 13px;
	border-bottom: dashed 1px #ccc;
	float: left;
	width: 380px;
	height: 80px;
	
}

.menumap_content a{
	text-decoration: none;
	color: #6D6E6A;
	margin-right: 9px;
}

.menumap_content a:hover{
	color: red;
}

3.png


4.png


经过这章节的html+css温补练习，发现自己不知不觉已经把前面课程讲的前端知识掌握到得心应手。后续要不断练习争取在工作中能胜任各种前端需求

批改老师：查无此人批改时间：2019-03-14 09:19:17
老师总结：完成的不错，下次把HTML代码也缩进，养成好习惯。继续加油

发布手记

热门词条

php中文网：公益在线php培训，帮助PHP学习者快速成长！

Copyright 2014-2021 //m.sbmmt.com/ All Rights Reserved | 苏州跃动光标网络科技有限公司 | 苏ICP备2020058653号-1关于我们免责申明赞助与捐赠