首页用css和ul，li做一个水平导航栏

用css和ul，li做一个水平导航栏

时间: 2024-03-10 15:47:01 浏览: 143

可以使用以下代码来实现水平导航栏： ```html <!DOCTYPE html> <html> <head> <title>Horizontal Navigation Bar</title> <style> ul { list-style-type: none; /* 去掉默认的列表样式 */ margin: 0; /* 去掉默认的外边距 */ padding: 0; /* 去掉默认的内边距 */ overflow: hidden; /* 隐藏超出部分 */ background-color: #333; /* 背景色 */ } li { float: left; /* 左浮动，使得多个 li 可以并排 */ } li a { display: block; /* 将链接转换为块级元素 */ color: white; /* 链接文字颜色 */ text-align: center; /* 文字居中对齐 */ padding: 14px 16px; /* 链接内边距 */ text-decoration: none; /* 去掉下划线 */ } li a:hover { background-color: #111; /* 鼠标悬停时的背景色 */ } </style> </head> <body> <ul> <li><a href="#">Home</a></li> <li><a href="#">News</a></li> <li><a href="#">Contact</a></li> <li><a href="#">About</a></li> </ul> </body> </html> ``` 上述代码中，`ul`元素表示整个导航栏，`li`元素表示导航栏中的每个选项，`a`元素表示每个选项的链接。通过设置`float: left`使得多个`li`元素可以并排，从而实现水平排列的效果。其他的CSS样式可以根据需要进行调整。

阅读全文