CSS浮动,图标字体以及盒模型的运用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>京东顶部导航条</title>
<!-- 引入重置样式表 -->
<link rel="stylesheet" href="./css/reset.css">
<!-- 引入图标字体 -->
<link rel="stylesheet" href="./fa/css/all.css">
<style>
.clearfix::before,
.clearfix::after{
content: "";
display: table;
clear: both;
}
body{
/* 设置字体 */
font:12px/1.5 Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;
}
/* 设置外部容器的样式 */
.top-bar-wrapper{
/* 设置宽度 */
width: 100%;
/* 设置背景颜色 */
background-color: #E3E4E5;
/* 设置行高,没有设置高度 使文字垂直居中 */
line-height: 30px;
/* 设置下边框 */
border-bottom: #ddd 1px solid;
}
/* 设置内部容器的样式 */
.top-bar{
/* 固定宽度 */
width: 1190px;
/* 设置水平居中 */
margin: 0 auto;
}
/* 设置字体样式*/
.top-bar a,
.top-bar span,
.top-bar i{
color: #999;
text-decoration: none;
}
/* 设置鼠标移动到文字的效果 */
.top-bar a:hover,
.top-bar a.highlight{
color: #f10215;
}
/* 设置location */
.location{
float: left;
}
/* 设置location下的小图标 */
.location .fas{
color: #f10215;
}
/* 设置shorturt */
.shortcut{
float: right;
}
/* 设置分割线 */
.shortcut .line{
width: 1px;
height: 10px;
background-color: rgb(204, 202, 202);
margin: 10px 12px;
}
/* 设置li */
.shortcut li{
float: left;
}
</style>
</head>
<body>
<!-- 创建外围的容器 -->
<div class="top-bar-wrapper">
<!-- 创建内部容器 -->
<div class="top-bar clearfix">
<!-- 左侧的菜单 -->
<div class="location">
<div class="current-city">
<i class="fas fa-map-marker-alt"></i>
<a href="javascript:;">北京</a>
</div>
</div>
<!-- 右侧的菜单 -->
<ul class="shortcut clearfix">
<li>
<a href="javascript:;">你好,请登录</a>
<a class="highlight" href="javascript:;">免费注册</a>
</li>
<!-- 分割线 -->
<li class="line"></li>
<li><a href="javascript:;">我的订单</a></li>
<li class="line"></li>
<li><a href="javascript:;">我的京东</a>
<i class="fas fa-angle-down"></i>
</li>
<li class="line"></li>
<li><a href="javascript:;">京东会员</a></li>
<li class="line"></li>
<li><a class="highlight" href="javascript:;">企业采购</a>
<i class="fas fa-angle-down"></i>
</li>
<li class="line"></li>
<li>
<span>客户服务</span>
<i class="fas fa-angle-down"></i>
</li>
<li class="line"></li>
<li>
<span>客户服务</span>
<i class="fas fa-angle-down"></i>
</li>
<li class="line"></li>
<li>
<span>手机京东</span>
</li>
</ul>
</div>
</div>
</body>
</html>
效果图: