HTML实例-02-京东顶部导航条

 

html>
<html lang="en">
<head>
<meta charset="UTF-8">

<title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物!title>

<link rel="shortcut icon" href="./img/favicon.png">

<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 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;
}

你可能感兴趣的:(HTML实例-02-京东顶部导航条)