站長(zhǎng)資訊網(wǎng)
之前的文章《css怎么給文字添加邊框或字體放大效果（代碼詳解）》中，給大家介紹了怎樣使用css文字添加邊框或字體放大。下面本篇文章給大家介紹如何用CSS制作一個(gè)簡(jiǎn)單美觀的導(dǎo)航欄，我們一起看看怎么做。
使用css制作頁(yè)面的時(shí)候，想做一個(gè)簡(jiǎn)單美觀的導(dǎo)航欄，怎么做呢，下面來(lái)分享一下方法。
導(dǎo)航欄+鏈接列表
導(dǎo)航條基本上是一個(gè)鏈接列表，所以使用 <ul> 和 <li>元素。
代碼示例
<body> <ul> <li><a href="#">php主頁(yè)</a></li> <li><a href="#">視頻</a></li> <li><a href="#">技術(shù)</a></li> <li><a href="#">關(guān)于</a></li> </ul> </body>
代碼效果圖
注意：這里我們用 href="#"作為測(cè)試連接。
可以添加 "active" 類(lèi)，選擇【php主頁(yè)】選項(xiàng)。
代碼示例
<li><a class="active" href="#">php主頁(yè)</a></li>
制作導(dǎo)航欄
通過(guò)<ul><li><a href=""></a></li></ul>的格式來(lái)實(shí)現(xiàn)導(dǎo)航欄。
代碼示例
<html> <head> <style> ul { list-style-type: none; margin: 1px; padding: 0px; width: 100px; background-color: #f7f4f1; text-align:center; } li a { display: block; color: #000; padding: 8px 16px; text-decoration: none; } li a.active { background-color: #6477; color: white; } li a:hover:not(.active) { background-color: #505; color: white; } </style> </head> <body> <ul> <li><a class="active" href="#">php主頁(yè)</a></li> <li><a href="#">視頻</a></li> <li><a href="#">技術(shù)</a></li> <li><a href="#">關(guān)于</a></li> </ul> </body> </html>
代碼效果圖
推薦學(xué)習(xí)：CSS視頻教程
