如何用最簡潔的css代碼寫一個導航欄

首先我們在里面通過標簽添加一個logo,然后通過標簽簡單的設置幾個導航欄中的內容。
注：標簽主要是用于設置超鏈接。

<div><img src="logo.png"><a href="#">首頁</a><a href="#">游戲中心</a><a href="#">游戲社區</a><a href="#">游戲動態</a> </div>

這里是最初沒有經過CSS 語句修飾的網頁效果

現在通過CSS標簽進行修飾

（1）首先，我們先給最外層的

標簽進行設置，讓導航欄的原始外框展示出來。

div {width: 1500px;height: 84px;background-color: #323235;}

(2)其次我們需要修改的就是標簽的CSS屬性：

a {width: 150px;height: 84px;color: #fff;font-size: 24px;/*文字水平居中*/text-align: center;/*設定行高等于盒子高度，垂直居中*/line-height: 84px;/*行內元素轉換為塊級元素*/display: inline-block;/*去除超鏈接文本的下劃線*/text-decoration: none;}

標簽中的后幾個元素的設置也是導航欄的關鍵部分，同時給
標簽也進行設置

img {width: 200px;height: 84px;margin-top: 10px;margin-left: 150px; float: left；}

此時簡單的導航欄也出來了：

（3）最后，設置一個鼠標的點擊效果就好了：

a:hover {color: yellow; }

大學生it技術交流QQ群

總結

以上是生活随笔為你收集整理的如何用最简洁的css代码写一个导航栏的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。