仿京东导航栏目_PHP中文网手记

摘要：*{margin:0px;padding:0px;} a{text-decoration: none; color: #6c6c6c;font-size: 13px;} li{list-style: none;} .header{width: 100%;height: 40px;background: #F5F5F5;

*{margin:0px;padding:0px;}
a{text-decoration: none; color: #6c6c6c;font-size: 13px;}
li{list-style: none;}
.header{width: 100%;height: 40px;background: #F5F5F5;}
.header_content{width: 1200px;margin:0 auto auto; line-height: 40px;}
.header_left{height: 40px;float: left;}
.header_left a{margin-right: 5px;}
.header_content a:hover{color:#f10215; }
.header_right{width:800px;height: 40px;float: right;}
.header_a{display: inline-block;height: 40px;width: 90px;text-align: center;position: relative;}
.header_a:hover{background-color:#fff; }
.header_a ul{border: 1px solid #F5F5F5;display: none;border-top:none;}
.header_a:hover ul{display: block;position: absolute;width: 100px;}
.header_a ul li:hover{background: #F5F5F5;}
.header_a ul li {color: #f10215;height: 30px;line-height: 30px;text-align: left;padding: 0px 3px;margin:5px 0px; }

html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>京东导航</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome-4.7.0/css/font-awesome.min.css">
</head>
<body>
	<div class="header">
		<div class="header_content">
			<div class="header_left">
			<a href="">中国&nbsp;&nbsp;<i class="fa fa-angle-down"></i></a>
			</div>
			<div class="header_right">
				<a href="" class="header_a">您好，请登录</a>
				<a href="" class="header_a">免费注册</a>
				<a href="" class="header_a">我的京东<i class="fa fa-angle-down"></i>
					<ul>
						<li>待处理订单</li>
						<li>返修退换货</li>
						<li>降价商品</li>
					</ul>
				</a>
				<a href="" class="header_a">京东会员</a>
				<a href="" class="header_a">企业采购<i class="fa fa-angle-down"></i>
					<ul>
					<li>企业购</li>
					<li>工业品</li>
					</ul>
				</a>
				<a href="" class="header_a">客户服务<i class="fa fa-angle-down"></i>
					<ul>
					<li>帮助中心</li>
					<li>在线客服</li>
					<li>电话客服</li>
					<li>金融咨询</li>
					</ul>
				</a>

				<a href="" class="header_a">网站导航<i class="fa fa-angle-down"></i>
				<a href="" class="header_a">手机京东</a>
				</a>
			</div>
		</div>
	</div>
</body>
</html>

QQ截图20181213104625.png

总结：float: left; 元素向左浮动，伪元素的使用，显示隐藏，相对定位和绝对定位的配对使用。

批改老师：天蓬老师批改时间：2018-12-13 11:26:25
老师总结：把所有css写到一行,并不是一个好习惯, 没地方写注释了,不是吗?

仿京东导航栏目

热门词条