HTML—鼠标悬停导航栏变颜色

本文介绍: 使用两种方法，实现鼠标滑过导航栏变换颜色方法一：将标签强制转换标签类型为块元素，然后设置：hover 样式(鼠标滑过样式)方法二：给

css样式：
<head>   
  <style>
        /* 清除自带间距 */
        *{
            padding: 0;
            margin: 0;
        }
       /* 清除列表自带列表符号 */
        ul{
            list-style: none;
        }
        li{
            float: left;
            background-color: black;
        }
        a{
            padding: 0 20px;
            height: 50px;
            line-height: 50px;
            /* 强制转换a标签为块元素 */
            display: block;
            color: white;
            text-decoration: none;   
        }
        a:hover{
            background-color: pink;
        }
    </style>
</head>

html内容：
<body>
    <ul>
        <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>
        <li><a href="">课堂</a></li>
        <li><a href="">好程序员</a></li>
    </ul>
</body>

（跳转链接内容没有写，只是个小练习，简单实现效果）

实现效果：

 <style>
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        li{
            float: left;
            padding: 0 20px;
            background-color: black;
            height: 50px;
            line-height: 50px;
            padding: 0 20px;
            height: 50px;
            line-height: 50px;
        }
        a{
            color: white;
            text-decoration: none;
        }
        li:hover{
            background-color: pink;
        }
    </style>

（这个做法需要把
height: line–height: padding: 等属性加给<li>标签）

<body>
    <ul>
        <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>
        <li><a href="">课堂</a></li>
        <li><a href="">好程序员</a></li>
    </ul>
</body>