水平导航

最新推荐文章于 2024-09-26 19:17:56 发布

宝拉不想努力了

最新推荐文章于 2024-09-26 19:17:56 发布

阅读量821

点赞数

分类专栏： html css

本文链接：https://blog.csdn.net/weixin_41056807/article/details/81333985

版权

css 同时被 2 个专栏收录

25 篇文章 1 订阅

订阅专栏

html

14 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .nav{
            height: 60px;
            /*background: #000;*/
            margin-top: 10px;
        }
        .nav-con{
            width: 800px;
            height: 60px;
            /*background: #000;*/
        }
        ul{
            list-style: none;
            /*height: 60px;*/
            text-align: center;
            font-size: 14px;
        }
        ul li{
            float: left;
            width: 60px;
            padding:10px;
            background: #ff9137;
        }
        ul li a{
            text-decoration: none ;
            display: inline-block;
            width: 60px;
            height: 60px;
            line-height: 60px;
            color: #2e2e2e;
            /*background: #BC7A00;*/
        }
        ul li a:hover{
            color: #2e6da4;
            /*background: #eee;*/
        }
    </style>
</head>
<body>
    <script type="application/javascript"></script>
    <div class="nav">
        <div class="nav-con">
            <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>
            </ul>
        </div>
    </div>
</body>
</html>

鼠标滑过