css 怎么做横向导航栏

CSS是一种样式语言，可以用来控制HTML文档的布局和外观。

在网站设计中，横向导航栏常常被用来帮助用户浏览或定位网站的不同部分。下面我们来看一下怎样用CSS实现横向导航栏。

    ul id="navigation">
          li>
    a href="#">
    首页/a>
    /li>
          li>
    a href="#">
    产品/a>
    /li>
          li>
    a href="#">
    新闻/a>
    /li>
          li>
    a href="#">
    关于我们/a>
    /li>
          li>
    a href="#">
    联系我们/a>
    /li>
        /ul>
    #navigation {
          list-style: none;
          background-color: #333;
          text-align: center;
          padding: 0;
          margin: 0;
    }
    #navigation li {
          display: inline-block;
          margin-right: 10px;
    }
    #navigation li:last-child {
          margin-right: 0;
    }
    #navigation li a {
          display: inline-block;
          color: #fff;
          padding: 10px;
          text-decoration: none;
    }
    #navigation li a:hover {
          background-color: #555;
    }
    

代码中，我们使用ul和li标签来创建导航栏条目，使用CSS来控制导航栏的样式。具体来说，我们使用list-style:none来清除默认的列表符号，使用background-color来设置背景颜色，使用text-align来将导航栏条目居中对齐，使用padding来设置导航栏条目的上下左右边距，使用display:inline-block来将导航栏条目水平排列，使用margin-right来设置导航栏条目之间的间距，使用:last-child选择器来设置最后一个导航栏条目的间距为0。

最后，我们使用a标签来添加导航栏条目的链接，使用color来设置链接颜色，使用padding来设置链接的内边距，使用text-decoration:none来取消链接的下划线效果。当用户鼠标悬停在某个导航栏条目上时，我们使用:hover选择器来添加背景颜色。

通过这些CSS样式，我们成功实现了一个简单的横向导航栏。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！