使用 CSS 中的内联列表项构建水平导航栏

ID:13236 / 打印

使用 css 中的内联列表项构建水平导航栏

使用内联列表项构建水平导航栏。将

  • 元素设置为内联。

    示例

    您可以尝试运行以下代码来创建水平导航栏:

    Live演示

    <!DOCTYPE html> <html>    <head>       <style>          ul {             list-style-type: none;             margin: 0;             padding: 0;          }          .active {             background-color: #4CAF50;             color: white;          }          li {             border-bottom: 1px solid #555;             display: inline;          }       </style>    </head>    <body>       <ul>          <li><a href = "#home">Home</a></li>          <li><a href = "#company" class="active">Company</a></li>          <li><a href = "#product">Product</a></li>          <li><a href = "#services">Services</a></li>          <li><a href = "#contact">Contact</a></li>       </ul>    </body> </html>
  • 上一篇: 你能只用HTML制作一个网站,而不使用CSS吗?
    下一篇: 使用 CSS 将轮廓样式设置为山脊

    作者:admin @ 24资源网   2024-10-18

    本站所有软件、源码、文章均有网友提供,如有侵权联系308410122@qq.com

    与本文相关文章

    发表评论:

    ◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。