<!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;
}
/*設置分割線*/
.line{
width:1px;
height:10px;
background: #999; /*填充一個|*/
margin:10px 12px;
}
