Welcome! 登入 註冊
專區首頁 專區百科 專區論壇 專區部落格 專區地圖

Advanced

[CSS] Step-by-Step: 以清單(UL+LI)實作導覽列 (兼容IE6)

導覽列對於網頁設計來說,是一個非常重要的部分,敘述網站的導覽架構,並讓瀏覽者一眼看到並能認知到是可點選的導覽按鈕。

在整個網頁設計中,肩負著重要資訊的描述以及視覺注視的任務,不能搶過主要的視覺焦點,卻要能醒目及兼具設計質感,達到網頁設計的平衡。

以下則講解,透過CSS樣式,把清單(list)文字調整成導覽列使用的方法。我們的目標是作出下面這個形式的導覽列:



1. 基本語法(HTML部份)

1.A 清單(list)採用[color=#CC0066] <ul> 標籤定義清單的範圍[/color],並使用 [color=#CC0066]<li> 標籤定義個別項目[/color]:
<ul> <li>About</li> <li>Works</li> <li>Video</li> <li>Links</li> <li>Story</li> </ul>
1.B 加入超連結標籤 <a> 並寫入網址讓 List 具有導覽列功能:
<ul> <li><a href="index.html">About</a></li> <li><a href="works.html">Works</a></li> <li><a href="video.html">Video</a></li> <li><a href="links.html">Links</a></li> <li><a href="story.html">Story</a></li> </ul>
1.C 為導覽列加入 ID (#button),以供 CSS 風格設定
<ul id="button"> <li><a href="index.html">About</a></li> <li><a href="works.html">Works</a></li> <li><a href="video.html">Video</a></li> <li><a href="links.html">Links</a></li> <li><a href="story.html">Story</a></li> </ul>
預覽結果(底色與文字顏色另加):

IE6 / IE7 效果示意

IE8 / Chrome / Firefox 效果示意

觀察重點:
1. List 有預設的「圓點」標示。
2. 在 List 前後有預設的「邊距 MARGIN」(實際上的邊距值為「一行行高」:1 em)。

2. 加入 MARGIN: 0;

IE6 / IE7 效果示意


IE8 / Chrome / Firefox 效果示意


3. 加入 PADDING: 0;

IE6 / IE7 效果示意


IE8 / Chrome / Firefox 效果示意


至此兩組不同的瀏覽器效果開始統一。

4. 加入 LIST-STYLE: NONE;
#button{
  margin: 0;
  padding: 0;
  list-style: none;
}
預覽效果

5. 將 li 元素設定為向左浮動
#button{
  margin: 0;
  padding: 0;
  list-style: none;
}

#button li {
  float: left;
}
預覽效果


6. 設定 li 元素的寬與高
#button{
  margin: 0;
  padding: 0;
  list-style: none;
}

#button li {
  float: left;
  width: 170px;
  line-height: 2em;
}
預覽效果


1. CSS 部分


#button {        
        [color=#CC3300]/*文字設定*/[/color]
        font-weight: bolder;
        color: #FFF;
        font-size: 14px;
    
        [color=#993300]/*將內定的邊距清除*/[/color]
        margin: 0px;

        [color=#993300]/*將清單內定的內距清除(無清除,則左側會多出約40px,範例二可不用加這一項*/[/color]
        padding:0px;
        }

#button li {
  [color=#CC3300]/*高度設定:使用 line-height 設定可讓文字自動垂直置中*/[/color]
  line-height: 2em;

  [color=#CC3300]/*背景色設定*/[/color]
  background: dodgerBlue;
}

2. [color=#CC3300]1.改變底色的做法/文字居中排法[/color]



#button li {
           [color=#CC0099]/* 讓各個清單元素靠左對齊,由原本的垂直排列變成水平排列,形成水平清單 */[/color]
       float:left;

         [color=#CC0099]/* 設定清單文字範圍的寬度 */[/color]
       width:178px;
        
         [color=#CC0099]/* 去除清單文字前面的小點*/[/color]
       list-style-type:none;
                 
         [color=#CC0099]/* 讓清單文字居中對齊 */[/color]
       text-align:center;
         
           [color=#CC3300]/* 設定背景色,依個人喜好調整背景色,但要符合整設計風格 */[/color]
           background-color:#6E6E6E;

         [color=#CC3300]/* 設定字距為2px,非必要 */[/color]
         letter-spacing: 2px;
        
         [color=#CC3300]/* 設定左邊的白邊樣式,可依個人喜好調整 */[/color]
         border-left-width: 1px;
         border-left-style: solid;
         border-left-color: #FFF;
        
         [color=#CC3300]/* 右邊留白1像素 ,可依個人喜好調整*/[/color]
           margin-right:1px;
   }
                
#button li a {
         [color=#CC0099]/* 連結範圍充滿整個區塊 */[/color]
       display: block;
        
         [color=#CC0099]/* 單個連結範圍的框度和高度*/[/color]
         width: 180px;
         height:20px;
        
           [color=#CC3300]/* 設定連結範圍向上的內距,依狀況調整 */[/color]
         padding-top:2px;
        
         [color=#CC3300]/* 連結的文字設為白色以及無裝飾(無底線) ,依個人喜好調整背景色,但要符合整設計風格*/[/color]
         color: #FFF;
         text-decoration: none;
   }

#button li a:hover{
           [color=#993300]/* 設定滑鼠移過時,清單改變的底色設定 */[/color]
           background-color:#39919F;
}

完成範例
http://mepopedia.com/~jinjin/web/hw04-1/ (滑入底色變色及文字置中的導覽列)


[hr]


3. [color=#CC3300]2.改變文字顏色的做法[/color]


#button li {        
        float: left;
        list-style-type: none;
        letter-spacing: 2px;
        border-left-width: 1px;
        border-left-style: solid;
        border-left-color: #FFF;
        padding-left: 10px;
}
                
#button li a {
      display: block;
        width: 160px;
        height: 22px;
        padding-top:2px;
        color: #FFF;
        text-decoration: none;
}

#button li a:hover{
   /* 設定滑鼠移過時,改變文字顏色的設定 */
        color: #7CCBDC;
}

完成範例
http://mepopedia.com/~jinjin/web/hw04/ (滑入僅文字變色的導覽列)



Edited 18 time(s). Last edit at 11/07/2011 04:15PM by HP.
(編輯記錄)