站長資訊網(wǎng)
之前的文章《css怎么給文字添加邊框或字體放大效果（代碼詳解）》中，給大家介紹了怎樣使用css文字添加邊框或字體放大。下面本篇文章給大家介紹如何用CSS制作一個簡單美觀的導航欄，我們一起看看怎么做。
使用css制作頁面的時候，想做一個簡單美觀的導航欄，怎么做呢，下面來分享一下方法。
導航欄+鏈接列表
導航條基本上是一個鏈接列表，所以使用 <ul> 和 <li>元素。
代碼示例
<body> <ul> <li><a href="#">php主頁</a></li> <li><a href="#">視頻</a></li> <li><a href="#">技術</a></li> <li><a href="#">關于</a></li> </ul> </body>
代碼效果圖
注意：這里我們用 href="#"作為測試連接。
可以添加 "active" 類，選擇【php主頁】選項。
代碼示例
<li><a class="active" href="#">php主頁</a></li>
制作導航欄
通過<ul><li><a href=""></a></li></ul>的格式來實現(xiàn)導航欄。
代碼示例
<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主頁</a></li> <li><a href="#">視頻</a></li> <li><a href="#">技術</a></li> <li><a href="#">關于</a></li> </ul> </body> </html>
代碼效果圖
推薦學習：CSS視頻教程
