Question

我目前正在努力应对保证金崩溃的问题。我确实使用position: relative和top:-20px获得了解决方法（您可以在横幅下的代码中看到main-nav我评论了它）我只是想知道是否有更好的方法解决这个问题？

此外，我的解决方案解决方案在我的标题和第一段之间创建了一个间隙，整个网站周围显然仍然有一个可见的填充。我怎么能解决这个问题？

您可以在CodePen

看到实时版本

还有一种方法可以让导航栏粘贴并扩展动画，就像我在旧的WordPress网站上一样：Wordpress website或者您需要JavaScript吗？

html代码：

<html>
    <link rel="stylesheet" href="Style.css">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" contect ="ie=edge">
<title>Severe Gaming</title>
</head>
<body>
 <div class="wrapper">
 <!-- Navigation --> 
    <nav class="main-nav">
        <ul >
            <li><a href="#">Home</a></li>
            <li><a href="#">Teams</a></li>
            <li><a href="#">Achievements</a></li>
            <li><a href="#">Media</a></li>
            <li><a href="#">Sponsors</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
    <header class="banner">
    </header>
    <!-- Top Container -->
    <section class="container">
       <header class="box paragraph1">
           <h1>Welcome to Severe Gaming</h1>
           <p>Severe Gaming is a Multi-Gaming Organisation founded in 2010. Over the years it has served as a platform for players to compete in many different games at a highly competitive level as well as serving as a home for players to improve their skills and build strong relationships with one another. Severe Gaming sees the potential in the South African eSports scene and aims to develop and grow with it as the future unfolds.</p>
       </header>
       <div class ="picture1">
       </div>
       <div class ="picture2">
       </div>
         <header class="box paragraph2">
           <h1>Welcome to Severe Gaming</h1>
           <p>Severe Gaming is a Multi-Gaming Organisation founded in 2010. Over the years it has served as a platform for players to compete in many different games at a highly competitive level as well as serving as a home for players to improve their skills and build strong relationships with one another. Severe Gaming sees the potential in the South African eSports scene and aims to develop and grow with it as the future unfolds.</p>
       </header>
    </section>
   <div class="footer">
   </div>
 </div> 
 <!-- Wrapper Ends -->
</body>
</html>

CSS代码：

    /* CSS Variables */
:root {
    --primary: #FFFFFF;
}

html {
    box-sizing: border-box;
    font-family: Roboto, Helvetica, Arial, sans-serif;
    color: var(--primary);
}

body {
    background: #0b0e17;
  /*  margin: 30px 50px; */
    line-height: 1.4;
}

img {
    max-width: 100%;
}

.wrapper {
    display: grid;
    grid-gap: 0px;
}
.banner {
    /*position:relative;
    top:-40px;*/
    background: url(https://image.ibb.co/earz6x/header.png);
    height:392px;
}

/* Navigation */
.main-nav ul{
    /* position:relative;
    top:-20px; */
    display: grid;
    grid-column-gap:20px;
    padding:0px;
    list-style: none;
    grid-template-columns: repeat(7, 1fr);
    background: url("https://image.ibb.co/jd1ozH/Nav_bar.png");
    height:90px; 
}

.main-nav a{
    display:block;
    text-decoration: none;
    padding: 2rem;
    text-transform: uppercase;
    text-align: center;
    color: var(--primary);
    font-weight: 600;
}

.container {
    display: grid;
    grid-template-areas: 
        'paragraph1 picture1'
        'picture2 paragraph2' ;
}

.paragraph1 {
    min-height: 200px;
    grid-area: paragraph1;
    justify-content: center;
    align-items: start;

}
.box {
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
}

.box h1{
  border-bottom: 3px solid; 
  padding-bottom: 0px;
  line-height: 1.75em;
}

.picture1 {
    grid-area: picture1;
    background: url(https://image.ibb.co/ddNWKH/mockup.png);
    background-size:cover;
    background-position: center;   
}

.picture2 {
    grid-area: picture2;
    background: url(https://image.ibb.co/ddNWKH/mockup.png);
    background-size:cover;
    background-position: center;  
}

.paragraph2 {
    grid-area: paragraph2;
    justify-content: center;
    align-items: start;    
}

.footer{
    background: url(https://preview.ibb.co/f5fqDc/footer.png);
    background-size: cover;
    background-position: center;
    height: 40px;
}

Answer 1

HTML为页面添加默认边距。要删除它，请将其放在css文件中。

* {
  margin: 0;
}

Answer 2

您需要在ul

中添加float:right和

/* CSS Variables */
:root {
    --primary: #FFFFFF;
}

html {
    box-sizing: border-box;
    font-family: Roboto, Helvetica, Arial, sans-serif;
    color: var(--primary);
}

body {
    background: #0b0e17;
  /*  margin: 30px 50px; */
    line-height: 1.4;
}

img {
    max-width: 100%;
}

.wrapper {
    display: grid;
    grid-gap: 0px;
}
.banner {
    /*position:relative;
    top:-40px;*/
    background: url(https://image.ibb.co/earz6x/header.png);
    height:392px;
}

/* Navigation */
.main-nav ul{
    /* position:relative;
    top:-20px; */
    display: flex;
  float:right;
    grid-column-gap:20px;
    padding:0px;
    list-style: none;
    grid-template-columns: repeat(7, 1fr);
    background: url("https://image.ibb.co/jd1ozH/Nav_bar.png");
    height:90px; 
}

.main-nav a{
    display:block;
    text-decoration: none;
    padding: 2rem;
    text-transform: uppercase;
    text-align: center;
    color: var(--primary);
    font-weight: 600;
}

.container {
    display: grid;
    grid-template-areas: 
        'paragraph1 picture1'
        'picture2 paragraph2' ;
}

.paragraph1 {
    min-height: 200px;
    grid-area: paragraph1;
    justify-content: center;
    align-items: start;
    
}
.box {
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
}

.box h1{
  border-bottom: 3px solid;	
  padding-bottom: 0px;
  line-height: 1.75em;
}

.picture1 {
    grid-area: picture1;
    background: url(https://image.ibb.co/ddNWKH/mockup.png);
    background-size:cover;
    background-position: center;   
}

.picture2 {
    grid-area: picture2;
    background: url(https://image.ibb.co/ddNWKH/mockup.png);
    background-size:cover;
    background-position: center;  
}

.paragraph2 {
    grid-area: paragraph2;
    justify-content: center;
    align-items: start;    
}

.footer{
    background: url(https://preview.ibb.co/f5fqDc/footer.png);
    background-size: cover;
    background-position: center;
    height: 40px;
}

<html>
    <link rel="stylesheet" href="Style.css">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" contect ="ie=edge">
<title>Severe Gaming</title>
</head>
<body>
 <div class="wrapper">
 <!-- Navigation --> 
    <nav class="main-nav">
        <ul >
            <li><a href="#">Home</a></li>
            <li><a href="#">Teams</a></li>
            <li><a href="#">Achievements</a></li>
            <li><a href="#">Media</a></li>
            <li><a href="#">Sponsors</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
    <header class="banner">
    </header>
    <!-- Top Container -->
    <section class="container">
       <header class="box paragraph1">
           <h1>Welcome to Severe Gaming</h1>
           <p>Severe Gaming is a Multi-Gaming Organisation founded in 2010. Over the years it has served as a platform for players to compete in many different games at a highly competitive level as well as serving as a home for players to improve their skills and build strong relationships with one another. Severe Gaming sees the potential in the South African eSports scene and aims to develop and grow with it as the future unfolds.</p>
       </header>
       <div class ="picture1">
       </div>
       <div class ="picture2">
       </div>
         <header class="box paragraph2">
           <h1>Welcome to Severe Gaming</h1>
           <p>Severe Gaming is a Multi-Gaming Organisation founded in 2010. Over the years it has served as a platform for players to compete in many different games at a highly competitive level as well as serving as a home for players to improve their skills and build strong relationships with one another. Severe Gaming sees the potential in the South African eSports scene and aims to develop and grow with it as the future unfolds.</p>
       </header>
    </section>
   <div class="footer">
   </div>
 </div> 
 <!-- Wrapper Ends -->
</body>
</html>

{{1}}

Answer 3

要在滚动时停止导航，您需要添加位置：固定，宽度：100％。确保在您的横幅上添加一个margin-top，因此它不会被您的导航覆盖。

.banner {
    background: url(https://image.ibb.co/earz6x/header.png);
    height:392px;
    margin-top: 90px;
}

/* Navigation */
.main-nav ul{
    display: grid;
    grid-column-gap:20px;
    padding:0px;
    list-style: none;
    grid-template-columns: repeat(7, 1fr);
    background: url("https://image.ibb.co/jd1ozH/Nav_bar.png");
    height:90px; 
    position: fixed;
    width: 100%;
}

我不确定动画。目前，您的网页上似乎没有。但是，是的，需要js。这是一个可以帮助您的网站：https://vincentgarreau.com/particles.js/

在您的网站上，横幅位于页面中央，背景为黑色。如果你想要，那你的css应该是：

.banner {
    /*position:relative;
    top:-40px;*/
    background-image: url(https://image.ibb.co/earz6x/header.png);
    background-color: #0a0a0a;
    background-repeat: no-repeat;
    background-position: center; 
    height:392px;
    margin-top: 90px;
}

如何删除网站和导航栏周围的空间[CSS] [边缘折叠]

3 个答案: