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