CSS 基础教程-101 CSS制作水平菜单导航条

由 hrs, 16 三月, 2020

实例代码：

<!DOCTYPE HTML>
<html>
  <head>
  <meta charset="utf-8">
    <style type="text/css">
      ul{
        float:left;
        list-style-type:none;
        width:100%;
        padding:0;
        margin:0;
      }
    a{
    float:left;  /*设置链接左浮动*/
    width:100px;
    text-decoration:none; /*取消链接下划线 */
    color:white;
    background-color:purple;  /* 设置链接的背景颜色*/
    padding:0.2em 0.6em;  /* 设置链接的内边距*/
    border-right:1px solid white;/* 设置链接的边框颜色*/

    }
   a:hover{
    background-color:red;/* 当鼠标移动到链接的时候变为红色*/
    }
    li{
    display:inline; /* 设置li为内联元素*/
  }


    </style>
  </head>
  <body>
    <h3>制作水平菜单</h3>
    <ul>
      <li><a href="#">Link one</a></li>
      <li><a href="#">Link two</a></li>
      <li><a href="#">Link three</a></li>
      <li><a href="#">Link frou</a></li>
      <li><a href="#">Link five</a></li>

    </ul>
  <body>
</html>

运行效果：

css_101.png

标签

评论