请您查看此示例网站。如果我很好地阅读了代码(只是看到了),它会使用带有一些 javascript 的表格进行设置,以便居中的容器可以始终保持在中心,并且主体有两个根据屏幕大小扩展的流体颜色背景。
我试图重现这样的东西,但只是使用 css,我很确定我可以但不知道如何。请您给我一些指示/文件以供阅读。
请您查看此示例网站。如果我很好地阅读了代码(只是看到了),它会使用带有一些 javascript 的表格进行设置,以便居中的容器可以始终保持在中心,并且主体有两个根据屏幕大小扩展的流体颜色背景。
我试图重现这样的东西,但只是使用 css,我很确定我可以但不知道如何。请您给我一些指示/文件以供阅读。
标记::
<div class="wrapper">
<div class="head_wrapper">
<div class="left_head">left</div>
<div class="right_head">right</div>
</div>
<div class="body_wrapper">
<div class="left_body">left</div>
<div class="right_body">right</div>
</div>
</div>
CSS ::
.wrapper{
overflow:hidden;
width:100%;
display:table;
}
.head_wrapper,.body_wrapper{
overflow:hidden;
width:100%;
padding:0px;
display:table-row;
}
.left_head,.left_body,.right_head,.right_body{
display:table-cell;
text-align:center;
vertical-align:middle;
}
.left_head{
background:black;
height:300px;
font-size:36px;
color:white;
}
.right_head{
background:blue;
height:300px;
font-size:36px;
}
.left_body{
background:yellow;
height:800px;
font-size:36px;
}
.right_body{
background:green;
height:800px;
font-size:36px;
}
.left_head,.left_body{
width:70%;
overflow:hidden;
}
您只是要求在固定宽度的容器上进行水平居中。这很容易完全在 CSS 中完成。只需为您的容器设置(环绕整个站点的元素):
.container {
width: 800px;
margin: 0 auto;
}
“自动”将自动平衡左右边距(顶部和底部没有边距。)
[编辑:哎呀忘了一点]
至于色块,您可以使用元素上的背景图像来实现这一点,它的宽度为 1 像素,无论您需要多高。只需将其设置为重复-x。
如果您的两个部分可能具有不同的高度,则可以将其拆分,以便:
这意味着您的代码将类似于:
<div class="headercontainer">
<div class="header> This is my header </div>
</div>
<div class="maincontainer">
<div class="main"> This is rest of my copy. </div>
</div>
还有你的 CSS:
.headercontainer { background-color: #222; }
.maincontainer { background-color: #444; }
.headercontainer .header,
.maincontainer .main { width: 800px;
margin: 0 auto; }
HTH :)