个人中心
gpt4 book ai didi

html - 将背景颜色扩展到包装之外

转载 作者：行者123 更新时间：2023-11-28 10:37:01 24 4
gpt4 key购买 nike

我正在尝试将我的 nav-wrapper div 的背景颜色或一般情况下我的导航区域的背景颜色扩展到 960px 容器之外。我尝试了一些技术，但似乎没有任何效果。请参阅随附的代码和 JSFiddle。

JSFidde:Header Background Color Extend

HTML:

 <!DOCTYPE html>
<html>
<head>
    <title>Responsive 3-Line Menu</title>
    <link rel="stylesheet" type="text/css" href="style.css">

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <link type="text/javascript" src="navicon.js">
    </head>
<body>
    <!-- Start Wrapper -->
    <div class="wrapper">
        <!-- Start Navigation Wrapper -->
        <nav class="nav-wrapper">
            <a href="#" id="logo"><img src="tappery.png"/></a>
        <!-- Start Navigation Links -->
            <ul id="nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        <!-- End Navigation Links -->
        </nav>
        <!-- End Navigation Wrapper -->

        <!-- Start Content -->
        <div id="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet ante orci, vitae auctor risus pharetra at. Quisque gravida a massa eget hendrerit. Nulla facilisi. Ut rutrum commodo faucibus. Aenean nec libero condimentum, vehicula nisi ut, ullamcorper felis. Ut non tempus odio. Donec vulputate blandit adipiscing. Ut condimentum feugiat lacus. Morbi eget mi pulvinar, imperdiet quam non, commodo ante. Proin vel urna in quam malesuada tincidunt. Suspendisse bibendum lacinia mi, et consectetur felis. Quisque a sem vel justo condimentum scelerisque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec molestie dapibus quam, nec pharetra nisl pretium in. Fusce blandit felis vitae eros tempor, in tempor neque malesuada. Duis in dignissim sem.</p>
        </div>
        <!-- End Content -->

    </div>
    <!-- End Wrapper -->

    <script type="text/javascript">$("#nav").addClass("js").before('<div id="menu">&#9776;</div>');
    $("#menu").click(function(){
        $("#nav").slideToggle();
    });
    $(window).resize(function(){
        if(window.innerWidth > 768) {
            $("#nav").removeAttr("style");
        }
    });</script>

</body>
</html>

CSS:

    html, body {
    overflow-x: hidden;
}

body {
    margin: 0;
    padding: 0;
    background-color: #cecece;
}

.wrapper {
            top:0;
            margin-top: 0;
            width: 960px;
            margin-right: auto;
            margin-left: auto;
            background-color: #fff;
            overflow: hidden;
        }



#logo {
    width: 200px;
}

#logo img {
    width: 150px;
    height: 40px;
}

#nav {
    width: 100%;
}

#content {
    margin-top: 50px;
}


    li {

    }

    li:last-child {
        border-right:none;
    }


    li a {
        display: block;
        width:100%;
        background:#fff;
        color: #3d6430;
        font-size:1.35em;
        text-decoration: none;
        margin-top: 5px;
    }


    @media screen and (max-width: 768px) {
        .wrapper {
            width: 100%;
            overflow: hidden;
        }


        #nav {
            clear: both;
        }

        #menu {
            width:1.4em;
            display: block;
            background:#fff;
            font-size:1.35em;
            text-align: center;

            float: right;
            top:0;

        }

        #logo {
            float: none;

        }

        #nav.js {
            display: none;
            padding: 0;
        }
        ul {
            width:100%;
            list-style:none;
            height: auto;
        }
        li {
            width:100%;
            border-right:none;
            border-top: 1px solid #3d6430; 
        }
    }

    @media screen and (min-width: 768px) {

        .nav-wrapper {
            background-color: #fff repeat-x;
            width: 100%; 
            overflow: hidden;
            position: fixed;
            z-index: 100;
        }

        #nav {
            clear: both;
        }

        #logo {
           float: left;
           display: inline;
        }

        ul {
        width:100%;
        background-color: #fff;
        height: 40px;
        padding: 0;
        display: inline;

    }

    li {
        padding: 0 20px;
        float: left;
        list-style-type: none;
    }
        #menu {
            display: none;
        }
    }

最佳答案

好的，这就是我的答案。它有点 hackish 但它应该可以工作......所以，你不能将它限制在包装器的范围内，因为它被限制为 960px。您需要在包装器之前声明一些内容。

我会做的是制作一个 1 像素宽的白色小图像，无论您的导航栏有多高。然后，在正文中设置背景颜色和图像:

body{
    background-image: url('white.jpg');
    background-color: #cecece;
    background-position: left top;
    background-repeat: repeat-x;
}

有缺点；您必须知道导航的确切高度，如果它发生变化，您还需要更改图像的大小。让我知道这是否有效——感谢您提供图片，它清楚了您想要的内容。

关于html - 将背景颜色扩展到包装之外，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23299500/

24 4 0
文章推荐： javascript - 隐藏选择菜单并使用按钮打开
文章推荐： ios - 滚动后重用单元​​格后如何维护表格 View 单元格中的值？
文章推荐： css - 在 scss 中更改 Material Design Lite 的主题颜色
文章推荐： ios - 有些 UIColors 是黑色的，而不是它们应该的样子，为什么？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com