當柳上原的風吹向天際的時候...

          真正的快樂來源于創造

            BlogJava :: 首頁 :: 聯系 :: 聚合  :: 管理
            368 Posts :: 1 Stories :: 201 Comments :: 0 Trackbacks
          通常,我們可以如下所示制作橫向菜單:
          #commonUsedDocumentContainerDiv ul{
              margin
          :0px;
              padding
          :0px;
              list-style-type
          :none;
              vertical-align
          :middle  ;
          }

          #commonUsedDocumentContainerDiv li a
          {
              width
          :130px;  
              height
          :75px;
              line-height
          :32px;
              
              font-family
          :"宋體","Tahoma"; 
              font-size
          :14px;   
              font-weight
          :bold;           
              color
          :#000000;
              
              text-decoration
          :none;
              text-align
          :left;  
              
              background
          :#ffffff;
          }

          #commonUsedDocumentContainerDiv li a:hover
          {
              width
          :130px;  
              height
          :75px;
              line-height
          :32px;
              
              font-family
          :"宋體","Tahoma"; 
              font-size
          :14px;   
              font-weight
          :bold;           
              color
          :#0000ff;
              
              text-decoration
          :none;
              text-align
          :left;  
              
              background
          :#ffffff;
          }

          這樣做,在FF或是ie8以上的版本中,都沒有問題,但是ie6有問題,具體上看來本來應該是一橫排的菜單變成了階梯狀,一下子就難看了。

          這是因為ie6對ul/li的解釋方式所致,要解決這個問題也很簡單,對li的樣式也進行設置就行了,如下的粗體部分:
          #commonUsedDocumentContainerDiv ul{
              margin
          :0px;
              padding
          :0px;
              list-style-type
          :none;
              vertical-align
          :middle  ;
          }

          #commonUsedDocumentContainerDiv li
          {
              float
          :left;
              display
          :block;
              
              width
          :130px;  
              height
          :75px;
              
              background
          :#ffffff;
          }


          #commonUsedDocumentContainerDiv li a
          {
              width
          :130px;  
              height
          :75px;
              line-height
          :32px;
              
              font-family
          :"宋體","Tahoma"; 
              font-size
          :14px;   
              font-weight
          :bold;           
              color
          :#000000;
              
              text-decoration
          :none;
              text-align
          :left;  
              
              background
          :#ffffff;
          }

          #commonUsedDocumentContainerDiv li a:hover
          {
              width
          :130px;  
              height
          :75px;
              line-height
          :32px;
              
              font-family
          :"宋體","Tahoma"; 
              font-size
          :14px;   
              font-weight
          :bold;           
              color
          :#0000ff;
              
              text-decoration
          :none;
              text-align
          :left;  
              
              background
          :#ffffff;
          }

          另外需要注意的是,li a和li a:hover中照樣可以設置display:block,如果li a 或者li a:hover 有背景還非得如此不可,這和網上流傳甚廣的方案不一樣,看來知識不能拿來就用,還需要自己嘗試一下。
          posted on 2012-02-14 15:31 何楊 閱讀(371) 評論(0)  編輯  收藏 所屬分類: CSS
          主站蜘蛛池模板: 湖北省| 新竹市| 呼伦贝尔市| 巴林左旗| 英德市| 安溪县| 刚察县| 临朐县| 囊谦县| 商都县| 枞阳县| 广河县| 沙雅县| 南安市| 凤台县| 南召县| 普宁市| 宜宾市| 确山县| 洛宁县| 高唐县| 佳木斯市| 镇巴县| 和田市| 洞口县| 韶山市| 五莲县| 库伦旗| 台湾省| 辰溪县| 嫩江县| 新兴县| 锡林浩特市| 门源| 韶关市| 镇康县| 镇江市| 赫章县| 元朗区| 汽车| 辽源市|