css制作简易导航栏(html+css学习第5天)鼠标悬停变色

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
    <style type="text/css">  
        *{  
            padding: 0;  
            margin: 0;  
        }  
        ul{  
            list-style: none;  
        }  
        .box{  
            width: 1200px;  
            margin: 50px auto;  
            background-image: url(jianbian.jpg);  
            background-repeat: repeat-x;  
            font-size: 15px;  
            font-family: "微软雅黑";  
        }  
        .box ul{  
            overflow: hidden;  
        }  
        .box ul li{  
            float: left;  
            width: 150px;  
            line-height: 60px;  
            text-align: center;  
            font-size: 30px;  
              
        }  
  
        .box ul li a{  
            display: block;  
            color: white;  
            text-decoration: none;  
        }  
        .box ul li a:hover,.box ul li.current{  
            display: block;  
            text-decoration: none;  
            font-weight: bold;  
            background-image: url(orange.jpg);  
        }  
  
    </style>  
</head>  
<body>  
<div class="box">  
    <ul>  
        <li class="current"><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>  
        <li><a href="#">联系我们</a></li>  
    </ul>  
</div>  
</body>  
</html>  

猜你喜欢

转载自blog.csdn.net/weixin_41306215/article/details/105014739