css實現京東頂部導航條
阿新 • • 發佈：2020-11-21
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>