HTML導航條的制作

導航條的制作HTML代碼：
<nav>

　　<ul>

　　　　<li>

　　　　　　<a href="#"></a>

　　　　</li>

　　　　<li>

　　　　　　<a href="#"></a>

　　　　</li>

　　</ul>

</nav>

以上是導航條制作的基本格式，接下來是css樣式

去除li帶來的小黑點:

li{
                list-style: none;
            }

將nav設置一個合適的寬，高度由內容去撐開，只需要設置margin：auto將整個導航欄居中

將a標簽的下划線去掉： text-decoration: none;

將導航條中<li>的內容設置樣式：

.link li{
                float: left;  ————把內容左浮動，這樣可以橫向排列
                width: 100px;——設置每個li的寬
                height: 30px;——設置每個li的高
                background-color:pink  ——設置li的背景顏色為粉色
                border: 1px solid #6495ED; ——設置li的邊框顏色以及邊框大小
                text-align: center;——設置li中的文字樣式為居中
                line-height: 30px;——設置li中文字舉例上邊框的高度
            }

.link li:hover{     ————設置將鼠標放到li時的背景顏色
                background-color: aqua;
            }

 

  .link li:hover a{  ————設置將鼠標放到li中的a標簽的內容時的文字顏色
                color: black;
                    }

 

最終特效是：