使用HTML+CSS 搭建京东首页导航栏,主要实现的功能:
静态部分以及鼠标移入显示下拉列表信息
位置和向下图标使用Font Awesome图标字体库
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>京东顶部导航条</title>
<!-- 引入重置样式表 -->
<link rel="stylesheet" href="../../css/reset.css">
<!-- 引用图标字体 -->
<link rel="stylesheet" href="../fontawesome/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;
height: 30px;
/* 设置行高，没有设置高度 使文字垂直居中 */
line-height: 30px;
/* 设置下边框 */
border-bottom: 1px #ddd solid
}
/* 设置内部容器的样式 */
.top-bar {
/* 固定宽度 */
width: 1190px;
/* 设置水平居中 */
margin: 0 auto;
/*使其成为下面子元素的定位基准 */
position: relative;
}
/* 设置字体样式 */
.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;
}
/* 设置城市列表的效果 */
.location .city-list {
display: none;
width: 320px;
height: 436px;
background-color: white;
border: 1px solid rgb(204, 204, 204);
/* 设置绝对定位，使其不占据页面的位置 */
position: absolute;
top: 31px;
/*使其一直优先显示而不被后期的元素覆盖*/
z-index: 999;
box-shadow: 0 2px 2px rgba(0, 0, 0, .2)
}
/* 当鼠标移入到location时，让city-list显示 */
.location:hover .city-list {
display: block;
}
.current-city {
padding: 0 10px;
/*用在border上面:transparent 颜色透明
用在background-color上面:transparent 背景透明
正常显示时,也有边框(颜色透明)
*/
border: 1px solid transparent;
border-bottom: none;
position: relative;
/* 设置z-index属性,提高元素的层次,使其优先显示,而不被其他元素覆盖
*/
z-index: 9999;
}
/* 设置current-city的移入的效果 */
.location:hover .current-city {
background-color: white;
/* 重新设置边框 (正常显示时已设置,这样移入就不会出现增大的效果)*/
border: 1px solid rgb(204, 204, 204);
border-bottom: none;
/* 扩大盒子:使其延伸到兄弟元素*/
padding-bottom: 1px;
}
/* 设置link_myJD父容器的样式 */
.link_myJD_parent {
width: 80px;
float: left;
}
.link_myJD_parent:hover .link_myJD {
background-color: white;
border: 1px solid rgb(204, 204, 204);
border-bottom: none;
padding-bottom: 1px;
}
.link_myJD_parent:hover .myjd_dropdownlist {
display: block;
}
/*设置link_myJD的样式 */
.link_myJD {
width: 80px;
position: relative;
height: 100%;
text-align: center;
position: relative;
z-index: 9999;
}
/*设置我的京东列表信息样式 */
.myjd_dropdownlist {
display: none;
width: 280px;
height: 150px;
background-color: white;
position: absolute;
z-index: 999;
top: 31px;
left: 221.5px;
border: 1px solid rgb(204, 202, 202);
}
/* 设置.link_corporateprocurement父容器样式*/
.link_corporateprocurement_parent {
width: 70px;
float: left;
}
/*鼠标移入父容器,设置子元素link_corporateprocurement的样式*/
.link_corporateprocurement_parent:hover .link_corporateprocurement {
background-color: white;
border: 1px solid rgb(204, 204, 204);
border-bottom: none;
padding-bottom: 1px;
}
/*显示企业采购信息列表 */
.link_corporateprocurement_parent:hover .corporateprocurementdropdownlist {
display: block;
}
/*设置link_corporateprocurement样式 */
.link_corporateprocurement {
width: 70px;
height: 30px;
position: relative;
z-index: 9999;
text-align: center;
}
/* 设置企业采购信息列表样式 */
.corporateprocurementdropdownlist {
display: none;
width: 140px;
height: 100px;
position: absolute;
z-index: 999;
top: 31px;
background-color: white;
border: 1px solid rgb(204, 202, 202);
}
/* 设置link_customerservice父容器样式*/
.customerservice_parent {
width: 70px;
float: left;
}
/*鼠标移入父容器,设置子元素link_customerservice的样式*/
.customerservice_parent:hover .link_customerservice {
cursor: pointer;
background-color: white;
border: 1px solid rgb(204, 204, 204);
border-bottom: none;
padding-bottom: 1px;
}
/*显示客户服务信息列表 */
.customerservice_parent:hover .customerservicedropdownlist {
display: block;
}
/*设置link_customerservice样式 */
.link_customerservice {
width: 70px;
height: 30px;
position: relative;
z-index: 9999;
text-align: center;
}
/* 设置客户服务信息列表样式 */
.customerservicedropdownlist {
display: none;
width: 140px;
height: 200px;
position: absolute;
z-index: 999;
top: 31px;
right: 166px;
background-color: white;
border: 1px solid rgb(204, 202, 202);
}
/* 设置link_sitenav父容器样式*/
.sitenav_parent {
width: 70px;
float: left;
}
/*鼠标移入父容器,设置子元素link_sitenav的样式*/
.sitenav_parent:hover .link_sitenav {
cursor: pointer;
background-color: white;
border: 1px solid rgb(204, 204, 204);
border-bottom: none;
padding-bottom: 1px;
}
/*显示网站导航信息列表 */
.sitenav_parent:hover .sitenavdropdownlist {
display: block;
}
/*设置link_sitenav样式 */
.link_sitenav {
width: 70px;
height: 30px;
position: relative;
z-index: 9999;
text-align: center;
}
/* 设置网站导航信息列表样式 */
.sitenavdropdownlist {
display: none;
width: 1188px;
height: 157px;
position: absolute;
z-index: 999;
top: 31px;
right: 10px;
border: 1px solid rgb(204, 202, 202);
}
/* 设置shortcut */
.shortcut {
float: right;
position: relative;
}
/* 设置分割线 */
.shortcut .line {
width: 1px;
height: 10px;
background-color: rgb(204, 202, 202);
margin: 12px 12px 0;
}
/* 设置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 -->
<div class="city-list">
</div>
</div>
<!-- 右侧的菜单 -->
<ul class="shortcut clearfix">
<li class="link_login">
<a href="javascript:;">你好，请登录</a>
<a class=" highlight" href="javascript:;">免费注册</a>
</li>
<!-- 分割线 -->
<li class="line"></li>
<li class="link_orders"><a href="javascript:;">我的订单</a></li>
<li class="line"></li>
<!--为link_myJD添加一个外部容器 -->
<div class="link_myJD_parent">
<li class="link_myJD">
<a href="javascript:;">我的京东</a>
<!--向下图标字体 -->
<i class="fas fa-angle-down"></i>
</li>
<!--我的京东列表信息 -->
<li class="myjd_dropdownlist">
</li>
</div>
<li class="line"></li>
<li class="link_JDVIP"><a href="javascript:;">京东会员</a></li>
<li class="line"></li>
<div class="link_corporateprocurement_parent">
<li class="link_corporateprocurement">
<a class="highlight" href="javascript:;">企业采购</a>
<i class="fas fa-angle-down"></i>
</li>
<!--企业采购列表信息 -->
<li class="corporateprocurementdropdownlist">
</li>
</div>
<li class="line"></li>
<!--客户服务信息父容器 -->
<div class="customerservice_parent">
<li class="link_customerservice">
<span>客户服务</span>
<i class="fas fa-angle-down"></i>
</li>
<!--客户服务信息列表 -->
<li class="customerservicedropdownlist"></li>
</div>
<li class="line"></li>
<!--创建网站导航父容器 -->
<div class="sitenav_parent">
<li class="link_sitenav">
<span>网站导航</span>
<i class="fas fa-angle-down"></i>
</li>
<!--网站导航信息列表 -->
<li class="sitenavdropdownlist"></li>
</div>
<li class="line"></li>
<li class="link_phoneJD">
<span>手机京东</span>
</li>
</ul>
</div>
</div>
</body>
</html>
这里需要注意:
1.元素浮动,脱离文档流,如果存在父子块元素的嵌套,且父元素靠内容撑开,则父元素的高度将出现坍塌
解决方法:给父元素添加clearfix类,并添加以下代码:
/*可以同时解决外边距重叠和高度坍塌问题 */
.clearfix::before,
.clearfix::after {
content: "";
display: table;
clear: both;
}
2.如何处理当鼠标移入,改变文字所在块元素的背景颜色,以及从此块移动到列表信息块时,还一直保持？
eg:
<!--创建网站导航父容器 -->
<div class="sitenav_parent">
<li class="link_sitenav">
<span>网站导航</span>
<i class="fas fa-angle-down"></i>
</li>
<!--网站导航信息列表 -->
<li class="sitenavdropdownlist"></li>
</div>
给link_sitenav和sitenavdropdownlist添加sitenav_parent父元素(块元素),当移入父元素时,改变
link_sitenav块的背景颜色.这样移入下拉列表信息时也一直属于hover状态,也就不会丢失背景颜色
(要绑定同一个父元素)
/*鼠标移入父容器,设置子元素link_sitenav的样式*/
.sitenav_parent:hover .link_sitenav {
cursor: pointer;
background-color: white;
border: 1px solid rgb(204, 204, 204);
border-bottom: none;
padding-bottom: 1px;
}
3.元素的层次问题(网页是一层一层的,我们看到的是最上面一层)
处理link_sitenav和sitenavdropdownlist相邻的那一段边框,红色为默认存在的边框
达到的效果:
我们这里给link_sitenav设置一个padding-bottom,垂直方向下外边距偏移1px(border宽度为1px)会导致其盒子变大,用link_sitenav的背景颜色来覆盖掉那一段边框.
父容器高度固定,为何没效果?
link_sitenav开启了相对定位,提升了元素的层级
sitenavdropdownlist开启了绝对定位,也提升了元素的层级
如果元素的层级一样(开启定位的元素,默认层级一样),则优先显示靠下的元素,
所以没效果
处理方法:设置z-index属性,设置元素的层级,元素的层级越高,则越优先显示.
下方的列表也应该设置一个相对比较高的层级,防止显示时被其他层级较高的元素覆盖掉。
/*设置link_sitenav样式 */
.link_sitenav {
width: 70px;
height: 30px;
position: relative;
z-index: 9999;
text-align: center;
}
/* 设置网站导航信息列表样式 */
.sitenavdropdownlist {
display: none;
width: 1188px;
height: 157px;
position: absolute;
z-index: 999;
top: 31px;
right: 10px;
border: 1px solid rgb(204, 202, 202);
}
最后附上引入的重置样式表和图标字体的链接:
链接：样式表
提取码：ul63
Font Awesome 图标库使用:都有案例以及使用方法
Font Awesome 中文官方
