Question

因此，我正在重新创建遇到的模板，需要一些帮助...

我希望顶部的导航栏能覆盖整个屏幕，但是我目前使用的方式是将代码放入容器中。有什么建议可以在不影响其余流程的情况下做到这一点吗？

    	body {
		margin:0;
	}

	.container {
		margin:auto;
		width:80%;
	}

	nav {
		background-color:black;
		color:white;
		font-size:25px;
		height:50px;
		opacity:0.5;

	}

	nav ul {
		margin-top:0;
	}

	nav ul li {
		display:inline;
	}

	nav ul li a {
		padding:30px;
		text-decoration:none;
	}

	nav p {
		margin-top:0;
	}

	.showcase,header {
		background-image:url("space.jpg");
		background-size:cover;
		height:500px;
	}

	@media (max-width: 1800px) {
		
		h1 {
			text-align:left;
		}
		
		nav ul   {
			display:none;
		}
	}

    <!DOCTYPE html>

    <html>

    <head>
	    <meta name="viewport" content="width=device-width" />
	    <title>Space Prospection</title>
	    <meta charset="utf-8" />
	    <link rel="stylesheet" href="styles.css" />
    </head>

    <body>
	<div class="container">	
	<div class="showcase">
			
			<nav>
				<a href="#">Space Prospection</a>
				<ul>
					<li><a href="#">Home</a></li>
					<li><a href="#">About</a></li>
					<li><a href="#">Projects</a></li>
					<li><a href="#">Blog</a></li>
					<li><a href="#">Contact</a></li>
				</ul>
			</nav>	

			

			<div class="main_content">
				<h1>Soyuz TMA-M <span>Spacecraft</span></h1>
				<button>Read More</button>
			</div>
			
			<div class="secondary_content">
				<h1>Featured Projects</h1>
				
			</div>
		
		</div>
	</div>
		
	</div>
	
    </body>

    </html>

预先感谢

Answer 1

.container应该在<nav>内容或网站内部的任何内容之内，因此这是您的代码：

HTML：

<div class="showcase">
        <nav>
        <div class="container"> 
            <a href="#">Space Prospection</a>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Projects</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
        </nav>  


    <div class="container"> 

        <div class="main_content">
            <h1>Soyuz TMA-M <span>Spacecraft</span></h1>
            <button>Read More</button>
        </div>

        <div class="secondary_content">
            <h1>Featured Projects</h1>

        </div>

    </div>
</div>

.container可以将所有网站内容保存为相同宽度，但不能保存所有背景

Answer 2

好吧，您只需要将菜单放在div.container之外。如果您想要标题内容的最大宽度，则可以在其中包含另一个包装器。

body {
    margin: 0;
    background-image:url("https://picsum.photos/1600/900");
    background-size: cover;
    min-height: 100vh;
}

.container {
    margin: auto;
    max-width: 800px;
}

nav {
    background-color: black;
    color: #FFF;
    font-size: 25px;
    opacity: 0.5;
}

nav .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
}

nav ul {
    margin:0;
}

nav ul li {
    display: inline-block;
}

nav ul li a {
    text-decoration:none;
    display: block;
    color: #FFF;
}

nav p {
    margin-top: 0;
}

.showcase, header {
    background-image:url("https://picsum.photos/1600/900");
    background-size:cover;
    height:500px;
}

@media (max-width: 1800px) {

    h1 {
        text-align:left;
    }

    nav ul   {
        display:none;
    }
}

<!DOCTYPE html>

<html>

<head>
    <meta name="viewport" content="width=device-width" />
    <title>Space Prospection</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="styles.css" />
</head>

<body>

<nav>
  <div class="container"> 
      <a href="#">Space Prospection</a>
      <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Projects</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">Contact</a></li>
      </ul>
  </div>
</nav>  

<div class="container"> 

          <main class="main_content">
              <h1>Soyuz TMA-M <span>Spacecraft</span></h1>
              <button>Read More</button>
          </main>

          <aside class="secondary_content">
              <h1>Featured Projects</h1>

          </aside>

</div>

</body>

</html>

导航栏在屏幕上没有全宽吗？

2 个答案: