要制作一个 CSS 导航条,可以按照以下步骤进行:
- 创建 HTML 结构:使用
和元素创建一个无序列表,每个
元素代表一个导航项。
- 添加 CSS 样式:使用 CSS 样式来设置导航条的外观和布局。
.navbar { list-style-type: none; margin: 0; padding: 0; background-color: #f2f2f2; overflow: hidden; } .navbar li { float: left; } .navbar li a { display: block; color: #333; text-align: center; padding: 14px 16px; text-decoration: none; } .navbar li a:hover { background-color: #ddd; } .navbar li a.active { background-color: #4CAF50; color: white; }
- 在 HTML 文件中引入 CSS 文件。
这样就完成了一个简单的 CSS 导航条的制作。你可以根据需要对 CSS 样式进行调整,以满足特定的设计要求。