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

時(shí)間：2023-04-30 05:25:32 資料我要投稿

相關(guān)推薦

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.背景樣式的縮寫方法

背景的簡(jiǎn)寫：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.邊框的簡(jiǎn)寫：

比如：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)題的長(zhǎng)度，超出部分用省略號(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下有效(圖片垂直居中)*/

}