WEB2 0標準教程 第八天 CSS布局入門

2021-04-13 06:09:25 字數 2141 閱讀 4309

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

1.定義div

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

程式**

#sample  

說明如下:

● 層的名稱為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。但在有些瀏覽器中不是這麼定義的,需要你多試試。 

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

html.gif" style="margin:0px 2px -**x 0px"> html**

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

2.css2盒模型

自從2023年css1的推出,w3c組織就建議把所有網頁上的對像都放在乙個盒(box)中,設計師可以通過建立定義來控制這個盒的屬性,這些對像包括段落、列表、標題、以及層。盒模型主要定義四個區域:內容(content)、邊框距(padding)、邊界(border)和邊距(margin)。上面我們講的sample層就是乙個典型的盒。對於初學者,經常會搞不清楚margin,background-color,background-image,padding,content,border之間的層次、關係和相互影響。這裡提供一張盒模型的3d示意圖,希望便於你的理解和記憶。

3.輔助一律用背景處理

儘管可以用直接插在內容中,但這是不推薦的。這裡的"輔助"是指那些不是作為頁面要表達的內容的一部分,而僅僅用於修飾、間隔、提醒的。例如:相簿中的、新聞中的,上面的3d盒模型都屬於內容的一部分,它們可以用元素直接插在頁面裡,而其它的類似logo,標題,列表字首都必須採用背景方式或者其他css方式顯示。

這樣做的原因有2點:

標準C語言第八天

c語言程式中可以使用分組的方式管理語句 每個語句分組叫做乙個函式。多函式執行模式有如下特點 整個程式的執行時間被分解成幾段,每段時間被分給乙個函式使用。任何兩個時間段不能互相重疊並且所有時間段必須連續。如果函式a在工作過程中把一段時間分配給函式 b使用,則函式 b在使用完所有時間之後必須把後面的時間...

開課第八天

開課第八天,今天因為遲到問題被老師訓了,呵呵,說實話是真的感覺前一周有點懶散鬆懈,今天被訓之後又感覺到了緊迫感,嗯,堅持就是勝利,加油。上午講題,下午講新知識,以下就是本寶寶吸收的新養料 方法 可以被稱作函式,也可以被稱作功能。1 main 是我們學習的第乙個簡單的方法,public static ...

彙編第八天

彙編形式目標 main proc push ebp mov ebp,esp 建立堆疊框架 push offset msg 匯入引數位址 call printf 呼叫函式 xor eax,eax 返回0 pop epb 扯掉框架 ret 0 返回主程式 main endp 結束 1.條件語句 cmp ...