CSS導航條nav簡單樣式

時間 2019-12-10

標籤 css 導航 nav 簡單樣式欄目 CSS 简体版

原文原文鏈接

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>CSSTest</title>
 7     <style type="text/css">
 8         *{
 9             margin: 0;
10             padding: 0;
11         }
12 
13         .nav {
14             list-style: none;
15             background-color: #6495ed;
16             width: 1000px;
17             margin: 50px auto;
18             /*高度塌陷，子元素浮動*/
19             overflow: hidden;
20         }
21 
22         .nav li {
23             float: left;
24             /*爲每一個li指定一個寬度，雖然效果出來了，可是每一個li
25               不具備超連接屬性,易用性很差，li是a的父元素，先給父元素一個
26               寬度值，再來設置a寬度
27             */
28             width: 12.5%;
29         }
30 
31         /*當鼠標移入時改變背景顏色*/
32         .nav a:hover {
33             background-color: #c00;
34         }
35 
36         a {
37             /**爲a標籤指定一個寬度
38                a是一個內聯元素寬度失效，轉爲塊元素*/
39             display: inline-block;
40             width: 100%;
41             /*設置文字居中*/
42             text-align:center;
43             /*設置一個上下內邊距*/
44             padding: 5px 0;
45             /*去除下劃線*/
46             text-decoration: none;
47             /*字體顏色設置*/
48             color: white;
49             /*字體加粗*/
50             font-weight: bold;
51         }
52     </style>
53 </head>
54 <body>
55     <!-- 導航條練習 -->
56     <ul class="nav">
57         <li><a href="">首頁</a></li>
58         <li><a href="">新聞</a></li>
59         <li><a href="">聯繫</a></li>
60         <li><a href="">關於</a></li>
61         <li><a href="">首頁</a></li>
62         <li><a href="">新聞</a></li>
63         <li><a href="">聯繫</a></li>
64         <li><a href="">關於</a></li>
65     </ul>
66 </body>
67 
68 </html>