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; ...
随机推荐
- L3-002. 堆栈【主席树 or 线段树 or 分块】
L3-002. 堆栈 时间限制 200 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 大家都知道"堆栈"是一种"先 ...
- HDU2837 Calculation（指数循环节）题解
题意: 已知\(f(0)=1,f(n)=(n\%10)^{f(n/10)}\),求\(f(n)\mod m\) 思路: 由扩展欧拉定理可知:当\(b>=m\)时,\(a^b\equiv a^{b ...
- 手工数据结构系列-C语言模拟队列 hdu1276
#include <stdio.h> #include <stdlib.h> #define init_size 1000 typedef struct { int head, ...
- hdu5693D++游戏 区间DP-暴力递归
主要的收获是..如何优化你递推式里面不必要的决策 之前的代码 这个代码在HDU超时了,这就对了..这个复杂度爆炸.. 但是这个思路非常地耿直..那就是只需要暴力枚举删两个和删三个的情况,于是就非常耿直 ...
- 基于vue3.0+electron新开窗口|Electron多开窗体|父子模态窗口
最近一直在折腾Vue3+Electron技术结合的实践,今天就来分享一些vue3.x和electron实现开启多窗口功能. 开始本文之前,先来介绍下如何使用vue3和electron来快速搭建项目. ...
- rm -rf .git/gc.log
rm -rf .git/gc.log ➜ test git:(abc) gp Auto packing the repository in background for optimum perform ...
- 中文域名 & 原理剖析
中文域名 & 原理剖析 https://zh.wikipedia.org/wiki/中文域名 原理 利用浏览器的对字符编码的转换算法,实现 unicode 字符显示! 国际化域名: 就是一个普 ...
- GeoJSON feature & Mapbox segments
GeoJSON feature & Mapbox segments custom JSON format ??? { "rows": [], "props&quo ...
- 千万不要错过VAST，NGK算力的下一个财富机会！
我们把目光投向NGK市场,近来,NGK接连新币,推出了SPC后,又有VAST.在目前市场上债券收益率已经趋近于零的情况下,世界上的大多数央行都在试图让本国货币贬值,所以在此时寻找其他保值资产是合理的. ...
- django学习-24.创建时间和更新时间的添加
目录结构 1.前言 2.入参auto_now和入参auto_now_add 2.1.入参auto_now的相关知识点 2.2.入参auto_now_add的相关知识点 3.完整的操作流程 3.1.第一 ...