Question

我想做两件事：第一件事是将宽度为1200像素的内容区域居中。我希望导航菜单也是这个宽度。我想做的第二件事是将这个内容区域的颜色改为白色;同时允许内容区域边缘周围的背景区域（包装）保持相同的颜色。

/* BACKGROUND */

body {
 background-color: #ECF0F1;
 overflow-y: scroll;
 }

*{
 margin:0;
 padding:0;
 }

img {
 border:0;
 }

/* AREA */

#wrapper {
 margin:0 auto;
 position: absolute;
 width: 1200px;
 background:#339999;
 font-size:1.20em;
 }

/* HEADER */

#header {
 margin-top: 40px;
 height: 100px;
 width: 100%;
 }

/* PAGE */

#content {  
 min-height:400px;
 padding:23px;
 text-align:justify;
 line-height:1.5;
 }

如果你能为我和其他希望以类似方式格式化网页的用户，那将会很棒 - 告诉我如何设置这个内容区域和导航栏

谢谢！

Answer 1

#menu {
    position: fixed;
    z-index: +1;
    width: 1200px;
    background-color: #E74C3C;
    height: 100px;
    margin: 0 auto; /* add this to make it center */
    left: 0; /* to give position of fixed menu */
    right: 0; /* to give position of fixed menu */
}
#content {
    min-height: 400px;
    background-color: #fff; /* to color white your content */
    padding: 23px;
    text-align: justify;
    line-height: 1.5;
}

Answer 2

以下是您正在寻找的较小样本（以像素为单位）：

D E M O

当然，您可以根据需要将宽度更改为1200px。

/* BACKGROUND */
html { height:100%; width:100%;}
body {
 background-color: #ECF0F1;
 height:100%; width:100%;
 }

*{
 margin:0;
 padding:0;
 }

img {
 border:0;
 }

/* AREA */

#wrapper {
 margin:0 auto;
height:100%;
 width: 300px;
 border:3px solid #339999;
 font-size:1.20em;
    box-sizing:border-box;
 }

/* HEADER */

#header {
background:#ff6600;
margin:0 auto;
 height: 100px;
 width: 100%;
    text-align:center;
    font:bold 16px/100px arial;
 }

/* PAGE */

#content {  
 height:calc(100% - 100px);
    margin:0 auto;
        text-align:center;
    font:bold 16px/200px arial;
 background:white;
 }

Answer 3

你必须在这做很多事情。在CSS中更新以下类。这将给出基本的一致性。

#menu { 
  position: relative; 
  z-index: 1; 
  width: 1200px; 
  background-color: #E74C3C; 
  height: 100%; 
  margin: 0px auto;
 }
 #header
 {
  /* margin-top: 40px; */ 
  height: 100px; 
  width: 100%; 
 }
  #content { 
  min-height:400px; 
  padding:23px; 
  text-align:justify; 
  line-height:1.5; 
  background-color: #fff;
 }

如何使内容区域与包装器的颜色不同？

3 个答案: