<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航</title>
<style>
* {
margin: 0;
padding: 0;
}
.nav {
/*border: 1px solid red;*/
/*
1.display: table; table-cell
2.鼠标的小手和箭头
3.新浪的导航 sina.com.cn
*/
width: 80%;
height: 40px;
/*display: table;*/
margin: 0 auto;
/*text-align: center;*/
}
.nav a {
display: inline-block;
text-decoration: none;
color: #000;
line-height: 40px;
padding: 0 10px;
}
.home-1 {
color: #e1251b;
font-weight: 700;
}
.nav a:hover {
color: #e1251b;
}
</style>
</head>
<body>
<div class="head">
<div class="nav">
<a href=""><span class="home-1">秒杀</span></a>
<a href=""><span class="home-1">优惠券</span></a>
<a href="">PLUS会员</a>
<a href="">品牌闪购</a>
<a href="">拍卖</a>
<a href="">京东家电</a>
<a href="">京东超市</a>
<a href="">京东生鲜</a>
<a href="">京东国际</a>
<a href="">京东云</a>
</div>
</div>
<div>
<div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
</html>
上述运行结果: