- 相關推薦
網頁布局排版的部分技巧
css樣式中的部分技巧
1. margin與padding縮寫規則
margin-top、margin-right、margin-bottom、margin-left分開設定各邊的邊界。 可縮寫為
1.四個都有且不同-順序為上、右、下、左邊界
如：DIV{margin:12px 15px 20px 16px;}
2.四個都有兩兩相同
上下同 左右同 可以縮寫為DIV{margin:12px 15px}即代表上下邊界為12px ，左右15px
上左同、下右同或者上右同、下左同此類情況還是要四個都寫
3.左右同 上下不同可以縮寫為DIV{margin:12px 15px 4px} 即代表上邊界是是12px，左右邊界都是15px，下邊界是4px.
2．字體的縮寫方法
font 設定字型的綜合屬性，其順序如下：
{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.不需要重復定義可繼承的值
CSS中，子元素自動繼承父元素的屬性值，象顏色、字體等，已經在父元素中定義過的，在子元素中可以直接繼承，不需要重復定義。但是要注意，瀏覽器可能用一些默認值覆蓋你的定義。
6..最近優先原則
如果對同一個元素的定義有多種，以最接近(最小一級)的定義為最優先
7.多重class定義
請看以下例子：
one{width:200px;background:#666;}
.two{border:10px solid #F00;}
最終的顯示效果是這個div既有#666的背景，也有10px的邊框
8.不需要給背景圖片路徑加引號
為了節省字節，我建議不要給背景圖片路徑加引號，因為引號不是必須的。
9.導入樣式的幾種方法：
1. 鏈入外部樣式表 在head之間
rel="stylesheet" type="text/css" media="all">
2.內部樣式表 將樣式寫入head之間
3. 導入外部樣式表
例中@import “mystyle.css”表示導入mystyle.css樣式表，注意使用時外部樣式表的路徑。方法和鏈入樣式表的方法很相似，但導入外部樣式表輸入方式更有優勢。實質上它相當于存在內部樣式表中的。注意：導入外部樣式表必須在樣式表的開始部分，在其他內部樣式表上面。4. 內嵌樣式
這是一個段落
5.在一個樣式表中嵌入另個樣式表 就在鏈入的樣式表上面加上這句話@import url("index201210.css");
10.在樣式中想要固定標題的長度，超出部分用省略號代替 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.對背景圖片做鏈接
.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
【網頁布局排版的部分技巧】相關文章：
網頁布局教案04-25
排版技巧和規則05-01
餐廳風水布局05-01
交房工作匯報(重新排版)01-17
文科畢業論文排版格式04-30
網頁的教案01-25
其他部分倒裝05-04