Question

-这是我在移动版本上获得的功能，对于桌面媒体查询来说一切正常，不确定为什么会这样。我已经尝试寻找可能会将.header向下填充但没有真正找到任何内容的任何元素。

供参考的网站：https://muchkler.github.io/Serenity/

HTML：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="main.css">
    <link href="https://fonts.googleapis.com/css?family=Karla:400,700" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,700" rel="stylesheet">
    <link rel="icon" href="apple-icon.png" />
    <title> Explore Our Home </title>
</head>

<body>



<div class="header">
<div class="navbar">    
<nav> 
    <ul>
        <li>Home</li>
        <li>Destinations</li>
        <li>Earth</li>
        <li>Memorial</li>
    </ul>
</nav>
</div>

<div class="container">
    <h2> Explore our beautiful<br>Earth.</h2>
    <p>Too focused on our phones, we often forget how beautiful Earth is. <br>Not everyone is equipped with the financials to travel. Explore Earth right here.</p>
    <h3> Explore now.</h3>
    <div class="explore"><a href="#firstpage"><img src="images/arrow.png" width="30px"></a></div>
</div>    
</div>   


<div class="firstpage" id="firstpage">
    <div class="firstelements">
        <h4>Yosemite</h4>
        <p class="yosemite">Not just a great valley, but a shrine to human foresight, the strength of granite, the power of glaciers, the persistence of life, and the tranquility of the High Sierra. First protected in 1864, Yosemite National Park is best known for its waterfalls, but within its nearly 1,200 square miles, you can find deep valleys, grand meadows, ancient giant sequoias, a vast wilderness area, and much more.</p>
        <div class="yosemitebtn"><a href="https://www.nps.gov/yose/index.htm">Learn more</a></div>
    </div>
</div>


</body>
</html>

CSS：

/* First page styling */

body{
    margin: 0;
}
.header{
    background: url(images/matt-sclarandis-159838-unsplash.png);
    background-size: cover;
    background-position: center;  
    background-repeat: no-repeat; 
    height: 100vh; 
    vertical-align: baseline; 
    font-family: 'Karla', sans-serif;
}

h1{
    color: white; 
    font-family: 'Raleway', sans-serif; 
    font-weight: 600; 
    text-align: center; 
    font-size: 20px;
}

.navbar li{
    display: inline-block; 
    padding: 10px;
    color: white; 
    font-family: 'Raleway', sans-serif; 
}

.navbar ul {
    text-align: center;
    padding: 0px; 

}

.container{
    margin: 0 auto;
    width: 50%;
    color: white; 
    text-align: center; 
    padding-top: 100px;
}

h2{
    font-family: 'Raleway', sans-serif;
}

h3{
    padding-top: 200px;
    line-height: 0px;
    font-weight: 100; 
    font-size: 15px;; 
    font-family: 'Raleway', sans-serif;
}

.explore{
    opacity: 0.65;
}

.explore:hover {
    opacity: 1; 
}

/* First page styling */

/* Second page styling */

.firstpage{
    background: url(images/aniket-deole-294646-unsplash1.jpg);
    background-size: cover;
    background-position: center;  
    background-repeat: no-repeat; 
    height: 100vh; 
    vertical-align: baseline; 
    font-family: 'Karla', sans-serif;

    }

.firstelements{
    margin: 0 auto;
    width: 50%;
    padding-top: 250px;
    text-align: center; 
}

h4{
    font-family: 'Raleway', sans-serif;
    color: white; 
    font-size: 50px;
    font-weight: 800;
}

.yosemite{
    color: white; 
    padding-bottom: 15px ;
}

a{
    text-decoration: none; 
    color: white; 
}

.yosemitebtn{
    text-decoration: none;
    background-color: #2dcb70;
    width: 100px;
    height: 24px;
    border-color: #2dcb70;
    border-radius: 10px;
    font-family: 'Raleway', sans-serif;
    font-size: 12px;
    padding-top: 10px;
    margin: 0 auto; 

}

/* Second page styling */

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

    h2{
        font-size: 50px;
        padding-top: 100px;

    }

    p{
        max-width: 350px;
        margin: 0 auto; 
    }

    h3{
        padding-top: 300px;
    }

    .navbar{
        float: right;
        padding-right: 250px;
        font-size: 14px;
    }

    h1{
        float: left; 
        font-size: 20px;
        padding-left: 250px;
    }

}

Answer 1

导航ul的边距是造成它的原因。

/* Simple fix. */
.navbar ul { margin: 0; }

或

display: inline-block;
width: 100%;

移动版页面顶部的随机填充

1 个答案: