- 相關(guān)推薦
如何用css進(jìn)行網(wǎng)頁(yè)布局
要使網(wǎng)頁(yè)頁(yè)面美觀 我們需要對(duì)網(wǎng)頁(yè)進(jìn)行大小 、背景圖片(或背景顏色)、以及網(wǎng)頁(yè)內(nèi)的文字和網(wǎng)頁(yè)的所屬小的版塊位置的設(shè)置
1.網(wǎng)頁(yè)基本屬性的構(gòu)成
border:延用HTML中對(duì)外框的設(shè)置 利用border可以對(duì)頁(yè)面的框體進(jìn)行設(shè)置 例如框體的線條樣式 線條顏色 以及線條的像素大小
eg: 代碼所示為一個(gè)1像素且為紅色的實(shí)線框
當(dāng)設(shè)置好一個(gè)具體的線框 我們需要的就是將內(nèi)容填充到所設(shè)置的內(nèi)容框體里
background-image或background-color就是將框內(nèi)填充可見(jiàn)的元素
background-image意為背景圖片 后接URL地址連接
background-color意為背景顏色 兩者使用都較為簡(jiǎn)單 沒(méi)有特別需要注意的事項(xiàng)
text-indent 使用此屬性可以將文本的間距縮小 后接像素值 (改變的是瀏覽器默認(rèn)的文字間隙)
使文字美觀 還需要對(duì)文字的字體進(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來(lái)設(shè)置文字與邊框的距離可以在很大程度上減少定位的難題
2、定位概述
需要理解的是CSS是在重疊的布局中發(fā)揮作用 所以把頁(yè)面的所有元素視為框
而區(qū)分這些框的是塊級(jí)元素和行內(nèi)元素
而定位就是利用塊級(jí)和行級(jí)元素的特性對(duì)頁(yè)面進(jìn)行排版、來(lái)達(dá)到使你能夠自由移動(dòng)你想要移動(dòng)的區(qū)域 讓元素出現(xiàn)在合適的位置
position:
包含的元素有：
static:
元素框正常生成。塊級(jí)元素生成一個(gè)矩形框，作為文檔流的一部分，行內(nèi)元素則會(huì)創(chuàng)建一個(gè)或多個(gè)行框，置于其父元素中。
relative:
元素框偏移某個(gè)距離。元素仍保持其未定位前的形狀，它原本所占的空間仍保留。
absolute:
元素框從文檔流完全刪除，并相對(duì)于其包含塊定位。包含塊可能是文檔中的另一個(gè)元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會(huì)關(guān)閉，就好像元素原來(lái)不存在一樣。元素定位后生成一個(gè)塊級(jí)框，而不論原來(lái)它在正常流中生成何種類(lèi)型的框。
fixed:
元素框的表現(xiàn)類(lèi)似于將 position 設(shè)置為 absolute，不過(guò)其包含塊是視窗本身。
運(yùn)用position元素需要注意元素是相對(duì)于視窗的哪一個(gè)點(diǎn)進(jìn)行位移
float:
此元素可將元素脫離到原來(lái)的文檔流
可用值有
float-left
float-right
可實(shí)現(xiàn)將文字圍繞圖片、創(chuàng)建水平菜單、段落字母浮動(dòng)左側(cè)的效果
clear:
清除
規(guī)定了哪一側(cè)不允許元素漂浮
【如何用css進(jìn)行網(wǎng)頁(yè)布局】相關(guān)文章：
Dreamweaver網(wǎng)頁(yè)制作之CSS布局規(guī)則11-25
網(wǎng)頁(yè)設(shè)計(jì)css教學(xué)02-07
CSS網(wǎng)頁(yè)設(shè)計(jì)技巧03-27
CSS讓網(wǎng)頁(yè)設(shè)計(jì)簡(jiǎn)單的方法12-11
網(wǎng)頁(yè)設(shè)計(jì)的布局12-06