一個自動置中的導航條執行個體與相關問題 DIV+CSS_CSS/HTML
來源:互聯網
上載者:User
這是我剛剛作的一個導航條,為了讓那四個LINK置中,我這樣作了,但作完後發現了很多的問題,寫出來和大家分享一下!
首先我們先來看一下這個導航條!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>test zishu</title> <style> /*zishu.cn*/ *{ margin:0; padding:0;} body{ font-size:12px; font-family:Verdana, "宋體", Arial; margin:100px 0;} a:link,a:visited{color:#000; text-decoration: none;} a:hover,a:active{color:#000;text-decoration: none;background-color: #FEFC6E;} #nav{height:24px; border-bottom:1px solid #D28A05; border-top:1px solid #D28A05;background-image: url(http://www.zishu.cn/attachments/month_0609/j2006912180.jpg);background-color: #FF9900; text-align:center;} #nav li{ display:inline;border-right:1px solid #C97802;border-left:1px solid #C97802;margin-right:-1px; padding:6px 15px 5px 15px; line-height:25px; border-bottom:0px none; border-top:0px none;} #nav li a{margin:1px;} p{ margin:50px 0; text-align:center; } </style> </head> <body> <ul><li>首 頁</li><li>發布資訊</li><li>我的客齊集</li><li>幫 助</li></ul> <p>www.zishu.cn 子鼠 2006-09-11 淩晨</p> </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
問題:
1、空格BUG出現我FIREFOX中,不知道為什麼,如果把LI分不寫在同一行,問題就出來了,你可以在上邊運行代碼中試一下!
2、IE和FIREFOX的微小區別(看),如果你沒有發現這小小的區別,你就不會在CSS中寫成padding:6px 15px 5px 15px; 也就永遠不會把中間的豎線和上下兩條線連在一起!(這其中IE6和IE7還有更微小的區別);
3、#nav li a{margin:1px;}這行是不是沒有用?如果你這樣認為你就刪了試一下,看行不行!
4、頁面在縮放到一定小時會折行,FIREFOX中用min-width解決,而IE中min-width不認識,所以只有用:expression((documentElement.clientWidt.....來解決了!我在上邊的代碼中沒有加,如果你不想折行就把上邊#nav這行改成:
程式碼
複製代碼 代碼如下:
#nav{height:24px; border-bottom:1px solid #D28A05; border-top:1px solid #D28A05;background-image: url(nav_bg.jpg);background-color: #FF9900; text-align:center;min-width:400px;width: expression((documentElement.clientWidth < 400) ? "400px" : "auto" );}
基本就這行多問題,建議自已作一下,這樣你會發現特別多的問題!
另外:這篇BLOG會在FIREFOX中很難看,你就湊合看吧!
再另外:我寫的難免有問題,如果真有,你就指出來,我會非常高興的!