HTML实例-02-京东顶部导航条<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--设置⽹页标题-->
<title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>
<!--设置标题上的图⽚-->
<link rel="shortcut icon" href="./img/favicon.png">
<!--    引进css样式-->
<link rel="stylesheet" href="style.css">
<!--    引进图标字符体-->
  <link rel="stylesheet" href="fa/css/all.css">
</head>
<body>
<!--    外部容器，蓝⾊框-->
<div class="top-bar-wrapperr">
<!--    内部容器，红⾊框-->
<div class="top-bar clearfix">
<!--    左容器，绿⾊框--> 
<div class="left-tar">
<div class="location">
<!--    利⽤i加图标字符-->
<i class="fas fa-map-marker-alt"></i>
<a href="">浙江</a>
</div>
</div>
<!--    右容器，紫⾊框-->
<ul class="list-tar clearfix">
<li class="list-tar-li">
<a href="">你好，请登录</a>
<a href="" class="highlight">免费注册</a>
</li>
<li class="line"></li>
<li class="list-tar-li"><a href="">我的订单</a></li>
<li class="line"></li>
<li class="list-tar-li">
<a href="">我的京东</a>
<i class="fas fa-angle-down"></i>
</li>
<li class="line"></li>
<li class="list-tar-li"><a href="">京东会员</a></li>
<li class="line"></li>
<li class="list-tar-li">
<a href=""class="highlight">企业采购</a>
<i class="fas fa-angle-down"></i>
</li>
<li class="line"></li>
<li class="list-tar-li">
<span>客户服务</span>
<i class="fas fa-angle-down"></i>
</li>
<li class="line"></li>
<li class="list-tar-li">
<span>⽹站导航</span>
<i class="fas fa-angle-down"></i>
</li>
<li class="line"></li>
<li class="list-tar-li"><span>⼿机京东</span></li>
</ul>
</div>
</div>
</body>
</html>
style.css
* {
margin:0;
padding:0;
}
body{
font:12px/1.5 Microsoft YaHei;
color:#999;
}
/*蓝⾊框的设置样式*/
.top-bar-wrapperr{
width:100%;
background-color: #e3e4e5; height:30px;
border-bottom:1px #ddd;
/
*设置⾏⾼，使⽂字垂直居中*/ line-height: 30px;
}
/*红⾊框的样式*/
.top-bar{
width:1190px;
height:100%;
/*内部容器⽔平居中*/
margin:0 auto;
}
.left-tar{
float:left;
}
.list-tar{
float: right;
}
.list-tar li{
float:left;
}
.list-tar-li{
float:left;
}
a{
text-decoration: none;
}
li{
list-style: none;
}
/*解决⾼度塌陷*/
.clearfix::before,.clearfix::after{ content: '';
display: table;
}
.left-tar a,.list-tar-li a,.list-tar-li li{ color:#999;
}
.
fa-map-marker-alt{
color:red;
}
.top-bar a:hover,.top-bar a.highlight { color:red;
}
html导航源码/*设置分割线*/
.line{
width:1px;
height:10px;
background: #999; /*填充⼀个|*/ margin:10px 12px;
}