css实现京东顶部导航条
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <link rel="stylesheet" href="./css/all.css">
7 <link rel="stylesheet" href="./reset.css">
8 <style>
9 body {
10 font-size:14px;
11 }
12 /*解决元素浮动后到来的高度塌陷 */
13 .clearfix::before,
14 .clearfix::after {
15 content:"";
16 display:table;
17 clear:both;
18 }
19 .top-bar-wraper {
20 width:100%;
21 height:30px;
22 /* 设置行高使文字在容器中水平居中 */
23 line-height:30px;
24 border-bottom:1px #E1E1E1 solid;
25 background-color:#E3E4E5;
26 }
27 .top-bra{
28 width:1190px;
29 margin:0px auto;
30 }
31 .location {
32 float:left;
33 margin-left: 100px;
34 position: relative;
35 }
36 .location a {
37 margin:0 auto;
38 }
39 /*将列表向右浮动*/
40 .shutcut {
41 float:right;
42 }
43 /*设置li向左浮动*/
44 .shutcut li {
45 float:left;
46 }
47 .top-bar a,
48 .top-bar i {
49 color:#999;
50 text-decoration: none;
51 }
52 .top-bar a:hover {
53 color:#f10215;
54 }
55 .top-bar .high {
56 color:#f10215;
57 }
58 /*设置分割线*/
59 .shutcut .line {
60 width:1px;
61 height:10px;
62 background-color: #999;
63 margin:10px 12px;
64 }
65 .location i{
66 color:red;
67 }
68 .location .city-list {
69 width: 320px;
70 height: 436px;
71 background-color: white;
72 display:none;
73 border:1px solid rgb(204,204,204);
74 border-top:none;
75 /*设置绝对定位使其脱离文档流，如果不设置定位，则显示是> 会影响页面布局*/
76 position: absolute;
77 top:29px;
78 /*设置阴影*/
79 box-shadow:0 2px 2px rgba(0,0,0,0.2);
80 /*设置层级*/
81 z-index: 9999;
82 }
83 /*移入效果设置在lication上，因为其包含city和city-list*/
84 .location:hover
85 .city-list
86 {
87 display:block;
88 }
89 .city {
90 height: 30px;
91 line-height:30px;
92 padding: 0 10px;
93 border:1px solid transparent;
94 border-bottom:none;
95 margin-top:1px;
96 position: relative;
97 z-index:9999;
98 }
99 /*当鼠标移入是设置背景色*/
100 .location:hover .city {
101 background-color:white;
102 border:1px #cccccc solid;
103 border-bottom:none;
104 }
105 .city-list a {
106 display:block;
107 float:left;
108 width:60px;
109 text-align: center;
110 text-decoration: none;
111 line-height: 20px;
112 margin:4px auto;
113 32 border:1px #ccc solid;
114 33 background-color:#e14e14e14;
115 }
116 </style>
117 </head>
118 <body>
119 <!--创建外部容器-->
120 <div class="top-bar-wraper">
121 <!--创建内部容器-->
122 <div class="top-bar clearfix">
123 <div class="location">
124 <div class="city">
125 <a href="javescript:;">
126 <i class = "fas fa-map-marker-alt"></i>
127 </a>
128 <a href="javescript:;">江西</a>
129 </div>
130 <!--放置一个城市列表-->
131 <div class="city-list">
132 <a href="">北京</a>
133 <a href="">上海</a>
134 <a href="">天津</a>
135 <a href="">重庆</a>
136 <a href="">安徽</a>
137 <a href="">福建</a>
138 <a href="">甘肃</a>
139 <a href="">广东</a>
140 <a href="">贵州</a>
141 <a href="">海南</a>
142 <a href="">河北</a>
143 <a href="">河南</a>
144 <a href="">湖北</a>
145 <a href="">湖南</a>
146 <a href="">吉林</a>
147 <a href="">江苏</a>
148 <a href="">江西</a>
149 <a href="">辽宁</a>
150 <a href="">宁夏</a>
151 <a href="">青海</a>
152 <a href="">山东</a>
153 <a href="">山西</a>
154 <a href="">陕西</a>
155 <a href="">四川</a>
156 <a href="">西藏</a>
157 <a href="">新疆</a>
158 <a href="">云南</a>
159 <a href="">浙江</a>
160 <a href="">黑龙江</a>
161 <a href="">内蒙古</a>
162
163
164 </div>
165 </div>
166 <ul class="shutcut">
167 <li>
168 <a class = "shutcut-text"href="javescript:;"><s pan>你好，请登录</span></a>
169 <a class = "shutcut-text"href="javescript:;"><s pan>免费注册</span></a>
170 <i class="fas fa-angle-down"></i>
171 </li>
172 <li class="line"></li>
173 <li>
174 <a class = "shutcut-text"href="javescript:;"><s pan>我的订单</span></a>
175
176 </li>
177 <li class="line"></li>
178 <li>
179 <a class = "shutcut-text"href="javescript"><spa n>我的京东</span></a>
180
181 </li>
182 <li class="line"></li>
183 <li>
184 <a class = "shutcut-text"href="javescript"><spa n>京东会员</span></a>
185 </li>
186 <li class="line"></li>
187 <li>
188 <a class = "shutcut-text high"href="javescript" ><span>企业采购</span></a>
189 <i class="fas fa-angle-down"></i>
190 </li>
191 <li class="line"></li>
192 <li>
193 <a class = "shutcut-text"href="javescript"><spa n>客户服务</span></a>
194 <i class="fas fa-angle-down"></i>
195 </li>
196 <li class="line"></li>
197 <li>
198 <a class = "shutcut-text"href="javescript"><spa n>网站导航</span></a>
199 <i class="fas fa-angle-down"></i>
200 </li>
201 <li class="line"></li>
202 <li>
203 <a class = "shutcut-text"href="javescript"><spa n>手机京东</span></a>
204 </li>
205 </ul>
206 </div>
207
208 </div>
209 </body>
210 </html>
css实现京东顶部导航条的更多相关文章
- 模仿京东顶部搜索条效果制作的一个小demo
最近模仿京东顶部搜索条效果制作的一个小demo,特贴到这里,今后如果有用到可以参考一下,代码如下 #define kScreenWidth [UIScreen mainScreen].bounds.s ...
- uni-app自定义导航栏按钮|uniapp仿微信顶部导航条
最近一直在学习uni-app开发,由于uniapp是基于vue.js技术开发的,只要你熟悉vue,基本上很快就能上手了. 在开发中发现uni-app原生导航栏也能实现一些顶部自定义按钮+搜索框,只需在 ...
- css制作漂亮彩带导航条菜单
点击这里查看效果:http://keleyi.com/keleyi/phtml/divcss/17.htm 效果图: 以下是源代码: <!DOCTYPE html PUBLIC "-/ ...
- 三角形变形记之纯css实现的分布导航条效果
三角形变形记,用纯css实现的分布导航条效果 <style type="text/css"> ul,li { list-style-type:none; font-si ...
- UINavigationController及顶部导航条
UINavigationController管理一个VC的栈,栈底的VC叫做这个UINavigationController的root view controller. 有一个函数叫做popToRoo ...
- HTML实例-02-京东顶部导航条
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- CSS了一个浮动导航条
绝对浏览器窗口定位positio:FIXED: 下拉后出现返回顶部按钮 图片是我们美工给做的.55*55px,中间缝隙3px. css: html,body { height:100%}html,bo ...
- Bootstrap 固定在顶部导航条
@{ Layout = null;}<!DOCTYPE html><html><head> <meta name="viewport&q ...
- css ul li 制作导航条
<html> <head> <style> .test ul{list-style:none;} .test li{float:left; width:100px; ...
随机推荐
- .NET并发编程-数据结构不可变性
本系列学习在.NET中的并发并行编程模式,实战技巧 内容目录 .NET不可变集合.NET并发集合函数式数据结构设计一个不可变类 作为程序员经常遇到产品上线后出现各种莫名其妙的问题,在我本地是好好的啊, ...
- 前端知名人士 All In One
前端知名人士 All In One 前端名人堂(中国) https://node.fequan.com/lecturer/ JavaScript的过去.现在和未来 1995年,Brendan Eich ...
- NGK乘势而上打造生态所，建立全方位的区块链生态系统
当金融理财变成了生活的一部分,购买金融衍生品的眼光成为了影响生活质量重要组成部分.这是一个不缺少黄金的年代,一夜间实现财务自由的故事每天都在上演,但是由于太多人缺少发现黄金的眼睛,只能被财富和机遇拒之 ...
- 双十一NGK官方快讯！
- OAuth：每次授权暗中保护你的那个“MAN”
摘要:OAuth是一种授权协议,允许用户在不将账号口令泄露给第三方应用的前提下,使第三方应用可以获得用户在某个web服务上存放资源的访问权限. 背景 在传统模式下,用户的客户端在访问某个web服务提供 ...
- Java Reference核心原理分析
本文转载自Java Reference核心原理分析 导语 带着问题,看源码针对性会更强一点.印象会更深刻.并且效果也会更好.所以我先卖个关子,提两个问题(没准下次跳槽时就被问到). 我们可以用Byte ...
- Window下Scala开发环境搭建
在Windows下搭建Scala开发环境,需要做以下几个步骤 1) 安装JDK 2) 安装Scala,并配置环境变量 3) Idea安装并创建Scala 类 1.安装JDK JDK安装,这里不再介绍, ...
- restful风格的理解
简而言之,就是不同的命令响应不同的操作: 关注点在url中的不同参数,是因为不同的参数才使得不同的method去对应的不同的操作.
- MySQL5.7.29 和 Navicat ===> windows窗口式按装和使用
MySQL windows窗口式按装下载方法:官网: https://www.mysql.com/ ==> DOWNLOADS ==> MySQL Community (GPL) Down ...
- Dubbo与Zookeeper开发
1.Dubbo 1.1RPC RPC全称是remote procedure call,即远程过程调用.比如有两台服务器A和B,它们上面分别部署了一个服务.此时B服务器想调用A服务器上提供的方法,由于不 ...