步驟三 最后要做的就是再添加點樣式,讓頁面好看點。從目錄開始吧。
#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(圓角) – 糖伴西紅柿),F(xiàn)在的 流行的瀏覽器都還不支持,除非用 -moz(Molilla Firefox) 或者 -webit(Safari/Webkit) 前綴.

兼容性注意事項 如你所想,IE 是唯一添麻煩的瀏覽器。 #floater 必須指定寬度,否則在任意版本 IE 中,它都啥也不干 IE 6 中目錄被周圍太多的空間打斷 IE 8 有多余空間(作者遺漏)
上一頁 [1] [2] [3] [4] [5] [6] 下一頁 |