前端学习-CSS京东导航栏
<!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>
前端学习-CSS京东导航栏相关推荐
- CSS学习笔记(十二)CSS 水平导航栏
CSS 水平导航栏 水平导航栏 有两种创建水平导航栏的方法:使用行内或浮动列表项. 行内列表项 构建水平导航栏的一种方法是,除了上一章中的"标准"代码外,还要将 <li> ...
- css制作动态按钮导航栏,巧妙使用checkbox制作纯css动态导航栏
前提:很多时候.我们的网页都需要一个垂直的导航栏.可以分类.有分类.自然就有展开.关闭的功能.你还在使用jquery操作dom来制作吗?那你就out了! 方案:使用checkbox 的 checked ...
- css订单导航栏横线动画,小程序 纯css 实现tab导航栏下划线跟随动画
很多时候在做tab导航的点击时我们都会要上一个过渡的动画,不然的话会显得生硬,用户没有达到比较佳的用户体验.如下图: 在开发者工具中预览效果 t3fyo-a07nj.gif 我们可以用两种方法实现这样 ...
- html导航去下划线,纯CSS实现导航栏下划线跟随的示例代码
本篇文章主要介绍了纯CSS实现导航栏下划线跟随的示例代码,分享给大家,具体如下: 效果: 代码: html: aaaa bbbbbbb cccc dddd eeee css: ul { padding ...
- html导航图片滚动条,CSS实现导航栏底部动态滚动条效果
预习了CSS3部分的新知识,想着在不使用JS的情况下实现导航栏滚动条效果,如下: 实现滚动条效果,其实就是在 标签中让元素的宽度由0变化到100%,代码很简单,如下所示: CSS样式部分: ul.na ...
- HTML字母导航栏怎么做,如何用css做导航栏?
如何用css做导航栏? 1.新建一个html文件,在head部分,编写css样式 ○ list-style-type: none;是除掉导航前面默认带的点 ○ li a,li a.active ,li ...
- HTML+CSS一级导航栏
大一学的都忘记了,有机会重新学习一遍,简单记录下(小傻猫),日常 记录学习 HTML <!DOCTYPE html> <html lang="en"> &l ...
- 利用 html 和 css 实现导航栏下拉(display block、display none)
利用 html 和 css 实现导航栏下拉(display block.display none) 需求 设计并实现一个导航栏菜单,对某个项目比如你的个人书籍按类别(硬件类.软件类.语言类.网络类等分 ...
- HTML+CSS伸缩式导航栏
HTML+CSS伸缩式导航栏 几天制作伸缩式导航栏 首先确立一个结构 接下来是html代码 <!DOCTYPE html> <html><head><meta ...
最新文章
- debian宝塔界面安装php失败,宝塔面板安装遇到的问题
- Java:Random.nextInt()
- Mac Apache WebDav 服务器配置
- 带你体验云原生场景下 Serverless 应用编程模型
- 产生10个1-100的随机数,并放到一个数组中, 把数组中大于等于10的数字放到一个list集合中,并打印到控制台。
- python入门指南 许半仙-《猛一相亲指南》TXT全本 百度云网盘下载 by许半仙
- ubuntu服务器开放端口_Docker服务开放了这个端口,服务器分分钟变肉机
- pandas nat_EDA神器pandas-profiling万岁?
- 易用性软件测试用例,易用性测试用例集
- ubuntu16.04多GPU风扇转速调整
- 汽车汽油电子喷射系统
- python的就业方向有哪些城市_Python就业方向有哪些?人工智能就业薪资待遇高吗?...
- 基于用户行为分析建立用户偏好模型
- Ubuntu-图形界面和字符界面切换快捷键
- unity shader相关工具教程
- ESP32-C3 学习测试 蓝牙 篇(五、添加 characteristic)
- 在那之后,我决定做一个出色的打工仔!
- 名帖148 行书《兰亭八柱帖》第六册:于敏中补戏鸿堂刻柳公权书兰亭诗阙笔册
- 转大型分布式网站术语浅析
- 怎么开发一款应用程序?
热门文章
- 面试官问“为什么应聘这个岗位”,应该如何回答?
- Python基础Pro | (17) 电子邮件
- 巴东县黄土坡滑坡GNSS自动化位移监测解决方案
- 基于SIR的社交网络谣言传播问题简单建模
- 【码农学编曲】认识五线谱
- Python编曲实践(八):我,乔鲁诺·乔巴那,能用两百行代码写出JOJO黄金之风里我自己的出场曲!
- svn修改offline状态
- 怎么去除WORD的背景颜色
- JavaEE实现微博项目(含注册、登录、发表微博、评论微博、关注博主、阅读排行榜、评论排行榜等功能)
- 微博粉丝精灵_天猫精灵“布蕉绿”新品上线,解锁智能音箱潮流新玩法!