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

最新推荐文章于 2024-01-08 19:03:40 发布

Ankry果冻

最新推荐文章于 2024-01-08 19:03:40 发布

阅读量2.1k

点赞数

分类专栏： html+css 文章标签： css css3

本文链接：https://blog.csdn.net/weixin_41306215/article/details/105014739

版权

html+css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!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>

Ankry果冻

关注

0
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
css制作简易导航栏（html+css学习第5天）鼠标悬停变色

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ ...
复制链接

扫一扫