HTML+CSS简单实现京东顶部导航栏

效果图

html代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="./font-awesome-4.7.0/css/font-awesome.min.css"><link rel="stylesheet" href="./jd.css"><title>京东顶部导航栏</title>
</head>
<body><!-- 最底部背景条容器 --><div id="container"><!-- 导航栏容器 --><div class="nav"><!-- 左侧菜单项 --><ul class="fl"><li class="dq" ><a href="" class="city hover_red"><i class="fa fa-map-marker" aria-hidden="true" style="color: red;"></i><span>安徽</span></a><!-- 下拉菜单 --><div class="list"><div class="item"><a href="">北京</a></div><div class="item"><a href="">上海</a></div><div class="item"><a href="">天津</a></div><div class="item"><a href="">重庆</a></div><div class="item"><a href="">河北</a></div><div class="item"><a href="">山西</a></div><div class="item"><a href="">河南</a></div><div class="item"><a href="">辽宁</a></div><div class="item"><a href="">吉林</a></div><div class="item"><a href="">黑龙江</a></div><div class="item"><a href="">内蒙古</a></div><div class="item"><a href="">江苏</a></div><div class="item"><a href="">山东</a></div><div class="item"><a href="">安徽</a></div><div class="item"><a href="">浙江</a></div></div></li></ul><!-- 右侧菜单向容器 --><ul class="fr"><li><a href="" class="hover_red">你好,请登录</a>&nbsp;&nbsp;<a href="" style="color: red;">免费注册</a></li><li class="spacer"></li><li><a href=" " class="hover_red">我的订单</a></li><li class="spacer"></li><li  class="wdjd"><div><a href="" class="hover_red">我的京东</a><i class="fa fa-angle-down" aria-hidden="true"></i></div><div class="list"><div class="item1"><a href="">待处理订单</a></div><div class="item1"><a href="">我的问答</a></div><div class="item1"><a href="">返修退换货</a></div><div class="item1"><a href="">我的关注</a></div><div class="item1"><a href="">降价商品</a></div></div></li><li class="spacer"></li><li><a href="" class="hover_red">京东会员</a></li><li class="spacer"></li><li  class="qycg"><div><a href=""  style="color: red;">企业采购</a><i class="fa fa-angle-down" aria-hidden="true"></i></div><div class="list1"><div class="item1"><a href="">待处理订单</a></div><div class="item1"><a href="">我的问答</a></div><div class="item1"><a href="">返修退换货</a></div><div class="item1"><a href="">我的关注</a></div><div class="item1"><a href="">降价商品</a></div></div></li><li class="spacer"></li><li  class="qycg"><div><a href="">客户服务</a><i class="fa fa-angle-down" aria-hidden="true"></i></div><div class="list1"><dd>客户</dd><dt><div class="item1"><a href="">帮助中心</a></div></dt><dt><div class="item1"><a href="">售后服务</a></div></dt><dt><div class="item1"><a href="">在线客服</a></div></dt><dt><div class="item1"><a href="">意见建议</a></div></dt><dt><div class="item1"><a href="">电话客服</a></div></dt></div></li><li class="spacer"></li><li  class="wzdh"><div><a href="">网站导航</a><i class="fa fa-angle-down" aria-hidden="true"></i></div><div class="list2"></div></li><li class="spacer"></li><li><div style="color: grey;">手机京东</div></li><li class="spacer"></li><li><a href="" class="hover_red">网站无障碍</a></li></ul></div></div></body>
</html>

css代码

jd.css

/* 去除a链接的下划线并将字体颜色设为灰色 */
a{text-decoration: none;color: grey;
}/* 去除列表默认样式 */
ul{list-style: none;
}/* 去除浏览器默认样式 */
*{margin:0px;padding: 0px
}/* 设置底层容器颜色及下边框 */
#container{border-bottom: 1px solid #ddd;background-color: #e3e4e5;
}/* 设置导航栏宽度、高度、行高、外边距 */
.nav{width: 1190px;margin: auto;height: 30px;line-height: 30px;
}/* 将左侧菜单容器左浮动 */
.fl{float: left;
}/* 设置菜单项参数，为是hover效果加边框时不发生抖动，提前设置边框并将颜色设为透明色 */
.dq{padding-left:10px;padding-right: 5px;width: 60px;position: relative;text-align:-webkit-match-parent;border-top: 1px solid transparent;border-left: 1px solid transparent;border-right: 1px solid transparent;
}/* 设置居中 */
.city{text-align: center;line-height: 30px;}/* 城市、我的京东  的下拉边框，当鼠标未移入时隐藏 */
.list{width: 300px;left: -1px;padding:10px;display: none;border-bottom: 1px solid #ccc;border-left: 1px solid #ccc;border-right: 1px solid #ccc;background-color: white;position: absolute;
}/* 企业采购、客户服务  的下拉边框，当鼠标未移入时隐藏 */
.list1{width: 200px;left: -1px;padding:10px;display: none;border-bottom: 1px solid #ccc;border-left: 1px solid #ccc;border-right: 1px solid #ccc;background-color: white;position: absolute;
}/* 网站导航  的下拉边框，当鼠标未移入时隐藏 */
.list2{width: 980px;height: 300px;left: -1px;padding:10px;display: none;border-bottom: 1px solid #ccc;border-left: 1px solid #ccc;border-right: 1px solid #ccc;background-color: white;position: absolute;
}/* 设置外边距 */
.list1>.item1{margin:0px  10px;
}/* 设置下拉菜单中元素参数 */
.item{float: left;width: 60px;padding:2px 0 ;
}/* 设置下拉菜单中元素参数 */
.item1{float: left;width: 100px;padding:2px 0 ;
}/* 当鼠标移入时显示下拉菜单 */
.fl .dq:hover .list ,.fr .wdjd:hover .list,.fr .qycg:hover .list1,.fr .wzdh:hover .list2 {display: block;
}/* 鼠标移入菜单时将边框显示出来，并设置背景色 */
.fl .dq:hover ,.fr .wdjd:hover,.fr .qycg:hover ,.fr .wzdh:hover{border-top: 1px solid #ccc;border-left: 1px solid #ccc;border-right: 1px solid #ccc;background-color: white;}/* 鼠标移入时字体变红 */
a.hover_red:hover{color: red;
}/* 右侧菜单容器向右浮动 */
.fr{float: right;
}/* 右侧容器内的元素左浮动 */
.fr>li{float: left;
}/* 设置右侧菜单之间的竖条 */
.spacer{margin:11px 5px 0;width: 1px;height: 10px;background-color: #ccc;
}/* 设置对应菜单参数 */
.wdjd,.qycg,.wzdh{padding-left:10px;padding-right: 5px;position: relative;text-align:-webkit-match-parent;border-top: 1px solid transparent;border-left: 1px solid transparent;border-right: 1px solid transparent;
}

HTML+CSS简单实现京东顶部导航栏相关推荐

html怎么设置顶部导航栏,互联网常识：CSS+HTML如何实现顶部导航栏
本篇文章给大家介绍一下CSS+HTML实现顶部导航栏的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 导航栏的实现.固定顶部导航栏.二级菜单实现效果图: 最近在使用这个导航栏 ...
使用 HTML/CSS 实现 Educoder 顶部导航栏
第1关:使用flex布局实现Educoder顶部导航栏容器布局任务描述本关任务:使用flex布局实现容器两端对齐的效果. 效果如下: 相关知识使用flex布局实现左右分开布局的方式有多种: 使用 ...
css导航滚动到顶部后保持不动,html-使用CSS滚动时，使导航栏保持顶部
html-使用CSS滚动时,使导航栏保持顶部我正在尝试使导航栏与页面一起移动,但是如果用户向下滚动,则导航栏会停留在顶部. 谁能提供任何示例或如何提供? 非常感激. (我用其他任何语言都没有希望). ...
尚硅谷前端-京东左侧导航栏及网易新闻列表练习——CSS
跟着尚硅谷老师的练习,记录一下自己做的内容,查漏补缺. 目录一.京东左侧导航栏 1.第一次自己做的代码(未看老师讲解视频前做的): 总结: 2.看完老师视频后跟着写的代码: 注意点及总结删除行内元 ...
uniapp去掉顶部导航栏后计算手机安全区距离，css背景模糊效果
问题: 1.uniapp去掉顶部导航栏后计算手机安全区距离 2.模糊背景的局部清晰 3.去除overflow: auto:带来的滚动条(没有滚动条也可以滚动) 4.监测页面滑动使用的方法 5.data ...
html+css实现页面顶部导航栏
最终效果如下: 接下来,我将从html和css两大部分,逐步为您讲解制作过程目录 Html 实现布局创建父栏目创建子栏目插入外部样式表,为接下来的css编辑做准备 Css 实现样式排布文本, ...
页面顶部导航栏css样式布局
项目场景: css样式布局例如:项目场景:页面顶部导航栏,左侧logo.右侧退出登录固定在页面,不随滚动条滚动:中间有菜单,添加滚动条. 问题描述顶部导航栏出现滚动条,滚动条位置在页面底部解决方 ...
仿写小米网站首页顶部导航栏部分
说明: 1.由于本人只学习了部分html和css,所以本文没有涉及到js部分. 2.本文并没有实现小米官网首页的全部功能,还存在很多问题.如果以后技能提升,会继续更新实现未完成的功能. 3.这个练习会 ...
uniapp添加顶部导航栏并且更换图标
uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架. 开发者通过编写 Vue.js 代码,uni-app 将其编译到iOS.Android.微信小程序等多个平台,保证其正确运行并达到优 ...

HTML+CSS简单实现京东顶部导航栏

HTML+CSS简单实现京东顶部导航栏相关推荐

最新文章

热门文章