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; ...
随机推荐
- codeforces 6E (非原创）
E. Exposition time limit per test 1.5 seconds memory limit per test 64 megabytes input standard inpu ...
- Spring-cloud-netflix-hystrix
服务注册中心eureka-server已经搭好,并且SPRING-CLOUD-NETFLIX-EUREKA-CLIENT-APPLICATION提供一个hello服务 畏怯还编写一个eureka-cl ...
- js console API All In One
js console API All In One const log = console.log; for(const key in console) { log(`navigator.${key} ...
- Linux in depth
Linux in depth bash file text editor filter selector command ?
- WiFi 6 & 5G
WiFi 6 & 5G https://zhuanlan.zhihu.com/p/85509996 https://www.bilibili.com/read/cv3206576/ https ...
- GoEasy使用阿里云OSS出现的问题
前言:本人使用goeasy来实现微信小程序里面和其他人的im临时对话窗口,想要实现可以同时发送语音和视频.图片.表情包的话,就要通过goeasy关联到阿里云的存储对象. 报错:The OSS Acce ...
- 两百万SPC空投来袭，带动市场热情！
NGK投放项目的时间节点总是以牛市为主,像是上一次的BGV项目投放就在2020年末的数字加密货币牛市,其结果想必各位生态建设者们都已经见到了,在登陆交易所首日便高收于近889美金,创下惊人的近一千七百 ...
- django学习-18.*args和**kwargs的用法和使用场景
目录结构 1.前言 2.[*args]的用法 2.1.第一步:首先编写这样的函数[test1]. 2.2.第二步:给函数[test1]赋值相关入参值. 2.3.第三步:调用函数[test1],得到以下 ...
- JDK源码阅读-FileInputStream
本文转载自JDK源码阅读-FileInputStream 导语 FileIntputStream用于打开一个文件并获取输入流. 打开文件 我们来看看FileIntputStream打开文件时,做了什么 ...
- fixed实现遮罩层，小程序
css /** 分享微信,分享朋友圈 **/ .goods_share_mask { background-color: rgba(0, 0, 0, 0.3); position: fixed; to ...