常用导航布局案例--仿京东顶部导航作业

摘要：作业因为没在外部字符里找到间隔符，所以就用span包了个竖，当然，那个地理定位的符号也没找到，就用了个灯泡的符号代替，都长的差的不是太大。下面贴出代码（），请老师拨冗审阅，批评指正。*{margin:0px; padding:0px;} .header{width:100%; height:40px; background-color:#ccc} /*脑袋要

作业因为没在外部字符里找到间隔符，所以就用span包了个竖，当然，那个地理定位的符号也没找到，就用了个灯泡的符号代替，都长的差的不是太大。

下面贴出代码（），请老师拨冗审阅，批评指正。

*{margin:0px; padding:0px;}
.header{width:100%; height:40px; background-color:#ccc} /*脑袋要放个背景色*/
.header_content{width:1200px; height:40px; background-color:; text-align:center; margin:0px auto;} /*第二层要居个中*/
.header_right{width:700px; height:40px; float:right;} /*右边导航的div*/
.header_right a{text-decoration:none; font-size:12px; color:#696969; line-height:40px;} /*顶部右边导航*/
span{font-size:12px; color:#696969;} /*间隔符*/
a:hover{color:red;}
.header_red{display:inline-block; height:40px; width:65px; text-align:center;} /*鼠标触发红字白底*/
.header_red:hover{color:red; background-color:white;}
.header_gray{display:inline-block; height:40px; width:65px; text-align:center;} /*鼠标蟹发灰字白底*/
.header_gray:hover{color:#696969; background-color:white;}
.header_left{width:80px; height:40px; float:left; margin-left:240px;}
.header_left a{display:inline-block;height:40px; width:65px; text-align:center;
text-decoration:none; font-size:12px; color:#696969; line-height:40px;}
.header_left a:hover{background:white; color:red;} /*地理定位鼠标触发红字白底*/

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="shortcut icon" type="image/x-icon" href="images/666.jpg">
		<link rel="stylesheet" type="text/css" href="css/jd.css">
		<link rel="stylesheet" type="text/css" href="css/font-awesome-4.7.0/css/font-awesome.min.css">
		<title>常用导航布局作业-仿京东顶部导航</title>
	</head>
	
	<body>
		<div class="header">
			<div class="header_content">
				<div class="header_right">
					<a href="" >你好，请登入</a>
					<span >|</span>
					<a href="" style="color:red">免费注册</a>
					<span >|</span>
					<a href="">我的订单</a>
					<span >|</span>
					<a href="" class="header_red">我的京东&nbsp;<i class="fa fa-angle-down"></i></a>
					<span >|</span>
					<a href="">京东会员</a>
					<span >|</span>
					<a href="" class="header_red">企业采购&nbsp;<i class="fa fa-angle-down"></i></a>
					<span >|</span>
					<a href="" class="header_gray">客户服务&nbsp;<i class="fa fa-angle-down"></i></a>
					<span >|</span>
					<a href="" class="header_gray">网站导航&nbsp;<i class="fa fa-angle-down"></i></a>
					<span >|</span>
					<a href="">手机京东</a>	
				</div>
				
				<div class="header_left">
					<a href=""><i class="fa fa-lightbulb-o" style="color:red; font-size:14px; font-weight:bold;"></i>&nbsp; 杭州</a>
				</div>
			</div>
		</div>
	</body>
</html>

批改老师：灭绝师太批改时间：2018-11-21 13:52:11
老师总结：间隔符可以使用边框呀，效果会更好，代码还可以精简奥，完成的不错

常用导航布局案例--仿京东顶部导航作业

热门词条