任务：模仿京东顶部导航条，只作出样式，下拉框不做。
主要考察布局、图标字体的使用。案例中涉及的图标字体下载于阿里巴巴iconfont网站，该网站的图标字体数量比较多，适合自己练习使用，如果商用最好提前联系作者，确认版权之后在使用。
字体已经下载好，在我的博客资源中心可以下载到，链接：https://download.csdn.net/download/weixin_47401101/13724922
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>京东顶部导航练习</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="./font1/iconfont.css">
<style>
.daohang {
height: 30px;
border-bottom: 1px;
background-color: rgb(227, 228, 229);
border-bottom: 1px solid rgb(221, 221, 221);
}
.wraper {
width: 1190px;
height: 30px;
margin: 0 auto;
position: relative;
}
.location{
float: left;
}
.location i {
font-size: 14px;
color: red;
line-height: 30px;
}
.location span {
color: #999999;
font-size: 12px;
margin-left: -3px;
}
.fs{
width: 719px;
height: 30px;
float: right;
}
.fs li{
float: left;
margin-left:10px;
}
.fs li a{
font-size:12px;
line-height: 30px;
color:rgb(153,153,153);
}
.fs li a:hover{
color:red;
}
.spacer{
background-color: #ccc;
width: 1px;
height: 10px;
float: left;
margin:11px 5px 0;
overflow: hidden;
}
.banner{
width: 800px;
height: 300px;
background-color: papayawhip;
margin:2px auto;
}
.fs li i{
font-size:4px;
color:#999999;
}
</style>
</head>
<body>
<!-- 整个屏幕的容器 -->
<div class="daohang">
<!-- 和页面宽度一样的容器 -->
<div class="wraper">
<!-- 定位城市符号 -->
<div class="location">
<a href="#">
<i class="iconfont icon-dingwei"></i>
<span>河北</span>
</a>
</div>
<!-- 后面导航 -->
<ul class="fs">
<li>
<a href="#">你好，请登录</a>
<a href="#" style="color:red">免费注册</a>
</li>
<!-- 设置菜单之间的竖线 -->
<li class="iconfant spacer"></li>
<li>
<a href="#">我的订单</a>
</li>
<li class="iconfant spacer"></li>
<li>
<a href="#">我的京东</a>
<!-- 设置菜单名字后面的下波折线 -->
<i class="iconfont"></i>
</li>
<li class="iconfant spacer"></li>
<li>
<a href="#">京东会员</a>
</li>
<li class="iconfant spacer"></li>
<li>
<a href="#" style="color:red">企业采购</a>
</li>
<li class="iconfant spacer"></li>
<li>
<a href="#">客户服务
<i class="iconfont"></i></a>
</li>
<li class="iconfant spacer"></li>
<li>
<a href="#">网站导航</a>
<i class="iconfont"></i>
</li>
<li class="iconfant spacer"></li>
<li>
<a href="#">手机京东</a>
</li>
</ul>
</div>
</div>
<!-- <div class="banner">
<li class="iconfont spacer"></li>
</div> -->
</body>
</html>
效果
上面是京东首页顶部导航条样式，下面是模仿出来的效果。
