406day（京东案例顶部，导航栏练习）

最新推荐文章于 2021-11-14 20:12:30 发布

orangecloudy

最新推荐文章于 2021-11-14 20:12:30 发布

阅读量728

点赞数

本文链接：https://blog.csdn.net/orangecloudy/article/details/84038812

版权

《2018年11月14日》【连续406天】

标题：京东案例顶部，导航栏练习；

内容：

<!-- 京东顶部开始 -->
	<div class="J_event">
		<a href="#" class="w">
			<i></i>
		</a>
	</div>
	<!-- 京东顶部结束 -->
	<!-- 快捷导航栏 -->
	<div class="shortcut">
		<div class="w">
			<ul class="fl">
				<li>
					<i class="pos"></i>
					<a href="#">
						北京
					</a>
				</li>
			</ul>
			<ul class="fr">
				<li>
					<a href="#">
						你好， 请登录
					</a>
					<a href="#" class="style-red">
						 免费注册
					</a>
				</li>
				<li class="spacer"></li>
				<li>
					<a href="#">
						手机京东
					</a>
				</li>
				<li class="spacer"></li>
				<li class="dropdown">
					<a href="#">
						我的京东
					</a>
					<i></i>
				</li>
				<li class="spacer"></li>
				<li>
					<a href="#">
						我的订单
					</a>
				</li>
			</ul>
		</div>
	</div>
	<!-- 导航栏结束 -->

/*版心*/

.w {
	width: 1190px;
	margin: auto;
}

.fr {
	float: right;
}

.fl {
	float: left;
}
.style-red {
	color: #f10215;
}
li {
	list-style: none;
}

ul {
	margin: 0;
	padding: 0;
}

@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?hrstq9');
  src:  url('../fonts/icomoon.eot?hrstq9#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?hrstq9') format('truetype'),
    url('../fonts/icomoon.woff?hrstq9') format('woff'),
    url('../fonts/icomoon.svg?hrstq9#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

/*京东 顶部 start*/

.J_event {
	height: 80px;
	background-color: #000;
}

.J_event a {
	position: relative;
	display: block;
	height: 80px;
	background: url(../images/top.jpg) no-repeat;
}

.J_event a i {
	width: 20px;
	height: 20px;
	background-color: pink;
	position: absolute;
	right: 0;
	top: 5px;
	font-family: "icomoon";
	font-style: normal;
	line-height: 20px;
	text-align: center;
	color: #fff;
	background: rgba(0,0,0,.4);
}

/*顶部结束*/

/*导航栏*/

.shortcut {
	height: 30px;
	line-height: 30px;
	background-color: #E3E4E5;
	border-bottom: 1px solid #DDD;
}

.shortcut a {
	color: #9D9D9D;
	font-size: 12px;
	text-decoration: none;
}

.shortcut a:hover {
	color: #c81623;
}

.pos {
	font-family: "icomoon";
	font-style: normal;
	color: #f10215;
	font-size: 14px;
}

.shortcut .fl li {
	margin-left: 200px;
}
.shortcut .fr li {
	float: left;
}
.spacer {
	width: 1px;
	height: 10px;
	background-color: #ccc;
	margin: 10px 10px 0;
}
.dropdown {
	padding-right: 15px;
	position: relative;
}

.dropdown i {
	font-family: "icomoon";
	font-size: 16px;
	font-style: normal;
	position: absolute;
	right: -2px;
	top: 0;
	color: #9D9D9D;
}