Css布局

来源：百度文库编辑：神马文学网时间：2024/05/01 01:37:45

使用自动空白边让设计居中

设计居中有两个基本方法: 一个方法使用自动空白边，另一个方法使用定位和负值的空白边。
到目前为止，使用自动空白边进行居中的方法是最常用的
例：

这在所有现代浏览器中都是有效的。但是，怪异模式中的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;
}

内容区

导航区

还需要做一些小调整以便让布局更有条理。首先。导航区域中的内容一直顶到
容器的边缘上，这不太好看，需要留出点儿空间。可以直接在导航元素上添加水平填充
#mainNav {
padding-top: 20px;
padding-bottom: 20px;
}
#mainNav li {
padding-left: 20px;
padding-right: 20px;
}
#content hl，#content h2,#content p {
padding-right: 20px;
}
三列的浮动布局

主内容区

次内容区

导航区

#mainContent {
width: 320px;
float: left;
}
#secondarycontent {
width: 180px;
float: right;
}
faux列
对于固定宽度的两列布局，只需在容器元素上应用一个垂直重复的背景图像，其宽度与导航区域相同
#wrapper{ background: #fff url(images/nav-bg-Fixed．gif)repeat-y left top; }

Css布局 CSS布局入门 div+css布局漫谈常用css布局 CSS DIV布局教程 div+css布局漫谈常用css布局 CSS布局口诀 Div CSS布局入门教程 div+css布局经验 CSS布局入门 Div+CSS布局入门教程 Div CSS布局入门教程(一) Div CSS布局入门教程(二) Div CSS布局入门教程(三) Div CSS布局入门教程(四) Div CSS布局入门教程(五) 漫谈CSS和页面布局. CSS基本布局16例一些经典的css布局 div+css布局漫谈1 div+css布局漫谈swewer Div CSS布局入门(四) Div CSS布局入门(五)