Question

我试图学习响应CSS，但在设计上遇到了一些基本的css。我已经创建了一个固定的导航栏，您可以在下面的代码中看到。但我面临的问题是，我无法正确对齐其下方的内容。内容与导航栏重叠。你能建议一个合适的CSS修正，而不是像添加固定高度的空div那样的解决方法吗？这是代码：

＆＃13;

  *{
        box-sizing: border-box;
    }
    
    body{
        margin:0px;
        padding: 0px;
        background-color: darkgrey;
    }
    
    .title-bar{
        position:fixed;
        margin-top:0px;
        z-index: 100;
        opacity: 1;
        background-color:white;
        width: 100%;
        height: 100px;
        border-bottom: solid 4px dodgerblue;
    }
    
    .page-container{
        padding: 0px;
    }
    
    .menu-options{
        list-style-type:none;
    }
    
    .menu-options li{
        display: inline;
        padding: 10px;
    }
    
    .menu-options li:hover{
        background-color: deepskyblue;
    }
    
    .menu-options li a{
        color: black;
        text-decoration:none;
    }
    
    .clear20{
        height: 40px;
        clear: both;
    }
    
    .clear10{
        height: 20px;
        clear: both;
    }
    
    .display-bar-1{
        background-color: deepskyblue;
        height: 200px;
        padding:40px;
        position: relative;
    }
    
    html {
        font-family: "Lucida Sans", sans-serif;
    }
    
    .caps {
        text-transform: uppercase;
    }
    
    .register_button{
        text-align:center;
        padding-top:20px;
        padding-bottom:10px;
        width: 200px;
        height: 70px;
        border: solid 3px white;
        font-style:bold;
        font-size:14pt;
    
    }
    
    .register_button:hover{
        background-color:navajowhite;
        color: white;
        cursor:pointer;
        border-color: black;
    }

＆＃13;

<!DOCTYPE html>
    <html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <link href="responsive.css" rel="stylesheet">
    </head>
    
    <body>
        <div class="page-container">
    
            <div class="title-bar">
                <table width="100%">
                    <tr>
                        <td><h1> Multirater Surveys </h1></td>
                        <td>
                            <ul class="menu-options">
                                <li> <a href="#"> Home </a></li>
                                <li> <a href="#"> How It Works </a></li>
                                <li> <a href="#"> Features </a></li>
                                <li> <a href="#"> Surveys </a></li>
                                <li> <a href="#"> Plans and Pricings </a></li>
                                <li> <a href="#"> Webinars </a></li>
                                <li> <a href="#"> Blog </a></li>
                            </ul>
                        </td>
                    </tr>
                </table>
            </div>
    
    
            <div class="display-bar-1">
                <div class="row">
                    <div class="" style="width:60%;float:left;font-style:bold;font-size:22pt;color:white;padding:10px;">
                        World Class Service <br>
                        More Than 100 Clients
                    </div>
                    <div class="" style="padding:15px;float:left;width:40%;">
                        <div class="register_button" id="register"> <a style="text-decoration:none;color:black;" href="#"> Register Now </a> </div>
                    </div>
                </div>
            </div>
    
            <div class="display-bar-2">
                <div>
                    <h1> Some random block of texts </h1>
                    <p> Hello world how are you ? what is going on? </p>
                </div>
            </div>
    
            <div class="display-bar-1">
                <div class="row">
                    <div class="" style="width:60%;float:left;font-style:bold;font-size:22pt;color:white;padding:10px;">
                        World Class Service <br>
                        More Than 100 Clients
                    </div>
                    <div class="" style="padding:15px;float:left;width:40%;">
                        <div class="register_button" id="register"> <a style="text-decoration:none;color:black;" href="#"> Register Now </a> </div>
                    </div>
                </div>
            </div>
    
            <div class="display-bar-2">
                <div>
                    <h1> Some random block of texts </h1>
                    <p> Hello world how are you ? what is going on? </p>
                </div>
            </div>
    
            <div class="display-bar-1">
                <div class="row">
                    <div class="" style="width:60%;float:left;font-style:bold;font-size:22pt;color:white;padding:10px;">
                        World Class Service <br>
                        More Than 100 Clients
                    </div>
                    <div class="" style="padding:15px;float:left;width:40%;">
                        <div class="register_button" id="register"> <a style="text-decoration:none;color:black;" href="#"> Register Now </a> </div>
                    </div>
                </div>
            </div>
    
            <div class="display-bar-2">
                <div>
                    <h1> Some random block of texts </h1>
                    <p> Hello world how are you ? what is going on? </p>
                </div>
            </div>
    
            <div class="display-bar-2">
                <div>
                    <h1> Some random block of texts </h1>
                    <p> Hello world how are you ? what is going on? </p>
                </div>
            </div>
        </div>
    
        <input type="text" class="caps"/>
    
        <script>
        window.onload = function(){
            document.getElementById("register").onclick = function(){
                window.location = "https://www.google.com";
            }
        }
        </script>
    </body>
    
    </html>

`responsive.html`

＆＃13;

Answer 1

我对 responsive.css 文件进行了一些更改，这对我来说很有用。

以下是我所做的更改：

标题栏类

中的

.title-bar{
    position:fixed;
    top: 0;
    z-index: 100;
    opacity: 1;
    background-color:white;
    width: 100%;
    height: 100px;
    border-bottom: solid 4px dodgerblue;
}

我将margin-top:0px;更改为top: 0;

为什么？要将固定定位导航栏的上边缘设置为最近定位祖先的上边缘下方的0，告诉here

并在 display-bar-1

中

.display-bar-1{
    background-color: deepskyblue;
    height: 200px;
    margin-top: 100px;
    padding:40px;
    position: relative;
}

我添加了margin-top: 100px;

为什么？您的导航栏高度为100px。所以我给你的display-bar-1课程提供了100px的保证金。

希望这可以解决您的问题。

Answer 2

您的navbar高度为100px。所以你需要从下面的div 100px开始。在div this：

之后添加到第一个navbar

style="top:100px;"

然后它应该工作。它看起来像这样：

    <div class="display-bar-1" style="top:100px;">
        <div class="row">
            <div class="" style="width:60%;float:left;font-style:bold;font-size:22pt;color:white;padding:10px;">
                World Class Service <br>
                More Than 100 Clients
            </div>
            <div class="" style="padding:15px;float:left;width:40%;">
                <div class="register_button" id="register"> <a style="text-decoration:none;color:black;" href="#"> Register Now </a> </div>
            </div>
        </div>
    </div>

其他方法是为css之后的第一个div创建一个自己的navbar课程。然后你也可以使用

padding-top:100px;

或

margin-top:100px;

＆＃13;

					*{
    box-sizing: border-box;
}

body{
    margin:0px;
    padding: 0px;
    background-color: darkgrey;
}

.title-bar{
    position:fixed;
    margin-top:0px;
    z-index: 100;
    opacity: 1;
    background-color:white;
    width: 100%;
    height: 100px;
    border-bottom: solid 4px dodgerblue;
}

.page-container{
    padding: 0px;
}

.menu-options{
    list-style-type:none;
}

.menu-options li{
    display: inline;
    padding: 10px;
}

.menu-options li:hover{
    background-color: deepskyblue;
}

.menu-options li a{
    color: black;
    text-decoration:none;
}

.clear20{
    height: 40px;
    clear: both;
}

.clear10{
    height: 20px;
    clear: both;
}

.display-bar-1{
    background-color: deepskyblue;
    height: 200px;
    padding:40px;
    position: relative;
}

html {
    font-family: "Lucida Sans", sans-serif;
}

.caps {
    text-transform: uppercase;
}

.register_button{
    text-align:center;
    padding-top:20px;
    padding-bottom:10px;
    width: 200px;
    height: 70px;
    border: solid 3px white;
    font-style:bold;
    font-size:14pt;

}

.register_button:hover{
    background-color:navajowhite;
    color: white;
    cursor:pointer;
    border-color: black;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link href="responsive.css" rel="stylesheet">
</head>

<body>
    <div class="page-container">

        <div class="title-bar">
            <table width="100%">
                <tr>
                    <td><h1> Multirater Surveys </h1></td>
                    <td>
                        <ul class="menu-options">
                            <li> <a href="#"> Home </a></li>
                            <li> <a href="#"> How It Works </a></li>
                            <li> <a href="#"> Features </a></li>
                            <li> <a href="#"> Surveys </a></li>
                            <li> <a href="#"> Plans and Pricings </a></li>
                            <li> <a href="#"> Webinars </a></li>
                            <li> <a href="#"> Blog </a></li>
                        </ul>
                    </td>
                </tr>
            </table>
        </div>


        <div class="display-bar-1" style="top:100px;">
            <div class="row">
                <div class="" style="width:60%;float:left;font-style:bold;font-size:22pt;color:white;padding:10px;">
                    World Class Service <br>
                    More Than 100 Clients
                </div>
                <div class="" style="padding:15px;float:left;width:40%;">
                    <div class="register_button" id="register"> <a style="text-decoration:none;color:black;" href="#"> Register Now </a> </div>
                </div>
            </div>
        </div>

        <div class="display-bar-2">
            <div>
                <h1> Some random block of texts </h1>
                <p> Hello world how are you ? what is going on? </p>
            </div>
        </div>

        <div class="display-bar-1">
            <div class="row">
                <div class="" style="width:60%;float:left;font-style:bold;font-size:22pt;color:white;padding:10px;">
                    World Class Service <br>
                    More Than 100 Clients
                </div>
                <div class="" style="padding:15px;float:left;width:40%;">
                    <div class="register_button" id="register"> <a style="text-decoration:none;color:black;" href="#"> Register Now </a> </div>
                </div>
            </div>
        </div>

        <div class="display-bar-2">
            <div>
                <h1> Some random block of texts </h1>
                <p> Hello world how are you ? what is going on? </p>
            </div>
        </div>

        <div class="display-bar-1">
            <div class="row">
                <div class="" style="width:60%;float:left;font-style:bold;font-size:22pt;color:white;padding:10px;">
                    World Class Service <br>
                    More Than 100 Clients
                </div>
                <div class="" style="padding:15px;float:left;width:40%;">
                    <div class="register_button" id="register"> <a style="text-decoration:none;color:black;" href="#"> Register Now </a> </div>
                </div>
            </div>
        </div>

        <div class="display-bar-2">
            <div>
                <h1> Some random block of texts </h1>
                <p> Hello world how are you ? what is going on? </p>
            </div>
        </div>

        <div class="display-bar-2">
            <div>
                <h1> Some random block of texts </h1>
                <p> Hello world how are you ? what is going on? </p>
            </div>
        </div>
    </div>

    <input type="text" class="caps"/>

    <script>
    window.onload = function(){
        document.getElementById("register").onclick = function(){
            window.location = "https://www.google.com";
        }
    }
    </script>
</body>

</html>

＆＃13;

Answer 3

适当的方法是在div中添加padding-top，与固定标题的高度相同的填充。

CSS - 在固定Navbar下面对齐内容

3 个答案: