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; ...
随机推荐
- Spring Cloud Alibaba+Nacos搭建微服务架构
1. Spring Cloud Alibaba 简介 Spring Cloud Alibaba是阿里巴巴为分布式应用提供的一站式解决方案,能够更方便快捷地搭建分布式平台,nacos拥有着替换eu ...
- Design Patterns All in One (JavaScript Version)
Design Patterns All in One (JavaScript Version) JavaScript 设计模式 JavaScript 数据结构 23种设计模式分为 3 大类: 创建型模 ...
- GitHub GraphQL API v4 & GitHub REST API v3
GitHub, GraphQL API, v4 ,REST API, v3, GraphQL, https://developer.github.com/v4/ https://developer.g ...
- Headless Chrome Node API
puppeteer Headless Chrome Node API https://github.com/GoogleChrome/puppeteer https://pptr.dev/ PWA h ...
- fullstack web projects in action
fullstack web projects in action web 全栈项目实战 Angular 全栈 Angular + TypeScript + Nest.js + PostgreSQL + ...
- Python Learning Paths
Python Learning Paths Python Expert Python in Action Syntax Python objects Scalar types Operators St ...
- browsers simulator
browsers simulator https://developers.google.com/web/tools/chrome-devtools/device-mode/testing-other ...
- Azure 信用卡扣款 1 美元 & Azure 中国客服
Azure 信用卡扣款 1 美元 & azure 中国客服 Azure 免费帐户常见问题 https://azure.microsoft.com/zh-cn/free/free-account ...
- c++ 读取ASCII
void ReadASCII(BYTE* addr, size_t offset, char r[]) { size_t i = 0; char c; while (true) { c = *(add ...
- LinkedList 的实现原理
本文为博客园作者所写: 一寸HUI,个人博客地址:https://www.cnblogs.com/zsql/ 简单的一个类就直接说了.LinkedList 的底层结构是一个带头/尾指针的双向链表,可以 ...