CSS 基础学习-189 创建水平导航实例

由 hrs, 3 三月, 2022

创建水平导航实例

实例代码：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      ul{
        list-style-type:none;


      }
      li{
        display:inline;
      }
      a{
        background-color:#cccccc;
        padding:10px;
        width:300px;
      }
      a:hover{
        background-color:green;
      }
    </style>

  </head>
  <body>
    <h1>水平导航实例</h1>
    <ul>
        <li><a href="https://www.dwoke.com">Home</a></li>
        <li><a href="https://www.dwoke.com" >News</a></li>
        <li><a href="https://www.dwoke.com">Contact</a></li>
        <li><a href="https://www.dwoke.com">About</a></li>
    </ul>
    <p>display: inline; 删除每个列表项之前和之后的换行符，才能显示在一行。</p>
    </body>
</html>

运行效果：

css-189.png

标签

评论