仿TB导航条简单_PHP中文网手记

摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/new_file.css" />
		<link rel="stylesheet" type="text/css" href="css/zt/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="" class="header_xl">中国大陆&nbsp;&nbsp;<i class="fa fa-angle-down"></i></a>
					<a href="" style="color: #F22E00;">亲，请登录</a>
					<a href="">免费注册</a>
					<a href="">手机逛淘宝</a>
				</div>
				<div class="header_right">
					<a href="" class="header_xl"><i class="fa fa-user-o" style="color: #F22E00;">&nbsp;&nbsp;</i>我的淘宝&nbsp;&nbsp;<i
						 class="fa fa-angle-down"></i>
						<ul>
							<li>已买到的宝贝</li>
							<li>我的足迹</li>
						</ul>

					</a>

					<a href="" class="header_xl"><i class="fa fa-suitcase" style="color:#F22E00;;">&nbsp;&nbsp;</i>购物车&nbsp;&nbsp;<i
						 class="fa fa-angle-down"></i></a>
					<a href="" class="header_xl">收藏夹&nbsp;&nbsp;<i class="fa fa-angle-down"></i></a>
					<a href="">商品分类</a>
					<a href="" class="header_xl">卖家中心&nbsp;&nbsp;<i class="fa fa-angle-down"></i></a>
					<a href="" class="header_xl">联系客服&nbsp;&nbsp;<i class="fa fa-angle-down"></i></a>
					<a href="" class="header_xl">网站导航&nbsp;&nbsp;<i class="fa fa-angle-down"></i></a>
				</div>
				<div class="clear"></div>
			</div>


		</div>

	</body>
</html>

*{margin: 0px;padding: 0px;}
.clear{clear: both;}
.header{width: 100%;height: 35px;}
.header_content{width: 1190px;height: 35px;margin: 0px auto;line-height: 35px;letter-spacing: 2px;}
.header_content a{text-decoration: none;font-size: 12px;color: #6C6C6C;}
.header_left{float: left;}
.header_right{float: right;}
li{list-style: none;}
.header_xl ul{border: 1px solid #FFFFFF;display: none;}
.header a:hover{color: #F22E00;}
.header_xl:hover ul{display:block;position: absolute;}
.header_xl{display: inline-block;text-align: center; position: relative;}

做的有些简陋，老师看看提点意见3OK

批改老师：灭绝师太批改时间：2018-12-20 09:54:10
老师总结：上次老师就给你提意见啦！没看么？带有二级下拉菜单的导航不要用a链接嵌套奥！

仿TB导航条简单

热门词条