DIV+CSS網(wǎng)頁布局技巧

時(shí)間：2023-09-25 17:54:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-09-25 17:54:01 來源：網(wǎng)站運(yùn)營

DIV+CSS網(wǎng)頁布局技巧：DIV+CSS網(wǎng)頁布局技巧實(shí)例1：設(shè)置網(wǎng)頁整體居中的代碼

以前用表格布局時(shí)設(shè)置網(wǎng)頁居中非常方便，把表格對齊方式設(shè)置為居中就行了，就這么簡單，現(xiàn)在呢，用DIV+CSS樣式表控制，好像不是那么容易了，其實(shí)也很簡單，只不過方式不同而已。

<style>
#layout { width:778px; margin:0 auto; text-align:center;}
</style>
<div id="layout">標(biāo)準(zhǔn)之路http://www.aa25.cn</div>

　　請看這段代碼，寬度為適合800×600分辨率瀏覽器的寬度，margin:0 auto; 這句代碼就是讓居中了，意思是外邊距上下設(shè)置為0，左右設(shè)為自動(dòng)。這樣它就居中了。

　　那么可能你要問了，text-align:center;為什么還要讓內(nèi)容居中呢？呵呵，別著急，這句是為了適應(yīng)IE6以下版本的瀏覽器而加的，IE6以下對margin:0 auto;不能解析為居中，所以用這種方式來補(bǔ)救，以下在設(shè)計(jì)內(nèi)容時(shí)再用 text-align:left;就可以了。

　　注：margin和padding的值的順序?yàn)轫槙r(shí)針上右下左，如margin:1px 2px 3px 4px;還可以縮寫為上下、左右，如本例，如果為margin:0px;則是各邊都為0

DIV+CSS網(wǎng)頁布局技巧實(shí)例2：設(shè)置容器中的內(nèi)容垂直居中

如實(shí)例1設(shè)置網(wǎng)頁整體居中的代碼中內(nèi)容是居容器的頂部的，而在表格布局時(shí)默認(rèn)是垂直居中的，當(dāng)我們需要垂直居中的時(shí)候該怎么辦呢？別害怕，跟我來，也是比較簡單的，只用設(shè)置容器內(nèi)的行高就行了。

line-height:500px;

提示：可以先修改部分代碼后再運(yùn)行

這是一種方法，另外和種方法就是設(shè)置的它內(nèi)邊距padding了，自己可以試試喲～～

DIV+CSS網(wǎng)頁布局技巧實(shí)例3：設(shè)置層的透明度

有時(shí)候我們需要用到層的透明度，把下邊的背景透出來，如下圖：






這種半透明的形式在blog上應(yīng)用比較廣泛，那么這種效果是怎么做出來的呢？用JS，NO,NO，既然我們是CSS布局教程，那么就盡量用CSS來解決問題！

filter: alpha(opacity=70);
opacity: 0.7;

把這兩句代碼加入到要實(shí)現(xiàn)半透明層的CSS樣式表里即可，簡單吧??！
注：70和0.7的值可改為你需要的

DIV+CSS網(wǎng)頁布局技巧實(shí)例4：使用css縮寫

使用縮寫可以幫助減少你CSS文件的大小，更加容易閱讀。css縮寫的主要規(guī)則請參看《常用css縮寫語法總結(jié)》，css縮寫的主要規(guī)則如下：

顏色

16進(jìn)制的色彩值，如果每兩位的值相同，可以縮寫一半，例如：
#000000可以縮寫為#000;#336699可以縮寫為#369;

注意:在同一個(gè)CSS配置節(jié)中，不要交錯(cuò)使用全寫和縮寫的顏色配置，在系統(tǒng)資源極低時(shí)，會導(dǎo)致瀏覽器渲染失敗。

盒尺寸

通常有下面四種書寫方法:

property:value1; 表示所有邊都是一個(gè)值value1；

property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2

property:value1 value2 value3; 表示top的值是value1，right和left的值是value2，bottom的值是value3

property:value1 value2 value3 value4; 四個(gè)值依次表示top,right,bottom,left

方便的記憶方法是順時(shí)針，上右下左。具體應(yīng)用在margin和padding的例子如下：
margin:1em 0 2em 0.5em;

........