網(wǎng)頁布局排版的部分技巧

css樣式中的部分技巧

1. margin與padding縮寫規(guī)則

margin-top、margin-right、margin-bottom、margin-left分開設(shè)定各邊的邊界。 可縮寫為

1.四個(gè)都有且不同-順序?yàn)樯�、右、下、左邊�?/p>

如：DIV{margin:12px 15px 20px 16px;}

2.四個(gè)都有兩兩相同

上下同 左右同 可以縮寫為DIV{margin:12px 15px}即代表上下邊界為12px ，左右15px

上左同、下右同或者上右同、下左同此類情況還是要四個(gè)都寫

3.左右同 上下不同可以縮寫為DIV{margin:12px 15px 4px} 即代表上邊界是是12px，左右邊界都是15px，下邊界是4px.

2．字體的縮寫方法

font 設(shè)定字型的綜合屬性，其順序如下：

{font-style font-variant font-weight font-size /line-height font-family;} P{bold 12pt/14pt impact,Arial;}

3.背景樣式的縮寫方法

背景的簡寫：background-color:#FFFFFF;

background-image:url(background.gif); background-repeat:no-repeat; background-attachment:fixed; background-position:0 0;

可以寫成：background:#FFF url(background.gif) no-repeat fixed 0 0;

4.邊框的簡寫：

比如：border-width:1px; border-style:solid; border-color:#FFFFFF; 可以寫成：border:1px solid :#FFFFFF;

5.不需要重復(fù)定義可繼承的值

CSS中，子元素自動(dòng)繼承父元素的屬性值，象顏色、字體等，已經(jīng)在父元素中定義過的，在子元素中可以直接繼承，不需要重復(fù)定義。但是要注意，瀏覽器可能用一些默認(rèn)值覆蓋你的定義。

6..最近優(yōu)先原則

如果對(duì)同一個(gè)元素的定義有多種，以最接近(最小一級(jí))的定義為最優(yōu)先

7.多重class定義

請(qǐng)看以下例子：

one{width:200px;background:#666;}

.two{border:10px solid #F00;}

最終的顯示效果是這個(gè)div既有#666的背景，也有10px的邊框

8.不需要給背景圖片路徑加引號(hào)

為了節(jié)省字節(jié)，我建議不要給背景圖片路徑加引號(hào)，因?yàn)橐��?hào)不是必須的。

9.導(dǎo)入樣式的幾種方法：

1. 鏈入外部樣式表 在head之間

rel="stylesheet" type="text/css" media="all">

2.內(nèi)部樣式表 將樣式寫入head之間

3. 導(dǎo)入外部樣式表

例中@import “mystyle.css”表示導(dǎo)入mystyle.css樣式表，注意使用時(shí)外部樣式表的路徑。方法和鏈入樣式表的方法很相似，但導(dǎo)入外部樣式表輸入方式更有優(yōu)勢(shì)。實(shí)質(zhì)上它相當(dāng)于存在內(nèi)部樣式表中的。注意：導(dǎo)入外部樣式表必須在樣式表的開始部分，在其他內(nèi)部樣式表上面。

4. 內(nèi)嵌樣式

這是一個(gè)段落

5.在一個(gè)樣式表中嵌入另個(gè)樣式表 就在鏈入的樣式表上面加上這句話@import url("index201210.css");

10.在樣式中想要固定標(biāo)題的長度，超出部分用省略號(hào)代替 list1{width:300px;overflow:hidden;

white-space:nowrap;text-overflow:ellipsis; }

11.高度為32px的圖片讓其居中的方法

.m_line{

float:left; width:1px; height:32px;

line-height:32px; /*ff下有效(圖片垂直居中)*/ }

.m_line img{

margin-top:expression(( 32 - this.height ) / 2); /*ie下有效(圖片垂直居中)*/

}

12.對(duì)背景圖片做鏈接

.logo{background:url(nav2.gif) no-repeat}

.logo{width:129px;height:46px;float:left;margin-top:4px;margin-left:-7px}

13.

7 8兼容

14.空白影片剪輯this.loadMovie("menu.swf","this");

jz123.cn

【網(wǎng)頁布局排版的部分技巧】相關(guān)文章：

網(wǎng)頁布局教案04-25

排版技巧和規(guī)則05-01

許理平：談?wù)勱P(guān)鍵詞在網(wǎng)頁中的布局 -電腦資料04-07

餐廳風(fēng)水布局05-01

大學(xué)英語四六級(jí)復(fù)合式聽寫及綜合部分的答題技巧04-26

齊人攫金：現(xiàn)貨投資技巧中長線單如何進(jìn)行布局？05-01

交房工作匯報(bào)(重新排版)01-17

文科畢業(yè)論文排版格式04-30

網(wǎng)頁的教案01-25

其他部分倒裝05-04