HTML+CSS 创建京东导航栏

使用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 中文官方

HTML+CSS 创建京东导航栏相关推荐

html+css创建侧边导航栏
效果: 代码: .left{position: fixed;width: 250px;height: 2000px;background-color: rgb(100, 93, 93);float ...
搜索导航HTML,CSS 带搜索导航栏的示例代码
本文为大家介绍如何使用 CSS 创建一个带搜索的导航栏. 以下实例均是响应式的. 可以先看下效果图: 创建一个搜索栏主页关于联系我们 /* 在顶部导航栏中添加黑色背景颜色 */ .topnav ...
HTML+CSS 完成顶部导航栏菜单制作
导航栏针对一切网址都很重要,文中关键详细介绍了HTML+CSS 完成顶端导航栏菜单制作,具备一定的参考价值,感兴趣的小伙伴们能够参照一下导航栏的制作: 技术要求: CSS HTML各类标签实现目的 ...
css+div实现导航栏
css+div实现导航栏把页面分成两个部分,用div装起来 <body><div class="one1"><h1>SYROS</h1& ...
elementUI使用v-for创建无限级导航栏—— 递归组件
前几天一个月薪35k的兄弟,给我推了一个人工智能学习网站,看了一段时间挺有意思的.包括语音识别.机器翻译等从基础到实战都有,很详细,分享给大家.大家及时保存,说不定啥时候就没了. elementUI使 ...
HTML css jQuery实现导航栏(华丽动画)
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>H ...
vue2+element-ui创建顶部导航栏及下拉菜单
vue2+element-ui创建顶部导航栏及下拉菜单引入顶部导航栏使用下拉菜单获取Vuex store数据配置Vuex store 定义logout方法引入顶部导航栏创建client/s ...
html+css简单立体导航栏
html+css简单立体导航栏一.简单立体导航栏效果二.代码实现 1.html 2.css 一.简单立体导航栏效果二.代码实现 1.html 代码如下(示例): <!DOCTYPE htm ...
【源码分享】jquery+css实现侧边导航栏
jquery+css实现侧边导航栏最近做项目的时候,突然想用一个侧边导航栏,网上找了几个插件,有的太丑而且不太符合我的预期.与其修改别人的代码,不如自己来写一个了.废话不多说先上图,感兴趣的请继续看 ...

HTML+CSS 创建京东导航栏

HTML+CSS 创建京东导航栏相关推荐

最新文章

热门文章