Question

今天，我一直在玩一些临时css和HTML。但有一件事让我感到不安，而且我无法在网站上滚动，它只是让我失望。我会为你提供一个html和css。

<html>
<head>
    <title>Website</title>
    <link rel="stylesheet" href="css/mystyle.css">
    <html lang ="en"></html>      
                </head>

        <body>
    <!-- NAVBAR -->
<div class="navbar">
<div class="navbarposition">
    <div class="lists">
        <a href="#" class="listo">Home<span></span></a>
        <a href="#" class="listo">Contact<span></span></a>
        <a href="#" class="listo">About<span></span></a>
        <a href="#" class="listo">Blog<span></span></a>
            </div>
                </div>            
                    </div>
<div class="banner"> 
    <h1 class="headingbanner">Web Development</h1>
    <a href=# class="btn">Read More</a>
                        </div>
    <div class="offerings">
        <h3 class="secondheader">My Services</h3>
        <div class="jobnumber1">
            <img class="cloudphoto" src="http://www.iconsdb.com/icons/preview/orange/cloud-3-xxl.pngf">
            <h3 class="thirdheader">Web Development</h3>
            <p class="pjob">I'm Fully able to build you a website that is going to handle the traffic.<br>Price: 300 USD <br></p>
                    </div>
                        </div>
     <div class="randomquote">
                          </div>      






                          </body>

然后就是css

@import url('https://fonts.googleapis.com/css?family=Encode+Sans');

body{
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    overflow: scroll;
}

.navbar{
    background: #22264b;
    height: 80px;
    margin-top: -20px;
    padding: 20px 10 10 20;


}

.navbarposition{
    text-align: right;
    margin: 20px;
    margin-top: 20px;
}



.listo{
    color: #e6cf8b;
    text-decoration: none;
    font-size: 25px;
    margin: 20px;
    font-family: 'Encode Sans', sans-serif;
}

.lists{
    padding: 20px;
}

.listo:hover{
   color: crimson;

}

.img-container{
    text-align: center;
}

.banner{
    text-align: center;
}

.content{
    text-align: center;
}



.banner{
    margin-top: -20px;
    width: 100%;
    height: 500px;
    position: fixed;
    top: 100px;
    background: url(https://i.stack.imgur.com/21f6K.jpg);
    background-position: fixed;
    background-size: cover;

}


.headingbanner{
    color: white;
    font-size: 120px;
    margin-top: 140px;
    font-family: 'Encode Sans', sans-serif;
    opacity: 1;
    z-index: 10;
}

.btn{
    border: 2px solid white;
    color: white;
    padding: 12px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    cursor: pointer;
    font-size: 25px;
    font-family: 'Encode Sans', sans-serif;
    border-radius: 5px;
    opacity: 1;
     z-index: 10;

}

.btn:hover{
    background: white;
    color:black;
}

.offerings{
    margin-top: -20px;
    width: 100%;
    height: 400px;
    position: fixed;
    top: 600px;
    background:#22264b; 
    background-position: fixed;
    background-size: cover;
    align-content: center;
}

.secondheader{
    text-align: center;
    font-size: 45px;
    color:white;
    font-family: 'Encode Sans', sans-serif;
}

.cloudphoto{
    display: block;
    margin: auto;
    height: 120px;
}

.jobnumber1{
    align-content: center;

}

.thirdheader{
    font-family: 'Encode Sans', sans-serif;
    color:white;
    font-size: 25px;
    text-align: center;
}

.pjob{
    font-family: 'Encode Sans', sans-serif;
    color:darkgoldenrod;
    text-align: center;
    font-size: 15px; 
}


.randomquote{
    margin-top: -20px;
    width: 100%;
    height: 200px;
    top: 1000px;
    position:fixed;
    background:url(https://i.stack.imgur.com/S4bDF.jpg); 
    background-position: fixed;
    background-size: cover;
    align-content: center;
}

如果有人能够仔细查看代码并帮助我找到调试方法，我真的很感激。

Answer 1

这是因为您在每个包装器上使用fixed位置。

有关职位的信息，https://www.w3schools.com/css/css_positioning.asp

您可以删除您最终使用您希望的结果的位置和边距。

您只需要更改CSS，

@import url('https://fonts.googleapis.com/css?family=Encode+Sans');

body{
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    overflow: scroll;
}

h1, h2, h3, h4, h5{
    -webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
    -webkit-margin-start: 0em;
    -webkit-margin-end: 0em;
}

.navbar{
    background: #22264b;
    height: 80px;
    margin-top: -20px;
    padding: 20px 10 10 20;
}

.navbarposition{
    text-align: right;
    margin: 20px;
    margin-top: 20px;
}

.listo{
    color: #e6cf8b;
    text-decoration: none;
    font-size: 25px;
    margin: 20px;
    font-family: 'Encode Sans', sans-serif;
}

.lists{
    padding: 20px;
}

.listo:hover{
   color: crimson;

}

.img-container{
    text-align: center;
}

.banner{
    text-align: center;
}

.content{
    text-align: center;
}


.banner{
    margin-top: -20px;
    width: 100%;
    height: 500px;
    top: 100px;
    background: url(https://i.stack.imgur.com/21f6K.jpg);
    background-position: fixed;
    background-size: cover;
}


.headingbanner{
    color: white;
    font-size: 120px;
    font-family: 'Encode Sans', sans-serif;
    opacity: 1;
    z-index: 10;
}

.btn{
    border: 2px solid white;
    color: white;
    padding: 12px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    cursor: pointer;
    font-size: 25px;
    font-family: 'Encode Sans', sans-serif;
    border-radius: 5px;
    opacity: 1;
     z-index: 10;
}

.btn:hover{
    background: white;
    color:black;
}

.offerings{
    margin-top: -20px;
    width: 100%;
    height: 400px;
    top: 600px;
    background:#22264b; 
    background-position: fixed;
    background-size: cover;
    align-content: center;
}

.secondheader{
    text-align: center;
    font-size: 45px;
    color:white;
    font-family: 'Encode Sans', sans-serif;
}

.cloudphoto{
    display: block;
    margin: auto;
    height: 120px;
}

.jobnumber1{
    align-content: center;

}

.thirdheader{
    font-family: 'Encode Sans', sans-serif;
    color:white;
    font-size: 25px;
    text-align: center;
}

.pjob{
    font-family: 'Encode Sans', sans-serif;
    color:darkgoldenrod;
    text-align: center;
    font-size: 15px; 
}


.randomquote{
    margin-top: -20px;
    width: 100%;
    height: 200px;
    top: 1000px;
    background:url(https://i.stack.imgur.com/S4bDF.jpg); 
    background-position: fixed;
    background-size: cover;
    align-content: center;
}

无法在网站上滚动

1 个答案: