|
但用CSS也可以達到同樣的目的,讓它們顯示效果一致。
#box { width: 150px }
#box div { border: 5px; padding: 20px }
這樣調(diào)用:
。糳iv id=”box”><div>…</div></div>
這樣,不管什么瀏覽器,寬度都是150點了。
七、CSS設(shè)置塊元素水平居中對齊
如果想做個固定寬度的網(wǎng)頁并且想讓網(wǎng)頁水平居中的話,通常是這樣:
#content { width: 700px; margin: 0 auto }
你會使用 <div id=”content”> 來圍上所有元素。這很簡單,但不夠好,IE6之前版本會顯示不出這種效果。改CSS如下:
body { text-align: center } #content { text-align: left; width: 700px; margin: 0 auto }
這會把網(wǎng)頁內(nèi)容都居中,所以在Content中又加入了:text-align: left 。
八、用CSS來處理垂直對齊
垂直對齊用表格可以很方便地實現(xiàn),設(shè)定表格單元 vertical-align: middle 就可以了。但對CSS來說這沒用。如果你想設(shè)定一個導(dǎo)航條是2em高,而想讓導(dǎo)航文字垂直居中的話,設(shè)定這個屬性是沒用的。
CSS方法是什么呢?對了,把這些文字的行高設(shè)為 2em:line-height: 2em ,這就可以了。
九、CSS在容器內(nèi)的定位
CSS的一個好處是可以把一個元素任意定位,在一個容器內(nèi)也可以。比如對這個容器:
#container { position: relative }
這樣容器內(nèi)所有的元素都會相對定位,可以這樣用:
。糳iv id=”container”><div id=”navigation”>…</div></div>
如果想定位到距左30點,距上5點,可以這樣:
#navigation { position: absolute; left: 30px; top: 5px }
當然,你還可以這樣:
margin: 5px 0 0 30px
注意4個數(shù)字的順序是:上、右、下、左。當然,有時候定位的方法而不是邊距的方法更好些。
十、直通到屏幕底部的背景色
在垂直方向是進行控制是CSS所不能的。如果你想讓導(dǎo)航欄和內(nèi)容欄一樣直通到頁面底部,用表格是很方便的,但如果只用這樣的CSS:
#navigation { background: blue; width: 150px }
較短的導(dǎo)航條是不會直通到底部的,半路內(nèi)容結(jié)束時它就結(jié)束了。該怎么辦呢?
不幸的是,只能采用欺騙的手段了,給這較短的一欄加上個背景圖,寬度和欄寬一樣,并讓它的顏色和設(shè)定的背景色一樣。
body { background: url(blue-image.gif) 0 0 repeat-y }
此時不能用em做單位,因為那樣的話,一旦讀者改變了字體大小,這個花招就會露餡,只能使用px。
|
|
【收藏】【打印】【進入論壇】 |
|
|
|
|
|
|
|