模仿京东顶部导航条

abstract：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="icon" type="image/x-icon" href="https://www.jd.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="icon" type="image/x-icon" href="https://www.jd.com/favicon.ico">
	<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
	<link rel="stylesheet" type="text/css" href="static/font-awesome/css/font-awesome.min.css">
	<title>京东顶部导航条</title>
	<style type="text/css">
		*{margin: 0;padding: 0;}
		.header{
			width: 100%;
			height: 30px;
			background: #E3E4E5;
			text-align: center;
			line-height: 30px;
			position: relative
		}
		.clear{clear: both;}
		a{text-decoration: none;}
		li{list-style: none;}
		.header_1{			
			height: 30px;
			float: left;
			position: absolute; top: 0px;left: 540px;
			font-size: 13px;
			color: #999999;
		}
		.header_1 li{margin-left: 10px;padding: 0px 10px;}
		.header_2{			
			height: 30px;
			position: absolute; top: 0px;right: 350px;
		}
		.header_2 li{
			color: #999999;	
			float: left;
			font-size: 13px;
			padding: 0px 2px;	
		}
		.header_2 li span{color: #999999;}
		.header_2 li span:hover{color: #F10215;}
		.header ul .bg:hover{background: #fff;}
	</style>
</head>
<body>
	<div class="header">
		<ul class="header_1">
			<li class="bg"><i class="fa fa-map-marker" style="color: red;font-size: 16px;margin-right: 3px;"></i><span>北京</span></li>
		</ul>
		<ul class="header_2">
			<li><a href=""><span>你好,请登录&nbsp;</span></a></li>
			<li><a href=""><span style="color: #F10215">免费注册&nbsp;</span></a></li>
			<li>|</li>
			<li><a href=""><span>&nbsp;我的订单&nbsp;</span></a></li>
			<li>|</li>
			<li class="bg"><a href=""><span>&nbsp;我的京东&nbsp;</span></a><i class="fa fa-angle-down"></i></li>
			<li>|</li>
			<li><a href=""><span>&nbsp;京东会员&nbsp;</span></a></li>
			<li>|</li>
			<li class="bg"><a href=""><span style="color: #F10215">&nbsp;企业采购&nbsp;</span></a><i class="fa fa-angle-down"></i></li>
			<li>|</li>
			<li class="bg">&nbsp;客户服务&nbsp;<i class="fa fa-angle-down"></i></li>
			<li>|</li>
			<li class="bg">&nbsp;网站导航&nbsp;<i class="fa fa-angle-down"></i></li>
			<li>|</li>
			<li class="bg">&nbsp;手机京东&nbsp;</i></li>
		</ul>
	</div>
	<div class="clear"></div>
</body>
</html>

效果图

Correcting teacher：查无此人Correction time：2019-04-03 13:27:02
Teacher's summary：完成的不错。现在代码可以越写越多，说明你已经入门了。继续加油

模仿京东顶部导航条

Popular Entries