0512导航栏

最新推荐文章于 2024-06-13 09:45:33 发布

F.只想做咸鱼

最新推荐文章于 2024-06-13 09:45:33 发布

阅读量75

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/m0_67902815/article/details/124732177

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航栏</title>
    <style>
        /* 通配符选择器  -清除元素默认内外边距样式 */
        *{
            margin:0;
            padding: 0;
        }
        /* 标签选择器 */
        /* 16~21删除导航栏文字前的圆点 .清除列表样式 前面的小点点*/
        li{
            list-style: none;
        }
        .a{
            text-decoration: none;
        }
        .box{
            width: 760px;
            height: 700px;
            background-color: skyblue;
            margin:0 auto;
        }
        /* 背景图 */
        .banner{
            width: 700px;
            height: 150px;
        }
        .nav{
            background: url(images/nav_bg.jpg) repeat-x;  /* 背景图平铺 */
             height: 32px;
        }
        .nav ul>li{
            float: left;
        }
        .nav a{
            /* 修改显示方式，变成块级元素，可以设置高度和宽度 */
            display: block;
            width: 80px;
            /* 单行文本垂直居中 */
            line-height: 32px;
            text-align: center; 

            height: 32px;
            background: url(images/button1.jpg) no-repeat; 
            font-size: 12px;
            color:#43530c;
            
        }

        .nav a:hover {
            background: url(images/button2.jpg) no-repeat;
        }       

    </style>
</head>
<body>
    <div class="box">
        <div class="banner">
            <img src="images/banner.jpg" alt="">
        </div>
        <div class="nav">
            <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>

F.只想做咸鱼

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
0512导航栏

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>导航.
复制链接

扫一扫