0

所以基本上我刚开始在这里学习 HTML 和 CSSenter 图像描述，我认为我有足够的信心做一个小项目来尝试我所学到的东西，我在 xd 中创建了一个快速设计，我认为我将能够轻松编码. 然而，它并没有按计划进行......：D

所以基本上我有 2 个我无法处理的问题......而且我对自己认为 StackOverflow 是找到解决方案以及了解有关该主题的更多信息的最佳场所。

所以当我调整我的窗口大小时，按钮不会在中间。 这里

而且头球和英雄之间还有一条白线，我不知道如何摆脱。 这里

 body{
    overflow-x: hidden !important;
    margin: 0%;
 }
 header{
    height: 150px;
    width: 100%;
    background-color:#4B4D4D;
    background-repeat: no-repeat;
    background-size: cover;
 }

.hero{
    background-image: url(\Hero.png); 
    background-repeat: no-repeat;
    background-size: cover;
    height: auto;
    position: relative;
    margin: 0%;
    padding-bottom: 40px;
    border: 0px;
}

.hero h1{
    padding-top: 450px;
    color:#FFEB8A ;
    font-size: 70px;
    font-weight: 700;  
    text-align: center;
    width: auto;
}

.hero p{
    color: white;
    font-size: 35px;
    font-weight: 600;
    text-align: center;
}

.hero button{
    background-color:#4B4D4D ;
    color:#FFEB8A ;
    display: block;
    padding: 21px 50px;
    text-align: center;
    margin: auto;
    max-width: 300px;
    min-width: 50px;
    width: 100%;
    font-size: 30px;
    margin-top: 20px;
    margin-bottom: 20%;
}

.bounties{
    text-align: center;
    margin: auto;
    width:700px;
}

@media only screen and (max-width: 920px){
    h1{
    margin-top: 150px;
    }
}

@media only screen and (max-width: 920px){
    h1{
        font-size: 5em;
    }

    p{
        font-size: 1.4em;
    }
    .hero button{
        font-size: 1em;
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WoW Party</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="header">

    </header>
    <div class="hero">
        <h1>CSS QUEST</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing </p>
        <div class="bounties">
        <button type="button">BOUNTIES</button>
    </div>
    </div>

    <div class="heist">
         <!--Flex-->
        <h2>CSS GANG HEIST</h2>
        <p>Lorem ipsum dolor sit amet</p>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</p>
        <button type="button">TO QUEST</button>
    </div>
    
    <div class="last-section">

         <!--Circles-->
 <!--Add the images to the src and alt-->
        <img src="" alt="">
        <img src="" alt="">
        <img src="" alt="">
            
         <!--Exclamation marks-->
 <!--Add the images to the src and alt-->
        <img src="" alt="">
        <img src="" alt="">
        <img src="" alt="">

    </div>
       
</body>
</html>

4

1 回答 1

0

好的，我对您的代码进行了一些更改，它起作用了。（该按钮始终位于 Chrome 和 Safari 的中心 [已附加屏幕截图]）

还有一个教程您应该阅读有关 flex-box 设计的内容： https ://css-tricks.com/snippets/css/a-guide-to-flexbox/

我为了摆脱空白所做的更改：

代码更改

样式.css

   body {
    overflow-x: hidden !important;
    margin: 0%;
    /* Added these two lines */
    display: flex;
    flex-direction: column;
   }

@media only screen and (max-width: 920px) {
    h1 {
        /* Commented Out this line  */
        /* margin-top: 150px; */
    }

}

最终代码：

body {
    overflow-x: hidden !important;
    margin: 0%;
    /* Added these two lines */
    display: flex;
    flex-direction: column;
}

.header {
    height: 150px;
    width: 100%;
    background-color: #4B4D4D;
    background-repeat: no-repeat;
    background-size: cover;


}


.hero {
    background-image: url(\Hero.png);
    background-color: coral;
    background-repeat: no-repeat;
    background-size: cover;
    height: auto;
    position: relative;

    margin: 0%;
    padding-bottom: 40px;
    border: 0px;
}

.hero h1 {
    padding-top: 450px;
    color: #FFEB8A;
    font-size: 70px;
    font-weight: 700;
    text-align: center;
    width: auto;
}

.hero p {
    color: white;
    font-size: 35px;
    font-weight: 600;
    text-align: center;



}

.hero button {
    background-color: #4B4D4D;
    color: #FFEB8A;
    display: block;
    padding: 21px 50px;
    text-align: center;
    margin: auto;
    max-width: 300px;
    min-width: 50px;
    width: 100%;
    font-size: 30px;
    margin-top: 20px;
    margin-bottom: 20%;


}

.bounties {
    text-align: center;
    margin: auto;
    width: 700px;
}

@media only screen and (max-width: 920px) {
    h1 {
        /* Commented Out this line  */
        /* margin-top: 150px; */
    }

}

@media only screen and (max-width: 920px) {
    h1 {
        font-size: 5em;

    }

    p {
        font-size: 1.4em;

    }

    .hero button {
        font-size: 1em;


    }

}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WoW Party</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="header">

    </div>
    <div class="hero">
        <h1>CSS QUEST</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing </p>
        <div class="bounties">
            <button type="button">BOUNTIES</button>
        </div>
    </div>

    <div class="heist">
        <!--Flex-->
        <h2>CSS GANG HEIST</h2>
        <p>Lorem ipsum dolor sit amet</p>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
            dolore magna</p>
        <button type="button">TO QUEST</button>
    </div>


    <div class="last-section">

        <!--Circles-->
        <!--Add the images to the src and alt-->
        <img src="" alt="">
        <img src="" alt="">
        <img src="" alt="">

        <!--Exclamation marks-->
        <!--Add the images to the src and alt-->
        <img src="" alt="">
        <img src="" alt="">
        <img src="" alt="">

    </div>

</body>

</html>

按钮截图

iPhone SE 上的响应式设计

iPad Pro 上的响应式设计

于 2021-01-07T09:46:28.127 回答