京东超市导航条布局

最新推荐文章于 2022-07-09 15:22:20 发布

你好啊cbw

最新推荐文章于 2022-07-09 15:22:20 发布

阅读量333

点赞数

分类专栏：前端文章标签： html css3

本文链接：https://blog.csdn.net/qq_40454863/article/details/114284381

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			/*首先去除浏览器默认样式*/
			*{
				margin: 0;
				padding: 0;
				color: #333;/*先全局统一颜色*/
			}
			a{/*去除超链接样式 下划线*/
				text-decoration: none;
				color: #333;/*超链接字体颜色 黑*/
			}
			.bg-dackgray{ /*京东首页 最外层div*/
				background-color: #e3e4e5;/*设置背景颜色深灰*/
				height: 30px;/*盒子高30*/
				line-height: 30px;/*文本垂直居中 高度=行高*/
			}
			.w1200{ /*京东首页 中间div*/
				width:1200px;
				background-color: lavenderblush;
				margin: 0 auto;/*盒子外边距  左右自动计算*/
				font-size: 14px;/*div中字体大小*/
			}
			.head-nav{ /*部分二:头部导航*/
				background-color: yellow;/*盒子背景*/
				
			}
			.logo{ /*部分二:头部导航 的logo盒子*/
				height: 107px;
				width: 1200px;
				background-color: lightcyan;
				margin: 0 auto;/*设置外边距，相对于head-nav父元素进行居中*/
			}
			.chanel-nav{ /*部分二:头部导航 的导航条盒子*/
				height: 33px;
				line-height: 33px;/*文本垂直居中*/
				width: 1200px;
				background-color: lightgreen;
				margin: 0 auto;/*设置外边距，相对于head-nav父元素进行居中*/
			}
			.type{ /*导航条左边 京东超市频道分类 部分*/
				background-color: #ffa133;/*背景色 橘红*/
				color: write;/*字体颜色 大小 样式*/
				font-size: 12px;
				font-weight: bold;
				width: 190px;/*宽度*/
				padding-left: 15px;/*左外边距 设置该部分距离父元素chanel-nav*/
				/*设置的元素(内容)宽度width直接就是元素的实际宽度
				 *content+padding+border，则box-sizing: border-box
				 *保证设置边距后，盒子总宽度没有变长*/
				box-sizing: border-box;
				/*左浮动 让下面的盒子ul浮动上来 ul中的每一个li也是块元素，也需要浮动*/
				float: left;
			}
			.nav{/*导航条部分 ul*/
				list-style: none;/*清除列表样式*/
				float: left;/*左浮动到 京东超市频道分类那层*/
			}
			.nav a{ /*复合选择器  导航条中所有a标签*/
				font-size: 14px;/*字体大小*/
			}
			.nav li{/*复合选择器  导航条中所有li标签都是块元素 左浮动消除独占一行*/
				float: left;
				padding: 0 15px;/*给每个li设置左右内边距15px，上下0*/
			}
			.split{ /*给导航条每一个分隔符|设置颜色*/
				color: #ccc;
			}
			.titleColor{/*导航条中"超市首页"设置字体颜色*/
				color: #FFA133;
			}
			.bg-ligthgray{/*部分三:主体*/
				background-color: #f6f6f6;
				height: 1000px;/*div默认由内容撑起高度，这里设置盒子高度*/
			}
			.clear{/*部分三:主体 消除部分二左浮动给部分三影响,both左右浮动都消除*/
				clear: both;
			}
		</style>
	</head>
	<body>
		<!--部分一:京东首页 顶部深灰色背景 start-->
		<div class="bg-dackgray">
			<div class="w1200">
				京东首页
			</div>
		</div>
		<!--京东首页---顶部深灰色背景 end-->
		
		<!--部分二:头部导航---div(logo+搜索)+div(导航条) start-->
		<div class="head-nav">
			<div class="w1200 logo">logo</div>
			<div class="w1200 chanel-nav">
				<p class="type">京东超市频道分类</p>
				<ul class="nav">
					<li><a href="#" class="titleColor">超市首页</a></li>
					<li class="split">|</li>
					<li><a href="#">超值量版</a></li>
					<li class="split">|</li>
					<li><a href="#">京东生鲜</a></li>
					<li class="split">|</li>
					<li><a href="#">品牌特卖</a></li>
					<li class="split">|</li>
					<li><a href="#">山姆会员店</a></li>
					<li class="split">|</li>
					<li><a href="#">企业采购</a></li>
				</ul>
			</div>
		</div>
		<!--头部导航--logo+搜索+导航 end-->
		
		<!--部分三:主体 浅灰色背景 start-->
		<div class="bg-ligthgray clear">
			主体导航
		</div>
		<!--浅灰色背景 end-->
	</body>
</html>