| 導購 | 订阅 | 在线投稿
分享
 
 
 

基于XHTML的DIV+CSS網頁制作布局技術

來源:互聯網網民  2008-08-27 06:58:08  評論

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布局!

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:0px190px0px190px;}

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

<divid="column3">這裏是第三列</div>

<divclass="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>Thisisthemaincontent.</h1>

</div>

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

<h2>Thisistheleftsidebar.</h2>

</div>

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

<h2>Thisistherightsidebar.</h2>

</div>

CSS

body{

margin:0;

padding-left:200px;/*LCfullwidth*/

padding-right:190px;/*RCfullwidth CCpadding*/

min-width:200px;/*LCfullwidth CCpadding*/

}

.column{

position:relative;

float:left;

}

#center{

width:100;

}

#left{

width:200px;/*LCwidth*/

right:200px;/*LCfullwidth*/

margin-left:-100;

}

#right{

width:190px;/*RCwidth*/

margin-right:-100;

}

/***IEFix***/

*html#left{

left:190px;/*RCfullwidth*/

}

兩行三列

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

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

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

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

.clear{clear:both;}

#footer{width:100;height:auto;}

PS:這裏列出的是常用的例子,而非研究之用,對一每個盒子,我都沒有設置margin,padding,boeder等屬性,是因爲我個人覺得,含有寬度定位的時候,最好不好用到他們,除非必不得已,因爲如果不是這樣的話,解決浏覽器兼容問題,會讓你頭疼,而且産生一系列CSS代碼,我覺得這樣的效率和效果都不好!

CSS布局高級技巧

margin和padding總是有可能要用到,而産生的問題如何解決呢?由于浏覽器解釋容器寬度的方法不同:

IE6.0FirefoxOpera等是

真實寬度=width padding border margin

IE5.X

真實寬度=width-padding-border-margin

IE中有浮動對象的雙倍距離之BUG(IEDoubledFloat-MarginBug)

很明顯,第一種下很完美的布局在第二種情況下後果是很淒慘的!

解決的方法是hack

div.content{

width:400px;//這個是錯誤的width,所有浏覽器都讀到了

voice-family:""}"";//IE5.X/win忽略了""}""後的內容

voice-family:inherit;

width:300px;//包括IE6/win在內的部分浏覽器讀到這句,新的數值(300px)覆蓋掉了舊的

}

html>body.content{//html>body是CSS2的寫法

width:300px;//支持CSS2該寫法的浏覽器(非IE5)有幸讀到了這一句

}

div.content{

width:300px!important;//這個是正確的width,大部分支持!important標記的浏覽器使用這裏的數值

width(空格)/**/:400px;//IE6/win不解析這句,所以IE6/win仍然認爲width的值是300px;而IE5.X/win讀到這句,新的數值(400px)覆蓋掉了舊的,因爲!important標記對他們不起作用

}

html>body.content{//html>body是CSS2的寫法

width:300px;//支持CSS2該寫法的浏覽器有幸讀到了這一句

}

列等高技巧

n行n列布局,每列高度(事先並不能確定哪列的高度)的相同,是每個設計師追求的目標,做法有:背景圖填充、加JS腳本的

方法和容器溢出部分隱藏和列的負底邊界和正的內補丁相結合的方法。

背景圖填充法:

xhtml:

<div id="wrap">

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

<div id="column1">這是第二列</div>

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

</div>

css:

#wrap{width:776px;background:url(bg.gif)repeat-y300px;}

#column1{float:left;width:300px;}

#column2{float:right;width:476px;}

.clear{clear:both;}

就是將一個npx寬的一張圖片在外部容器縱向重複,定位到兩列交錯的位置縱向重複,在視覺上産生了兩列高度一樣的錯覺。

 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
  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布局!   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:0px190px0px190px;}   #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>   <divid="column3">這裏是第三列</div>   <divclass="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>Thisisthemaincontent.</h1>   </div>   <div id="left"class="column">   <h2>Thisistheleftsidebar.</h2>   </div>   <div id="right"class="column">   <h2>Thisistherightsidebar.</h2>   </div>   CSS   body{   margin:0;   padding-left:200px;/*LCfullwidth*/   padding-right:190px;/*RCfullwidth CCpadding*/   min-width:200px;/*LCfullwidth CCpadding*/   }   .column{   position:relative;   float:left;   }   #center{   width:100;   }   #left{   width:200px;/*LCwidth*/   right:200px;/*LCfullwidth*/   margin-left:-100;   }   #right{   width:190px;/*RCwidth*/   margin-right:-100;   }   /***IEFix***/   *html#left{   left:190px;/*RCfullwidth*/   }   兩行三列   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;}   #column1{float:left;width:30;}   #column2{float:right;width:30;}   #column3{float:right;width:40;}   .clear{clear:both;}   #footer{width:100;height:auto;}   PS:這裏列出的是常用的例子,而非研究之用,對一每個盒子,我都沒有設置margin,padding,boeder等屬性,是因爲我個人覺得,含有寬度定位的時候,最好不好用到他們,除非必不得已,因爲如果不是這樣的話,解決浏覽器兼容問題,會讓你頭疼,而且産生一系列CSS代碼,我覺得這樣的效率和效果都不好!   CSS布局高級技巧   margin和padding總是有可能要用到,而産生的問題如何解決呢?由于浏覽器解釋容器寬度的方法不同:   IE6.0FirefoxOpera等是   真實寬度=width padding border margin   IE5.X   真實寬度=width-padding-border-margin   IE中有浮動對象的雙倍距離之BUG(IEDoubledFloat-MarginBug)   很明顯,第一種下很完美的布局在第二種情況下後果是很淒慘的!   解決的方法是hack   div.content{   width:400px;//這個是錯誤的width,所有浏覽器都讀到了   voice-family:""}"";//IE5.X/win忽略了""}""後的內容   voice-family:inherit;   width:300px;//包括IE6/win在內的部分浏覽器讀到這句,新的數值(300px)覆蓋掉了舊的   }   html>body.content{//html>body是CSS2的寫法   width:300px;//支持CSS2該寫法的浏覽器(非IE5)有幸讀到了這一句   }   div.content{   width:300px!important;//這個是正確的width,大部分支持!important標記的浏覽器使用這裏的數值   width(空格)/**/:400px;//IE6/win不解析這句,所以IE6/win仍然認爲width的值是300px;而IE5.X/win讀到這句,新的數值(400px)覆蓋掉了舊的,因爲!important標記對他們不起作用   }   html>body.content{//html>body是CSS2的寫法   width:300px;//支持CSS2該寫法的浏覽器有幸讀到了這一句   }   列等高技巧   n行n列布局,每列高度(事先並不能確定哪列的高度)的相同,是每個設計師追求的目標,做法有:背景圖填充、加JS腳本的   方法和容器溢出部分隱藏和列的負底邊界和正的內補丁相結合的方法。   背景圖填充法:   xhtml:   <div id="wrap">   <div id="column1">這是第一列</div>   <div id="column1">這是第二列</div>   <div class="clear"></div>   </div>   css:   #wrap{width:776px;background:url(bg.gif)repeat-y300px;}   #column1{float:left;width:300px;}   #column2{float:right;width:476px;}   .clear{clear:both;}   就是將一個npx寬的一張圖片在外部容器縱向重複,定位到兩列交錯的位置縱向重複,在視覺上産生了兩列高度一樣的錯覺。
󰈣󰈤
王朝萬家燈火計劃
期待原創作者加盟
 
 
 
>>返回首頁<<
 
 
 
 
 
 熱帖排行
 
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有