您的位置:首頁 > 網頁制作 > HTML/Xhtml

Xhtml第8天:CSS布局入門技術

日期:2005-11-24 00:00:00 點擊: 來自: 作者:

css布局與傳統表格(table)布局最大的區別在于:原來的定位都是采用表格,通過表格的間距或者用無色透明的gif圖片來控制文布局版塊的間距;而現在則采用層(div)來定位,通過層的margin,padding,border等屬性來控制版塊的間距

1.定義div

分析一個典型的定義div例子:

#sample{ margin: 10px 10px 10px 10px;
padding:20px 10px 10px 20px;
border-right: #ccc 2px solid;
border-bottom: #ccc 2px solid;
border-left: #ccc 2px solid;
border-top: #ccc 2px solid;
background: url(images/bg_poem.jpg) #fefefe no-repeat right bottom;
color: #666;
text-align: center;
line-height: 150%; width:60%; }

說明如下:

  • 層的名稱為sample,在頁面中用<div id="sample">就可以調用這個樣式。
  • margin是指層的邊框以外留的空白,用于頁邊距或者與其它層制造一個間距。"10px 10px 10px 10px"分別代表"上右下左"(順時針方向)四個邊距,如果都一樣,可以縮寫成"margin: 10px;"。如果邊距為零,要寫成"margin: 0px;"。注意:當值是零時,除了rgb顏色值0%必須跟百分號,其他情況后面可以不跟單位"px"。margin是透明元素,不能定義顏色。
  • padding是指層的邊框到層的內容之間的空白。和margin一樣,分別指定上右下左邊框到內容的距離。如果都一樣,可以縮寫成"padding:0px"。單獨指定左邊可以寫成"padding-left: 0px;"。padding是透明元素,不能定義顏色。
  • border是指層的邊框,"border-right: #ccc 2px solid;"是定義層的右邊框顏色為"#ccc",寬度為"2px",樣式為"solid"直線。如果要虛線樣式可以用"dotted"。
  • background是定義層的背景。分2級定義,先定義圖片背景,采用"url(../images/bg_logo.gif)"來指定背景圖片路徑;其次定義背景色"#fefefe"。"no-repeat"指背景圖片不需要重復,如果需要橫向重復用"repeat-x",縱向重復用"repeat-y",重復鋪滿整個背景用"repeat"。后面的"right bottom;"是指背景圖片從右下角開始。如果沒有背景圖片可以只定義背景色background: #fefefe
  • color用于定義字體顏色,上一節已經介紹過。
  • text-align用來定義層中的內容排列方式,center居中,left居左,right居右。
  • line-height定義行高,150%是指高度為標準高度的150%,也可以寫作:line-height:1.5或者line-height:1.5em,都是一樣的意思。
  • width是定義層的寬度,可以采用固定值,例如500px,也可以采用百分比,象這里的"60%"。要注意的是:這個寬度僅僅指你內容的寬度,不包含margin,border和padding。但在有些瀏覽器中不是這么定義的,需要你多試試。

下面是這個層的實際表現:

這里是演示內容,這里是演示內容,這里是演示內容,這里是演示內容,這里是演示內容,這里是演示內容,這里是演示內容,這里是演示內容,

這里是演示內容,這里是演示內容,

這里是演示內容,這里是演示內容,

這里是演示內容...

我們可以看到邊框是2px的灰色,背景圖片在右下沒有重復,內容距離上和左邊框20px,內容居中,一切和預想的一樣。hoho,雖然不好看,但它是最基本的,掌握了它,你就已經學會一半的css布局技術了。就是這樣,不算難吧!(另一半是什么?另一半是層與層之間的定位。我會在后面逐步講解。)

2.css2盒模型

自從1996年css1的推出,w3c組織就建議把所有網頁上的對像都放在一個盒(box)中,設計師可以通過創建定義來控制這個盒的屬性,這些對像包括段落、列表、標題、圖片以及層 .

More..素材圖片 Picture Navigation
HTML/Xhtml熱門 Class Hot
HTML/Xhtml推薦 Class Commend
版權所有:中國網站資源 2005- 未經授權禁止復制或建立鏡像 This Site Tech:XHTML+DIV+CSS+Javascript
CopyRight ® 2005- www.yndjjj.com online services. all rights reserved. ICP06016627
Optimized to 1024x768 to Firefox,Netscape,Opera,MS-IE6+.
中扑网 <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>