<!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="../css/reset.css">
<!-- 引入字体样式 -->
<link rel="stylesheet" href="./css/all.css">
<style>
/*设置浮动之后元素脱离文档流 产生高度塌陷问题*/
.clear::after,
.clear::before {
content: '';
display: table;
clear: both;
}
body {
font-size: 14px;
}
/*设置外部容器*/
.out_wapper {
width: 100%;
background-color: #E3E4E5;
height: 30px;
line-height: 30px;
}
/*设置内部容器*/
.inner_wapper {
width: 1190px;
margin: 0px auto;
}
/*设置左边浮动*/
.location {
float: left;
position: relative;
}
/*将列表右浮动*/
.list {
float: right;
}
/*列表下的li向左边浮动*/
.list li {
float: left;
}
/*清除 a的下划线 以及设置字体颜色*/
.inner_wapper a,
.inner_wapper i,
.list span {
text-decoration: none;
color: #A6A6A6;
}
.list .line {
height: 10px;
border: 1px solid #A6A6A6;
margin: 11px 5px 0;
background-color: #A6A6A6;
overflow: hidden;
}
/*设置鼠标移入效果*/
.inner_wapper a:hover {
color: #F10215;
}
/*设置城市列表*/
.location .city_list {
/*设置宽高*/
width: 323px;
height: 465px;
/*设置背景色*/
background-color: white;
/*隐藏这个块*/
display: none;
/*设置边框*/
border: 1px solid #CCCCCC;
/*设置阴影*/
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
/*设置绝对定位 使其脱离文档流*/
position: absolute;
top: 28px;
/*设置层级*/
z-index: 999;
}
/*移入的效果绑定到location上 因为location包含这current-list 和city-list这两个块*/
.location:hover .city_list {
display: block;
}
.current-city {
line-height: 28px;
height: 28px;
/*设置边距*/
padding: 0 10px;
/*设置边框 设置边框以后字就不会动了*/
border: 1px solid transparent;
/*隐藏下边框*/
border-bottom: none;
/*设置上边距*/
margin-top: 1px;
/*开启相对定位*/
position: relative;
/*设置层级*/
z-index: 9999;
}
.location:hover .current-city {
/*设置背景色*/
background-color: white;
border: 1px solid #cccccc;
border-bottom: none;
}
ul li {
margin-top: 1px;
}
/*我的京东下拉框部分*/
.my_jd {
position: relative;
}
.my_jd .wdjd {
line-height: 28px;
height: 28px;
border: 1px solid transparent;
/* margin-top: 1px; */
padding: 0 10px;
position: relative;
z-index: 9999;
}
.my_jd .jd_down {
width: 283px;
height: 164px;
background-color: white;
/*隐藏下拉框*/
display: none;
/*设置边框*/
border: 1px solid #CCCCCC;
/*设置阴影*/
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
/*设置绝对定位 使其脱离文档流*/
position: absolute;
top: 28px;
z-index: 999;
}
.my_jd:hover .jd_down {
display: block;
}
.my_jd:hover .wdjd {
background-color: white;
border: 1px solid #CCCCCC;
border-bottom: none;
}
/*企业采购下拉框*/
.business_buy {
line-height: 28px;
height: 28px;
border: 1px solid transparent;
/* margin-top: 1px; */
padding: 0 10px;
position: relative;
z-index: 9999;
}
.business_wapper:hover .business_buy {
border: 1px solid #CCCCCC;
background-color: white;
border-bottom: none;
}
.business_down {
width: 157px;
height: 94px;
background-color: white;
/*隐藏下拉框*/
display: none;
/*设置边框*/
border: 1px solid #CCCCCC;
/*设置阴影*/
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
/*设置绝对定位 使其脱离文档流*/
position: absolute;
top: 28px;
z-index: 999;
}
.business_wapper:hover .business_down {
display: block;
}
/*客户服务下拉框*/
.custom_wapper {
position: relative;
}
.custom_service {
line-height: 28px;
height: 28px;
border: 1px solid transparent;
/* margin-top: 1px; */
padding: 0 10px;
position: relative;
z-index: 9999;
}
.custom_wapper:hover .custom_service {
border: 1px solid #CCCCCC;
background-color: white;
border-bottom: none;
}
.custom_down {
width: 173px;
height: 248px;
background-color: white;
/*隐藏下拉框*/
display: none;
/*设置边框*/
border: 1px solid #CCCCCC;
/*设置阴影*/
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
/*设置绝对定位 使其脱离文档流*/
position: absolute;
top: 28px;
right: 0px;
z-index: 999;
float: right;
}
.custom_wapper:hover .custom_down {
display: block;
}
/*手机京东下拉框*/
.phone_jd_wapper {
position: relative;
}
.phone_jd {
height: 28px;
line-height: 28px;
border: 1px solid transparent;
position: relative;
padding: 0 10px;
z-index: 9999;
}
.phone_jd_down {
width: 190px;
height: 420px;
border: 1px solid #cccccc;
background-color: white;
display: none;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
/*设置绝对定位 使其脱离文档流*/
position: absolute;
top: 28px;
right: 0px;
z-index: 999;
float: right;
}
.phone_jd_wapper:hover .phone_jd {
border: 1px solid #cccccc;
background-color: white;
border-bottom: none;
}
.phone_jd_wapper:hover .phone_jd_down {
display: block;
border-bottom: 3px solid black;
}
/*网站导航下拉框*/
.navgation_wapper {
position: relative;
}
.navgation {
height: 28px;
line-height: 28px;
border: 1px solid transparent;
padding: 0 10px;
position: relative;
z-index: 9999;
}
.navgation_wapper:hover .navgation {
border: 1px solid #cccccc;
border-bottom: none;
background-color: white;
}
.navgation_down {
width: 1190px;
height: 180px;
border: 1px solid #cccccc;
background-color: white;
display: none;
position: absolute;
right: -105px;
top: 28px;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}
.navgation_wapper:hover .navgation_down {
display: block;
}
/*免费注册多余的部分用省略号表示*/
.list .free {
color: #F10215;
width: 40px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
float: right;
padding: 0 5px;
}
</style>
</head>
<body>
<!-- 创建一个外部容器 -->
<div class="out_wapper clear">
<!-- 创建一个内部容器 -->
<div class="inner_wapper">
<!--左边的内容 位置 -->
<div class="location">
<div class="current-city">
<i class="fas fa fa-map-marker-alt" style="color: #F10215;"></i>
<a href="#">北京</a>
</div>
<!-- 设置一个城市列表 -->
<div class="city_list">
</div>
</div>
<ul class="list">
<li class="clear">
<a href="#"><span>您好,请登录</span></a>
<a href="#"><span class="free ">免费注册</span></a>
</li>
<li class="line"></li>
<li>
<a href="#">我的订单</a>
<i class="fas fa-angle-down"></i>
</li>
<li class="line"></li>
<li class="my_jd ">
<div class="wdjd">
<a href="#">我的京东</a>
<i class="fas fa-angle-down"></i>
</div>
<!-- 京东的下拉框 -->
<div class="jd_down">
</div>
</li>
<li class="line"></li>
<li>
<a href="#">京东会员</a>
</li>
<li class="line"></li>
<li class="business_wapper">
<div class="business_buy">
<a href="#"><span style="color: #F10215;">企业采购</span></a>
<i class="fas fa-angle-down"></i>
</div>
<!--企业采购下拉框-->
<div class="business_down">
</div>
</li>
<li class="line"></li>
<li class="custom_wapper">
<div class="custom_service">
<span>客户服务</span>
<i class="fas fa-angle-down"></i>
</div>
<!-- 客户服务下拉框 -->
<div class="custom_down">
</div>
</li>
<li class="line"></li>
<li class="navgation_wapper">
<div class="navgation">
<span>网站导航</span>
<i class="fas fa-angle-down"></i>
</div>
<!-- 网站导航下拉框 -->
<div class="navgation_down">
</div>
</li>
<li class="line"></li>
<li class="phone_jd_wapper">
<div class="phone_jd">
<span>手机京东</span>
</div>
<!-- 手机京东下拉框 -->
<div class="phone_jd_down">
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
