web前端：做一個水平菜單效果的實戰案例！

今天小編帶大家來做水平菜單效果的實戰案例！

簡單來說就是做一個菜單，水平菜單！

首先還是給大家推薦一個學習氛圍很好的裙，我自己的，想要一起學習web前端的可以加裙六一四三一五六五七，有各種資料和開發工具包滿足大家，每天更新最新行情

在我們寫網頁的時候都是需要用到菜單這個功能，菜單能很好的解決用戶的選擇需求，那麼小編說的水平菜單，大家可以理解為水平居中，當然沒有做居中，居中剛剛做的時候忘記加上去了！

那麼我們來看一下這個水平居中菜單的實戰案例圖：

那麼上圖這個就是一個水平菜單，這個菜單是小編花了一兩分鐘寫的！

雖然簡單但是還可以咯！

那麼接下來我們看一下這個實戰案例的代碼：

菜鳥教程(runoob.com)

ul

a

a:hover

li

第一個

第二個

第三個

第四個

上面的示例中,我們讓ul元素和元素浮動。

li元素將顯示為內聯元素(沒有換行符的元素之前或之後)。

這迫使列表為一行。

ul元素的寬度的100%,每一個超鏈接列表的寬度6em(當前字體大小的6倍)。

我們添加一些顏色和邊界使其更高檔。

想要一起學習web前端的可以加裙六一四三一五六五七，有各種資料和開發工具包滿足大家，每天更新最新行情

喜歡這篇文章記得點一下訂閱，每天為您提供最新行業資訊，每天上午10點更新。想看關於什麼方面都可評論說

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！