|
步驟三
最后要做的就是再添加點(diǎn)樣式，讓頁(yè)面好看點(diǎn)。從目錄開始吧。
#nav ul {
list-style:none;
padding:0; margin:20px 0 0 0; text-indent:0;
}
#nav li {
padding:0; margin:3px;
}
#nav li a {
display:block; background-color:#e8e8e8;
padding:7px; margin:0;
text-decoration:none; color:#000;
border-bottom:1px solid #bbb;
text-align:right;
}
#nav li a::after {
content:'»'; color:#aaa; font-weight:bold;
display:inline; float:right;
margin:0 2px 0 5px;
}
#nav li a:hover, #nav li a:focus {
background:#f8f8f8;
border-bottom-color:#777;
}
#nav li a:hover::after {
margin:0 0 0 7px; color:#f93;
}
#nav li a:active {
padding:8px 7px 6px 7px;
}
需要注意的是 #centred 的圓角。 CSS3 中，應(yīng)該有 border-radius 屬性來設(shè)定圓角的半徑(可參考 CSS3之旅: border-radius(圓角) - 糖伴西紅柿)。現(xiàn)在的流行的瀏覽器都還不支持，除非用 -moz(Molilla Firefox) 或者 -webit(Safari/Webkit) 前綴.
兼容性注意事項(xiàng)
如你所想，IE 是唯一添麻煩的瀏覽器。
- #floater 必須指定寬度，否則在任意版本 IE 中，它都啥也不干
- IE 6 中目錄被周圍太多的空間打斷
- IE 8 有多余空間(作者遺漏)
更多的想法
利用居中的網(wǎng)頁(yè)可以做很多有意思的事情。我在重新設(shè)計(jì) SWFObject Generator 2.0 (使用 SWFObject2.0 生成代碼)使用了這個(gè)想法。這里有另外的一個(gè)想法。
資料
以下是我參考的一些資料，推薦閱讀。
Understanding vertical-align, or “How (Not) To Vertically Center Content”
Vertical centering using CSS
Vertical Centering in CSS
糖伴西紅柿說：
水平居中經(jīng)常用，其實(shí)垂直居中也很有用的。平時(shí)用的最多的應(yīng)該是方法五了，算是個(gè)小技巧吧。
原文：http://www.qianduan.net/?p=5654
譯自：http://blog.themeforest.net/tutorials/vertical-centering-with-css/
本文鏈接：http://m.95time.cn/tech/web/2009/6470.asp 
出處：前端觀察
責(zé)任編輯：bluehearts
上一頁(yè) CSS實(shí)現(xiàn)垂直居中的5種方法 [4] 下一頁(yè)
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 5 頁(yè) CSS實(shí)現(xiàn)垂直居中的5種方法 [5]
