Question

我正在尝试建立一个网页。我想要代码

<header>
    Some content
</header>
<body>
    More content
</body>

放置在屏幕中间，仅占屏幕的一小部分屏幕的宽度。我希望屏幕的其余部分为灰色。

基本上，我希望页面的外观与this one类似。

简单的方法是什么？

Answer 1

您必须将所有内容包装在1个主div中，并为其提供最大宽度，例如1200px。然后像这样设置颜色：

    body {
        background-color: #eee;
    }
    #main {
        max-width: 900px;
        background-color: #fff;
        margin: 0 auto; 
    }

Answer 2

将所有内容包装在div容器中并指定宽度。将主体的背景色设置为灰色。您需要对容器div使用margin:auto;，left:0;和right:0;以使其居中。

body{
  background-color:lightgray;
}

#container{
  width:400px;
  background-color:white;
  margin:auto;
  left:0;
  right:0;
}

header{
  height:200px;
}

.more-content{
  height:300px;
}

<html>
<body>
<div id="container">
  <header>
    Some content
  </header>
  <div class="more-content">
      More content
  </div>
</div>
</body>
</html>

Answer 3

要实现此目的，您可以将<body/>元素的背景颜色设置为灰色，并将其子元素设置为白色：

<html>
  <head>
  <style>

body {
  /* make the <body/> stretch to the whole window */
  position: absolute;
  width: 100%;
  height: 100%;
  
  /* center all contents */
  display: flex;
  justify-content: center; /* horizontal alignment */
  align-items: center; /* vertical alignment */
    
  /* set the background color */
  background: lightgray;
}

body > div {
  /* to make it look better */
  padding: 20px;
  
  /* set the background color */
  background: white;
}
  </style>
  </head>
  <body>
    <div>
      Hello World!
    </div>
  </body>
</html>

如果您想了解有关Flexboxes this article is a good starting place的更多信息。

如何在HTML中仅对屏幕上未使用的部分进行着色？

3 个答案: