CSS 基础学习-143 css使用float浮动和超链接制作水平菜单

由 hrs, 31 十月, 2021

使用float浮动和超链接制作水平菜单

实例代码；

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      div{
        background-color:#303030;
        width:800px;
      }   
      ul{ 
        list-style-type:none;
        margin:0;
        padding:0;
        overflow:hidden;
      }   
      li a{
      display:inline-block;
      padding:14px 16px;
      float:left;
      color:white;
      }   
      .a1{
        background-color:red;

      }   
      a:hover{
        background-color:black;
      }   
    </style>
  </head>
  <body>
    <h1>导航菜单实例</h1>
    <div>
      <ul>
        <li><a class="a1" 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>
    </div>  </body>
</html>

运行效果：

css-143.png

 

标签

评论