美团网官网最新底部导航页面制作及CSS样式设计

目的：

实现美团网站底部的导航页面的设计

设计思路：

整体一个div-1 

整体可分为上下两部分：上为——浅绿色背景；下为选项及选项内容

上部分的左侧设置一个div，存放美团导航文字内容

使用ul>li无序列表存放每个选项：热门城市、热门分类、周边热门

其中每个

包括左侧的文本以及右侧的展开选项。

右侧展开选项设置为两个

无序列表。

具体div数目及包含关系见html代码

原网页样式如下：



菜鸟样式设计如下： 1.HTML代码设计：

 	

 		

 			

 				
美团导航
 				

	 				

	 					
热门城市
	 					

	 						

	 							
深圳
	 							
佛山
	 							
天津
	 							
北京
	 							
无锡
	 							
长沙
	 							
成都
	 							
宁波
	 							
南京
	 							
东莞
	 						
	 						

	 							
福州
	 							
上海
	 							
贵阳
	 							
西安
	 							
厦门
	 							
大连
	 							
合肥
	 							
郑州
	 							
苏州
	 							
南宁
	 						
	 					
	 				
	 				

	 					
热门分类
	 						

	 							

	 								
酒店
	 								
美食
	 								
休闲娱乐
	 								
运动健身
	 								
生活服务
	 								
上门服务
	 								
购物
	 								
时尚购
	 								
本地购物
	 								
结婚
	 							
	 							

	 								
摄影写真
	 								
宴会
	 								
丽人
	 								
母婴亲子
	 								
学习培训
	 								
家装
	 								
汽车服务
	 									
医疗
	 								
宠物

	 							
	 						
	 				
	 				

	 					
周边热门
	 					

	 						

	 							
大厂回族自治县酒店
	 							
大厂回族自治县美食
	 							
廊坊休闲娱乐
	 							
廊坊运动健身
	 							
廊坊生活服务
	 							
廊坊上门服务
	 							
廊坊购物
	 							
大厂回族自治县时尚购
	 							
门头沟区本地购物
	 							
门头沟区结婚
	 
	 						
	 						

	 							
廊坊摄影写真
	 							
廊坊宴会
	 							
大厂回族自治县丽人
	 							
大厂回族自治县母婴亲子
	 							
门头沟区学习培训
	 							
大厂回族自治县家装
	 							
门头沟区汽车服务
	 							
大厂回族自治县医疗
	 							
廊坊宠物
	 						
						
	 					
	 				
	 			
		 	
 		
 	
 	
 	

 2.CSS样式设计：

.sec1170{           /*给所有大的区块一个统一的样式*/
	width:1170px;
	margin:0 auto;
}
.mb10{
	margin-bottom: 10px;
}
.links{
	height: 280px;
	border:1px solid #ddd;
}
.links_navbox{
	height: 40px;
	background: #2bb8aa;
	line-height: 40px;
}
.links_navbox h2{
/*左侧字体*/
	width:110px;
	height: 40px;
	text-align: center;
	color:#fff;
}

.links_catebox{
	position: relative;/*父级元素设为相对定位方便后面子元素绝对定位*/
}
.links_category{
position: absolute;/*相对于catebox绝对定位*/
width: 110px;

}
.links_cateitem{
	height: 78px;
	line-height: 40px;
	margin-left:20px;
}
.links_right1{
/*右侧具体选项*/
	width: 1060px;
	height: 75px;
	left:110px;
	top:0px;
	position: absolute;/*相对于catebox绝对定位*/
	border-bottom:1px solid #ddd;
	margin-top: 8px;
	margin-bottom: 5px;
}
.links_right1 ul{
	display: inline-block;/*为了让两个ul并列*/
}
.links_right1 li{
	height: 25px;
	width: 80px;
	text-align: left;
	line-height: 25px;
	float: left;
	overflow: hidden;/*溢出部分隐藏*/
	text-overflow: ellipsis;/*字溢出的部分显示为"..."*/
	white-space: nowrap;/*表示不换行*/
	margin-right: 15px;
}
.links_right2{
/*表示第二行li*/
	top:80px;
}
.links_right3{
/*表示第三行li*/
	top:160px;
	border-bottom: none;
}