如何用css進(jìn)行網(wǎng)頁布局

　　要使網(wǎng)頁頁面美觀 我們需要對網(wǎng)頁進(jìn)行大小 、背景圖片(或背景顏色)、以及網(wǎng)頁內(nèi)的文字和網(wǎng)頁的所屬小的版塊位置的設(shè)置

　　1.網(wǎng)頁基本屬性的構(gòu)成

　　border:延用HTML中對外框的設(shè)置 利用border可以對頁面的框體進(jìn)行設(shè)置 例如框體的線條樣式 線條顏色 以及線條的像素大小

　　eg: 代碼所示為一個1像素且為紅色的實線框

　　當(dāng)設(shè)置好一個具體的線框 我們需要的就是將內(nèi)容填充到所設(shè)置的內(nèi)容框體里

　　background-image或background-color就是將框內(nèi)填充可見的元素

　　background-image意為背景圖片 后接URL地址連接

　　background-color意為背景顏色 兩者使用都較為簡單 沒有特別需要注意的事項

　　text-indent 使用此屬性可以將文本的間距縮小 后接像素值 (改變的是瀏覽器默認(rèn)的文字間隙)

　　使文字美觀 還需要對文字的字體進(jìn)行設(shè)置

　　需要加入的屬性是font-family 將所要的字體的加在font-family后面 如果要導(dǎo)入外部字體 則需要加入屬性font-face

　　設(shè)置文字與邊框的距離需要設(shè)置文字的內(nèi)外邊框 padding 和margin

　　padding:

　　其基本屬性

　　padding-top

　　padding-right

　　padding-botton

　　padding-left

　　margin:

　　其基本屬性

　　margin-top

　　margin-right

　　margin-bottom

　　margin-left

　　使用margin來設(shè)置文字與邊框的距離可以在很大程度上減少定位的難題

　　2、定位概述

　　需要理解的是CSS是在重疊的布局中發(fā)揮作用 所以把頁面的所有元素視為框

　　而區(qū)分這些框的是塊級元素和行內(nèi)元素

　　而定位就是利用塊級和行級元素的特性對頁面進(jìn)行排版、來達(dá)到使你能夠自由移動你想要移動的區(qū)域 讓元素出現(xiàn)在合適的位置

　　position:

　　包含的元素有：

　　static:

　　元素框正常生成。塊級元素生成一個矩形框，作為文檔流的一部分，行內(nèi)元素則會創(chuàng)建一個或多個行框，置于其父元素中。

　　relative:

　　元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所占的空間仍保留。

　　absolute:

　　元素框從文檔流完全刪除，并相對于其包含塊定位。包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關(guān)閉，就好像元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。

　　fixed:

　　元素框的表現(xiàn)類似于將 position 設(shè)置為 absolute，不過其包含塊是視窗本身。

　　運用position元素需要注意元素是相對于視窗的哪一個點進(jìn)行位移

　　float:

　　此元素可將元素脫離到原來的文檔流

　　可用值有

　　float-left

　　float-right

　　可實現(xiàn)將文字圍繞圖片、創(chuàng)建水平菜單、段落字母浮動左側(cè)的效果

　　clear:

　　清除

　　規(guī)定了哪一側(cè)不允許元素漂浮

【如何用css進(jìn)行網(wǎng)頁布局】相關(guān)文章：

Dreamweaver網(wǎng)頁制作之CSS布局規(guī)則05-04

學(xué)習(xí)Dreamweaver的CSS網(wǎng)頁布局ul和li08-05

如何用Dreamweaver為網(wǎng)頁進(jìn)行優(yōu)化07-06

網(wǎng)頁設(shè)計中CSS布局調(diào)試的十個有效的方法03-03

CSS網(wǎng)頁設(shè)計技巧08-14

網(wǎng)頁設(shè)計css教學(xué)03-23

網(wǎng)頁的排版與布局05-26

網(wǎng)頁布局方式07-16

網(wǎng)頁布局基礎(chǔ)08-10