DIV+CSS网页制作布局技术漫谈

王朝html/css/js·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

CSS布局常用的方法:float : none | left | right

取值:

none : 默认值。对象不飘浮

left : 文本流向对象的右边

right : 文本流向对象的左边

它是怎样工作的,看个一行两列的例子

xhtml:

<div id="wrap">

<div id="column1">这里是第一列</div>

<div id="column2">这里是第二列</div>

<div class="clear"></div>/*这是违背web标准意图的,只是想说明在它下面的元素需要清除浮动*/

</div>

CSS:

#wrap{ width:100%; height:auto;}

#column1{ float:left; width:40%;}

#column2{ float:right; width:60%;}

.clear{ clear:both;}

position : static | absolute | fixed | relative

取值:

static : 默认值。无特殊定位,对象遵循HTML定位规则

absolute : 将对象从文档流中拖出,使用 left , right , top , bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象,则依据 body 对象。而其层叠通过 z-index 属性定义

fixed : 未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范

relative : 对象不可层叠,但将依据 left , right , top , bottom 等属性在正常文档流中偏移位置

它来实现一行两列的例子

xhtml:

<div id="wrap">

<div id="column1">这里是第一列</div>

<div id="column2">这里是第二列</div>

</div>

CSS:

#wrap{ position:relative;/*相对定位*/width:770px;}

#column1{ position:absolute; top:0; left:0; width:300px;}

#column2{position:absolute; top:0; right:0; width:470px;}

他们的区别在哪?

显然,float是相对定位的,会随着浏览器的大小和分辨率的变化而改变,而position就不行了,所以一般情况下还是float布局!

2.CSS常用布局实例

一列

单行一列

body { margin: 0px; padding: 0px; text-align: center; }

#content { margin-left:auto; margin-right:auto; width: 400px; }

两行一列

body { margin: 0px; padding: 0px; text-align: center;}

#content-top { margin-left:auto; margin-right:auto; width: 400px; }

#content-end {margin-left:auto; margin-right:auto; width: 400px; }

三行一列

body { margin: 0px; padding: 0px; text-align: center; }

#content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }

#content-mid { margin-left:auto; margin-right:auto; width: 400px; }

#content-end { margin-left:auto; margin-right:auto; width: 400px; }

两列

单行两列

#bodycenter { width: 700px;margin-right: auto; margin-left: auto;overflow: auto; }

#bodycenter #dv1 {float: left;width: 280px;}

#bodycenter #dv2 {float: right;width: 420px;}

两行两列

#header{ width: 700px; margin-right: auto;margin-left: auto; overflow: auto;}

#bodycenter { width: 700px; margin-right: auto; margin-left: auto; overflow: auto; }

#bodycenter #dv1 { float: left; width: 280px;}

#bodycenter #dv2 { float: right;width: 420px;}

三行两列

#header{ width: 700px;margin-right: auto; margin-left: auto; }

#bodycenter {width: 700px; margin-right: auto; margin-left: auto; }

#bodycenter #dv1 { float: left;width: 280px;}

#bodycenter #dv2 { float: right; width: 420px;}

#footer{ width: 700px; margin-right: auto; margin-left: auto; overflow: auto; clear:both; }

三列

单行三列

绝对定位

#left { position: absolute; top: 0px; left: 0px; width: 120px; }

#middle {margin: 0px 190px 0px 190px; }

#right {position: absolute;top: 0px; right: 0px; width: 120px;}

float定位

xhtml:

<div id="wrap">

<div id="column">

<div id="column1">这里是第一列</div>

<div id="column2">这里是第二列</div>

<div class="clear"></div>/*用法web标准不建议,但是记住下面元素需要清除浮动*/

</div>

<div id="column3">这里是第三列</div>

<div class="clear"></div>/*用法web标准不建议,但是记住下面元素需要清除浮动*/

</div>

CSS:

#wrap{ width:100%; height:auto;}

#column{ float:left; width:60%;}

#column1{ float:left; width:30%;}

#column2{ float:right; width:30%;}

#column3{ float:right; width:40%;}

.clear{ clear:both;}

float定位二

xhtml

<div id="center" class="column">

<h1>This is the main content.</h1>

</div>

<div id="left" class="column">

<h2>This is the left sidebar.</h2>

</div>

<div id="right" class="column">

<h2>This is the right sidebar.</h2>

</div>

CSS

body {

margin: 0;

padding-left: 200px; /* LC fullwidth */

padding-right: 190px; /* RC fullwidth + CC padding */

min-width: 200px; /* LC fullwidth + CC padding */

}

.column {

position: relative;

float: left;

}

#center {

width: 100%;

}

#left {

width: 200px; /* LC width */

right: 200px; /* LC fullwidth */

margin-left: -100%;

}

#right {

width: 190px; /* RC width */

margin-right: -100%;

}

/*** IE Fix ***/

* html #left {

left: 190px; /* RC fullwidth */

}

两行三列

xhtml:

<div id="header">这里是顶行</div>

<div id="warp">

<div id="column">

<div id="column1">这里是第一列</div>

<div id="column2">这里是第二列</div>

<div class="clear"></div>

</div>

<div id="column3">这里是第三列</div>

<div class="clear"></div>

</div>

CSS:

#header{width:100%; height:auto;}

#wrap{ width:100%; height:auto;}

#column{ float:left; width:60%;}

#column1{ float:left; width:30%;}

#column2{ float:right; width:30%;}

#column3{ float:right; width:40%;}

.clear{ clear:both;}

三行三列

xhtml:

<div id="header">这里是顶行</div>

<div id="wrap">

<div id="column">

<div id="column1">这里是第一列</div>

<div id="column2">这里是第二列</div>

<div class="clear"></div>

</div>

<div id="column3">这里是第三列</div>

<div class="clear"></div>

</div>

<div id="footer">这里是底部一行</div>CSS:

#header{width:100%; height:auto;}

#wrap{ width:100%; height:auto;}

#column{ float:left; width:60

[1] [2] 下一页

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航