京东商城原网站:
效果图:
源码:
<!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="../02CSS/reset.css">
<link rel="stylesheet" href="./icon/定位icon/iconfont.css">
<link rel="stylesheet" href="./icon/xia_shuxian/iconfont.css">
<link rel="stylesheet" href="./icon/xia2/iconfont.css">
<style>
body{
background-color: rgb(255, 240, 213);
}
/* 导航栏背景 */
.back{
height: 31px;
background-color: #E3E4E5;
margin: 20px;
border-bottom: #DDDDDD 1px solid;
position: relative;
}
/* 主要内容区 */
.primary{
width: 1190px;
height: 30px;
margin: 0px auto;
/* background: white; */
position: relative;
}
/* 定位图标 */
.dw{
width: 60px;
height: 30px;
position: relative;
float: left;
}
.p1::before{ /* 引用定位的iconfont */
content: '\e663';
font-family: 'iconfont';
font-size: 30px;
color: #F10215;
float: left;
}
/* 设置地理位置的文字格式 */
.back .primary .dw a{
height: 30px;
line-height: 30px;
font-size: 12px;
color: #999999;
text-decoration: none;
}
/* 鼠标移入定位区域时的操作 */
.dw:hover{
background-color: #FFFFFF;
color: #E33333;
}
/* 右侧菜单栏 */
.nav{
width: 710px;
height: 30px;
/* background-color: white; */
margin-left: 460px;
}
.nav li{
float: left;
margin-left: 6px;
margin-right: -3px;
/* margin: 0px 6px; */
}
.nav li a:hover{
color: #F10215;
}
.nav a{
display: inline-block;
height: 30px;
line-height: 30px;
font-size: 12px;
position: relative;
padding-left: 3px;
color: #999999;
text-decoration: none;
}
/* 针对竖线的处理 */
.sp1{
height: 30px;
margin-left: 4px;
/* float: left; */
font-size: 8px;
color: #b1b1b1;
}
.sp2{
font-weight: bold;
color: #999999;
margin-left: 3px;
font-size: 1px;
}
.nav li a.bac:hover{
background-color: white;
}
</style>
</head>
<body>
<div class="back">
<div class="primary">
<div class="dw">
<a href="" class="a"><p class="p1"></p>安徽</a>
</div>
<div class="nav">
<ul>
<li>
<a href="">你好,请登录</a>
</li>
<li>
<a href="" style="color: #F10215;">免费注册</a><span class="sp1"></span>
</li>
<li>
<a href="">我的订单</a><span class="sp1 iconfont icon-vertical_line"></span>
</li>
<li>
<a href="" class="bac">我的京东<span class="sp2 iconfont icon-xiala"></span></a><span class="sp1 iconfont icon-vertical_line"></span>
</li>
<li>
<a href="">京东会员</a><span class="sp1 iconfont icon-vertical_line"></span>
</li>
<li>
<a href="" style="color: #F10215;" class="bac">企业采购<span class="sp2 iconfont icon-xiala"></span></a></span><span class="sp1 iconfont icon-vertical_line"></span>
</li>
<li>
<a href="" class="bac">客户服务<span class="sp2 iconfont icon-xiala"></span></a><span class="sp1 iconfont icon-vertical_line"></span>
</li>
<li>
<a href="" class="bac">网站导航<span class="sp2 iconfont icon-xiala"></span></a><span class="sp1 iconfont icon-vertical_line"></span>
</li>
<li>
<a href="">手机京东</a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
积跬步,至千里!
加油!上学人!