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