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

          真正的快樂來源于創造

            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
          主站蜘蛛池模板: 塘沽区| 阳原县| 克什克腾旗| 青冈县| 宜昌市| 和平县| 枞阳县| 林西县| 遵义市| 南京市| 通江县| 长宁区| 阿坝县| 玉门市| 靖州| 舒兰市| 泗水县| 肇庆市| 株洲市| 甘孜县| 大荔县| 工布江达县| 岫岩| 礼泉县| 通海县| 邹城市| 长兴县| 民勤县| 富民县| 奉贤区| 普洱| 河南省| 武安市| 遂溪县| 克山县| 浦北县| 临猗县| 郴州市| 塔城市| 赤峰市| 金湖县|