导航布局+CSS样式

abstract：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>淘宝网站导航</title> <link rel="stylesheet" href="nav1.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>淘宝网站导航</title>
		<link rel="stylesheet" href="nav1.css" />
	</head>
	<body>
		<div class="header">
			<div class="header_content">
				<div class="content_left">
					<a href=""class="header_a">中国大陆</a>
					
					
					<a href=""style="color: coral; text-decoration: none;">亲，请登录</a>
					<a href=""class="header_a">免费注册</a>
					<a href=""class="header_a">手机逛淘宝</a>
				
				</div>
				<div class="content_right">
					<a href=""class="header_a">我的淘宝
					<ul>
						<li>已买到的宝贝</li>
						<li>我的足迹</li>
					</ul>
					
					</a>
					<a href=""class="">购物车</a>
					<a href=""class="header_a">收藏夹</a>
					<a href=""class="header_a">商品分类</a>
					<a href=""class="header_a">卖家中心</a>
					<a href=""class="header_a">联系客服</a>
					<a href=""class="header_a">网站导航</a>
				</div>
				
			</div>
			
		</div>
	</body>
</html>

* {
	margin: 0px;
	padding: 0px;
}

.header {
	width: 100%;
	height: 40px;
	background-color: #CCCCCC;
}

.header_content {
	width: 900px;
	height: 40px;
	line-height: 40px;
	margin: 0 auto;

}

.content_left {
	height: 40px;
	float: left;
}

.content_right {
	width: 500px;
	height: 40px;
	float: right;
	letter-spacing: 2px;
}

a {
	text-decoration: none;
	font-size: 13px;
}

.header_a {
	display: inline-block;
	color: black;
	position: relative;
	height: 40px;
	text-align: center;
}

.header_a:hover {
	background-color: darkgreen;
}

li{
	list-style: none;
}
.header_a ul{
	border: 1px;
	display: none;
	margin-top: none;
}

.header_a:hover ul{
	display: block;
	position: absolute;
	width: 100px;
}
.header_a ul li:hover{
	background-color: #CCCCCC;
}
.header_a ul li{
	color:  #000000;
	height: 30px;
	text-align: left;
	padding: 0px 3px;
	margin: 5px 0px;
}

Correcting teacher：天蓬老师Correction time：2019-04-28 08:46:22
Teacher's summary：class="header_a, css中, 推荐使用连接线"-",而不是下划线, 遵循行业规范, 会给你带来很多方便的

导航布局+CSS样式

Popular Entries