如何用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像素且為紅色的實(shí)線框
當(dāng)設(shè)置好一個具體的線框 我們需要的就是將內(nèi)容填充到所設(shè)置的內(nèi)容框體里
background-image或background-color就是將框內(nèi)填充可見的元素
background-image意為背景圖片 后接URL地址連接
background-color意為背景顏色 兩者使用都較為簡單 沒有特別需要注意的事項(xiàng)
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，不過其包含塊是視窗本身。
運(yùn)用position元素需要注意元素是相對于視窗的哪一個點(diǎn)進(jìn)行位移
float:
此元素可將元素脫離到原來的文檔流
可用值有
float-left
float-right
可實(shí)現(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è)計(jì)中CSS布局調(diào)試的十個有效的方法03-03
網(wǎng)頁設(shè)計(jì)css教學(xué)03-23
網(wǎng)頁的排版與布局05-26
網(wǎng)頁布局方式07-16
網(wǎng)頁布局基礎(chǔ)08-10