使用自动空白边让设计居中
设计居中有两个基本方法: 一个方法使用自动空白边,另一个方法使用定位和负值的空白边。
到目前为止, 使用自动空白边进行居中的方法是最常用的
例:<head runat="server">
<title></title>
<style type="text/css">
#Test//id选择器
{
width:720px;
margin:0px auto;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="Test">
</div>
</form>
</body>
这在所有现代浏览器中都是有效的。但是,怪异模式中的IE 5.x和IE 6不支持自动空白边。幸运的是IE将text-align: center误解为让所有东西居中,而不只是文本。可以利用这一点,方法是让主体标签中
的所有东西居中,包括容器div,然后将容器的内容重新对准左边。为了让这个方法在所有浏览器中都能够顺利地工作,需要做最后一件事情。在Netscape 6中,当浏览器窗口的宽度减少到小于容器的宽度时,容器的左边会跑到屏幕的外边,就无法访问它了
body {
text-align: center;
min-width: 760px;
}
#wraPper {
width: 720px;
margin: 0 auto;
text-align: left;
}
但是,并不希望让容器的左边缘居中,而是希望让容器的中间居中。实现的方法是对容器的左边应用一
个负值的空白边,宽度等于容器宽度的一半儿。这会把容器向左边移动它的宽度的一半,从而让它在屏幕上
居中:
#wrapper {
width: 720px;
position: relative;
left: 50%;
margin-left: -360px;
}
基于浮动的布局
因为浮动的元素不再占据文档流中的任何空间,它们就不再对包围它们的块框产生任何影响。为了解决
这个问题,需要对布局中各个点上的浮动元素进行清理。非常常见的做法是,不对元素进行连续地浮动和清
理,而是浮动几乎所有东西,然后在整个文档的“战略点”(比如页脚)上进行一次或两次清理。
两列的浮动布局
例:
只需为每个列设置想要的宽度,然后将导航向左浮动,将
内容向右浮动:
#content {
width: 520px;
float: right;
}
#mainNav {
width: 180px;
float: left;
}
然后, 为了确保页脚正确地定位在这两个浮动元素的下面,需要清理页脚:
#footer {
clear: both;
}
设计居中有两个基本方法: 一个方法使用自动空白边,另一个方法使用定位和负值的空白边。
到目前为止, 使用自动空白边进行居中的方法是最常用的
例:<head runat="server">
<title></title>
<style type="text/css">
#Test//id选择器
{
width:720px;
margin:0px auto;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="Test">
</div>
</form>
</body>
这在所有现代浏览器中都是有效的。但是,怪异模式中的IE 5.x和IE 6不支持自动空白边。幸运的是IE将text-align: center误解为让所有东西居中,而不只是文本。可以利用这一点,方法是让主体标签中
的所有东西居中,包括容器div,然后将容器的内容重新对准左边。为了让这个方法在所有浏览器中都能够顺利地工作,需要做最后一件事情。在Netscape 6中,当浏览器窗口的宽度减少到小于容器的宽度时,容器的左边会跑到屏幕的外边,就无法访问它了
body {
text-align: center;
min-width: 760px;
}
#wraPper {
width: 720px;
margin: 0 auto;
text-align: left;
}
但是,并不希望让容器的左边缘居中,而是希望让容器的中间居中。实现的方法是对容器的左边应用一
个负值的空白边,宽度等于容器宽度的一半儿。这会把容器向左边移动它的宽度的一半,从而让它在屏幕上
居中:
#wrapper {
width: 720px;
position: relative;
left: 50%;
margin-left: -360px;
}
基于浮动的布局
因为浮动的元素不再占据文档流中的任何空间,它们就不再对包围它们的块框产生任何影响。为了解决
这个问题,需要对布局中各个点上的浮动元素进行清理。非常常见的做法是,不对元素进行连续地浮动和清
理,而是浮动几乎所有东西,然后在整个文档的“战略点”(比如页脚)上进行一次或两次清理。
两列的浮动布局
例:
只需为每个列设置想要的宽度,然后将导航向左浮动,将
内容向右浮动:
#content {
width: 520px;
float: right;
}
#mainNav {
width: 180px;
float: left;
}
然后, 为了确保页脚正确地定位在这两个浮动元素的下面,需要清理页脚:
#footer {
clear: both;
}
<div id=“wrapper”>
<div id=“content”>
内容区
</div>
<div id=“mainNav”>
导航区
</div>
<div id=“footer”>
结尾区
</div>
</div>
还需要做一些小调整以便让布局更有条理。首先。导航区域中的内容一直顶到
容器的边缘上,这不太好看,需要留出点儿空间。可以直接在导航元素上添加水平填充
#mainNav {
padding-top: 20px;
padding-bottom: 20px;
}
#mainNav li {
padding-left: 20px;
padding-right: 20px;
}
#content hl,#content h2,#content p {
padding-right: 20px;
}
三列的浮动布局
内容区
</div>
<div id=“mainNav”>
导航区
</div>
<div id=“footer”>
结尾区
</div>
</div>
还需要做一些小调整以便让布局更有条理。首先。导航区域中的内容一直顶到
容器的边缘上,这不太好看,需要留出点儿空间。可以直接在导航元素上添加水平填充
#mainNav {
padding-top: 20px;
padding-bottom: 20px;
}
#mainNav li {
padding-left: 20px;
padding-right: 20px;
}
#content hl,#content h2,#content p {
padding-right: 20px;
}
三列的浮动布局
<div id=“wrapper”>
<div id=“content”>
<dlv id=“mainContent”>主内容区 </div>
<div id=“secondaryContent”>次内容区</div>
</div>
<div id=“mainNav”>
导航区
</div>
<div id=“footer”>
结尾区
</div>
</div>
<div id=“content”>
<dlv id=“mainContent”>主内容区 </div>
<div id=“secondaryContent”>次内容区</div>
</div>
<div id=“mainNav”>
导航区
</div>
<div id=“footer”>
结尾区
</div>
</div>
#mainContent {
width: 320px;
float: left;
}
#secondarycontent {
width: 180px;
float: right;
}
width: 320px;
float: left;
}
#secondarycontent {
width: 180px;
float: right;
}
faux列
对于固定宽度的两列布局, 只需在容器元素上应用一个垂直重复的背景图像, 其宽度与导航区域相同
#wrapper{ background: #fff url(images/nav-bg-Fixed.gif)repeat-y left top; }