中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

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

取值：
none :�� 默認(rèn)值。對象不飄浮
left :�� 文本流向?qū)ο蟮挠疫?
right :�� 文本流向?qū)ο蟮淖筮?/p>

它是怎樣工作的，看個(gè)一行兩列的例子

xhtml:

<div id="warp">
 <div id="column1">這里是第一列</div>
 <div id="column2">這里是第二列</div>
 <div class="clear"></div>
</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 :�� 默認(rèn)值。無特殊定位，對象遵循HTML定位規(guī)則
absolute :�� 將對象從文檔流中拖出，使用 left ， right ， top ， bottom 等屬性相對于其最接近的一個(gè)最有定位設(shè)置的父對象進(jìn)行絕對定位。如果不存在這樣的父對象，則依據(jù) body 對象。而其層疊通過 z-index 屬性定義
fixed :�� 未支持。對象定位遵從絕對(absolute)方式。但是要遵守一些規(guī)范
relative :�� 對象不可層疊，但將依據(jù) left ， right ， top ， bottom 等屬性在正常文檔流中偏移位置

它來實(shí)現(xiàn)一行兩列的例子

xhtml:

<div id="warp">
 <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;}

他們的區(qū)別在哪?

顯然，float是相對定位的，會(huì)隨著瀏覽器的大小和分辨率的變化而改變，而position就不行了，所以一般情況下還是float布局！

2.CSS常用布局實(shí)例

一列
單行一列

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;}
#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: 410px;}

兩行兩列

#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: 410px;}

三行兩列

#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: 410px;}
#footer{     width: 700px;  margin-right: auto; margin-left: auto;  overflow: auto;  }

三列
單行三列
絕對定位

#left { position: absolute; top: 0px;  left: 0px; width: 120px;  }
#middle {margin: 20px 190px 20px 190px; }
#right {position: absolute;top: 0px; right: 0px;  width: 120px;}

float定位

xhtml:

<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:

#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;}

出處：藍(lán)色理想
責(zé)任編輯：moby

上一頁 下一頁 div+css布局漫談 [2]

◎進(jìn)入論壇網(wǎng)站綜合、網(wǎng)頁制作版塊參加討論