| 
   
步驟三 最后要做的就是再添加點樣式,讓頁面好看點。從目錄開始吧。 
#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 中,應該有 border-radius 屬性來設定圓角的半徑(可參考 CSS3之旅: border-radius(圓角) – 糖伴西紅柿)。現在的 流行的瀏覽器都還不支持,除非用 -moz(Molilla Firefox) 或者 -webit(Safari/Webkit) 前綴. 
  
兼容性注意事項 如你所想,IE 是唯一添麻煩的瀏覽器。 #floater 必須指定寬度,否則在任意版本 IE 中,它都啥也不干 IE 6 中目錄被周圍太多的空間打斷 IE 8 有多余空間(作者遺漏)
  
上一頁  [1] [2] [3] [4] [5] [6] 下一頁   |