css实现京东顶部导航条
2024-10-19 19:40:18
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>
最新文章
- 取消ie浏览器edge浏览器输入框右边的叉和眼睛
- 在ubuntu下安装google chrome
- php中的登陆login
- git下载指定版本的代码
- Java中Timer的用法
- php二维数组按照键值排序的方法
- iOS使用Charles（青花瓷）抓包并篡改返回数据图文详解
- NSTimer scheduledTimerWithTimeInterval与timerWithTimeInterval、initWithFireDate的区别
- 中国地图投影（实现Lambert投影）
- [MySQL 5.6] 初识5.6的optimizer trace
- linux串口驱动分析
- 智能的PHP缩图类
- Cmake中的find_package功能
- dedecms一些技巧
- ubuntu下打开chm文件
- CCNA网络工程师学习进程（10）NAT的配置
- 转换函数TO_CHAR，TO_DATE，TO_NUMBER
- Java反射异常：java.lang.NoSuchFieldException
- create-react-app创建项目并用git上传至GitHub及展示预览效果
- Apache Flink 简单安装