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

Advanced

Change History

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

討論區清單 文章列表
Changed By: HP
Change Date: November 07, 2011 04:15PM

[CSS] Step-by-Step: 以清單(UL+LI)實作導覽列 (兼容IE6)
導覽列對於網頁設計來說，是一個非常重要的部分，敘述網站的導覽架構，並讓瀏覽者一眼看到並能認知到是可點選的導覽按鈕。

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

以下則講解，透過CSS樣式，把清單（list）文字調整成導覽列使用的方法。我們的目標是作出下面這個形式的導覽列：
<style>#phorum #btn li {float:left; border-left: 1px solid white; width: 170px; text-align: center;} #phorum li a {display: block;} #phorum li a:hover {background: gray; color: white;}</style>
<ul id="btn" style="list-style-type: none; padding: 0px; margin-left: 0; background: dodgerblue; color:white; min-width: 350px; line-height: 2em; height: 2em;"> <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>

<b>1. 基本語法（HTML部份）</b>

1.A 清單（list）採用<b>[color=#CC0066] &lt;ul> 標籤定義清單的範圍[/color]</b>，並使用 [color=#CC0066]<b>&lt;li> 標籤定義個別項目</b>[/color]：
<xmp><ul>
<li>About</li>
<li>Works</li>
<li>Video</li>
<li>Links</li>
<li>Story</li>
</ul>
</xmp>

1.B 加入超連結標籤 &lt;a> 並寫入網址讓 List 具有導覽列功能：
<xmp><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></xmp>

1.C 為導覽列加入 ID (#button)，以供 CSS 風格設定
<xmp><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></xmp>

預覽結果（底色與文字顏色另加）：
<style>#phorum ul{background: dodgerblue; color:dudgerblue;} #phorum li a {color:white;}</style>
IE6 / IE7 效果示意
<div style="border: 1px dodgerBlue solid"><ul style="list-style: outside; padding: 0; margin-left: 30pt;"><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></div>

IE8 / Chrome / Firefox 效果示意
<div style="border: 1px dodgerBlue solid"><ul style="padding-left: 40px; margin-left:0;"><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></div>

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

<b>2. 加入 MARGIN: 0; </b>

IE6 / IE7 效果示意
<ul style="margin:0; padding: 0;"><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>

IE8 / Chrome / Firefox 效果示意
<ul style="margin:0; padding-left: 40px;"><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>

<b>3. 加入 PADDING: 0; </b>

IE6 / IE7 效果示意
<ul style="margin:0; padding: 0;"><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>

IE8 / Chrome / Firefox 效果示意
<ul style="margin:0; padding: 0;"><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>

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

<b>4. 加入 LIST-STYLE: NONE; </b>
<pre>#button ul{
margin: 0;
padding: 0;
list-style: none;
}</pre>
預覽效果
<ul style="margin:0; padding: 0; list-style: none;"><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>
<b>5. 將 li 元素設定為向左浮動</b>
<pre>#button ul{
margin: 0;
padding: 0;
list-style: none;
}

#button li {
float: left;
}</pre>
預覽效果
<style>#phorum ul.button {margin:0; padding: 0; list-style: none;} #phorum ul.button li {float:left; background: dodgerBlue;}</style><ul class="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>
ef="video.html">Video</a></li><li><a href="links.html">Links</a></li><li><a href="story.html">Story</a></li></ul>
 list-style: none;"><li><a href=<pre>#button ul{
"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>
<b>5. 將 li 元素設定為向左浮動</b>
<pre>#button{
margin: 0;
padding: 0;
list-style: none;
}

#button li {
float: left;
}</pre>
預覽效果
<style>#phorum ul.button {margin:0; padding: 0; list-style: none;} #phorum ul.button li {float:left; background: dodgerBlue;}</style><pre>#button {
[color=#CC3300]/*高度設定*/[/color]
height: 22px;

 {
class="button"><li><a href="index.html">About</a></li><li><a href="works.html">Works</a
[color=#CC3300]/*背景色設定*/[/color]
　　 background-color:#6E6E6E;
></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>

<b>6. 設定 li 元素的寬與高</b>
<
ne-height: 2em;

[color=#CC3300]/*背景色設定*/[/color]
background: dodgerBlue;
};
width: 170px;
line-height: 2em;
}</pre>
預覽效果
<style>#phorum ul.step6 li {width: 170px; line-height: 2em;}</style><ul class="button step6"><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>

<h2>CSS 部分</h2>
<pre>#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;
}</pre>

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

<pre>
#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;
}

</pre>

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


[hr]


<h2><b>[color=#CC3300]2.改變文字顏色的做法[/color]</b></h2>
<pre>
#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;
}

</pre>

<b>完成範例</b>
http://mepopedia.com/~jinjin/web/hw04/　（滑入僅文字變色的導覽列）
Changed By: HP
Change Date: November 07, 2011 04:10PM

[CSS] Step-by-Step: 以清單(UL+LI)實作導覽列 (兼容IE6)
導覽列對於網頁設計來說，是一個非常重要的部分，敘述網站的導覽架構，並讓瀏覽者一眼看到並能認知到是可點選的導覽按鈕。

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

以下則講解，透過CSS樣式，把清單（list）文字調整成導覽列使用的方法。我們的目標是作出下面這個形式的導覽列：
<style>#phorum #btn li {float:left; border-left: 1px solid white; width: 170px; text-align: center;} #phorum li a {display: block;} #phorum li a:hover {background: gray; color: white;}</style>
<ul id="btn" style="list-style-type: none; padding: 0px; margin-left: 0; background: dodgerblue; color:white; min-width: 350px; line-height: 2em; height: 2em;"> <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>

<b>1. 基本語法（HTML部份）</b>

1.A 清單（list）採用<b>[color=#CC0066] &lt;ul> 標籤定義清單的範圍[/color]</b>，並使用 [color=#CC0066]<b>&lt;li> 標籤定義個別項目</b>[/color]：
<xmp><ul>
<li>About</li>
<li>Works</li>
<li>Video</li>
<li>Links</li>
<li>Story</li>
</ul>
</xmp>

1.B 加入超連結標籤 &lt;a> 並寫入網址讓 List 具有導覽列功能：
<xmp><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></xmp>

預覽結果（底色與文字顏色另加）：
<style>#phorum ul{background: dodgerblue; color:dudgerblue;} #phorum li a {color:white;}</style>
IE6 / IE7 效果示意
<div style="border: 1px dodgerBlue solid"><ul l C 為導覽列加入 ID (#button)，以供 CSS 風格設定
<xmp><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></xmp>

預覽結果（底色與文字顏色另加）：
<style>#phorum ul{background: dodgerblue; color:dudgerblue;} #phorum li a {color:white;}</style>
IE6 / IE7 效果示意
<div style="border: 1px dodgerBlue solid"><ul style="list-style: outside; padding: 0; margin-left: 30pt;"><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">S預覽效果：

IE6 / IE7
<ul style="margin:0; padding: 0;"><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>

IE8 / Chrome / Firefox
orks.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>

IE8 / Chrome / Firefox 效果示意
</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></div>

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

<b>2. 加入 MARGIN: 0; 預覽效果：

IE6 / IE7
/ IE7 效果示意
果示意
<ul style="margin:0; padding: 0;"><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>

IE8 / Chrome
 效果示意
果示意
<ul style="margin:0; padding-left: 40px;"><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">Sto<b>3. 為導覽列加入 ID，以供 CSS 風格設定</b>

特別注意，不需在 &lt;ul> 外再加上 &lt;div>。直接在 &lt;ul> 內設定 id 即可。

<xmp><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></xmp>
<b>至此兩組不同的瀏覽器效果開始統一。</b>

<b>4. 加入 LIST-STYLE: NONE; </b>
<pre>#button ul{
margin: 0;
padding: 0;
list-style: none;
}</pre>
預覽效果
<ul style="margin:0; padding: 0; list-style: none;"><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>
<b>5. 將 li 元素設定為向左浮動</b>
<pre>#button ul{
margin: 0;
padding: 0;
list-style: none;
}

#button li {
float: left;
}</pre>
預覽效果
<style>#phorum ul.button {margin:0; padding: 0; list-style: none;} #phorum ul.button li {float:left; background: dodgerBlue;}</style><ul class="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>

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

#button li {
float: left;
width: 170px;
line-height: 2em;
}</pre>
預覽效果
<style>#phorum ul.step6 li {width: 170px; line-height: 2em;}</style><ul class="button step6"><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>
o</a></li><li<style>#phorum #button li {float:left;}</style>
<ul id="button" style="list-style-type: none; background: dodgerblue; color:white;"> <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>
><a href="links.html">Links</a></li><li><a href="story.html">Story</a></li></ul>
list-style: none;"><li><a href=<pre>#button ul{
"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>
<b>5. 將 li 元素設定為向左浮動</b>
<pre>#button{
margin: 0;
padding: 0;
list-style: none;
}

#button li {
float: left;
}</pre>
預覽效果
<style>#phorum ul.button {margin:0; padding: 0; list-style: none;} #phorum ul.button li {float:left; background: dodgerBlue;}</style><pre>#button {
[color=#CC3300]/*高度設定*/[/color]
height: 22px;

class="button"><li><a href="index.html">About</a></li><li><a href="works.html">Works</a
[color=#CC3300]/*背景色設定*/[/color]
　　 background-color:#6E6E6E;
></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>

<b>6. 設定 li 元素的寬與高</b>
<
;
width: 170px;
line-height: 2em;
}</pre>
預覽效果
<style>#phorum ul.step6 li {width: 170px; line-height: 2em;}</style><ul class="button step6"><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>

<h2>CSS 部分</h2>
<pre>#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;
}</pre>

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

<pre>
#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;
}

</pre>

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


[hr]


<h2><b>[color=#CC3300]2.改變文字顏色的做法[/color]</b></h2>
<pre>
#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;
}

</pre>

<b>完成範例</b>
http://mepopedia.com/~jinjin/web/hw04/　（滑入僅文字變色的導覽列）
Changed By: HP
Change Date: November 06, 2011 10:04PM

[CSS] Step-by-Step: 以清單(UL+LI)實作導覽列 (兼容IE6)
導覽列對於網頁設計來說，是一個非常重要的部分，敘述網站的導覽架構，並讓瀏覽者一眼看到並能認知到是可點選的導覽按鈕。

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

以下則講解，透過CSS樣式，把清單（list）文字調整成導覽列使用的方法。我們的目標是作出下面這個形式的導覽列：
<style>#phorum #btn li {float:left; border-left: 1px solid white; width: 170px; text-align: center;} #phorum li a {display: block;} #phorum li a:hover {background: gray; color: white;}</style>
<ul id="btn" style="list-style-type: none; padding: 0px; margin-left: 0; background: dodgerblue; color:white; min-width: 350px; line-height: 2em; height: 2em;"> <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>

<b>1. 基本語法（HTML部份）</b>

1.A 清單（list）採用<b>[color=#CC0066] &lt;ul> 標籤定義清單的範圍[/color]</b>，並使用 [color=#CC0066]<b>&lt;li> 標籤定義個別項目</b>[/color]：
<xmp><ul>
<li>About</li>
<li>Works</li>
<li>Video</li>
<li>Links</li>
<li>Story</li>
</ul>
</xmp>

1.B 加入超連結標籤 &lt;a> 並寫入網址讓 List 具有導覽列功能：
<xmp><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></xmp>

預覽結果（底色與文字顏色另加）：
<style>#phorum ul{background: dodgerblue; color:dudgerblue;} #phorum li a {color:white;}</style>
IE6 / IE7 效果示意
<div style="border: 1px dodgerBlue solid"><ul C 為導覽列加入 ID (#button)，以供 CSS 風格設定
<xmp><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></xmp>

預覽結果（底色與文字顏色另加）：
<div style="border: 1px dodgerBlue solid"><ul style="list-style: outside; padding-left: 40px; margin-left:0;"><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></div>
<style>#phorum ul{background: dodgerblue; color:dudgerblue;} #phorum li a {color:white;}</style>
IE6 / IE7 效果示意
<div style="border: 1px dodgerBlue solid"><ul style="list-style: outside; padding: 0; margin-left: 30pt;"><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">S預覽效果：

IE6 / IE7
<ul style="margin:0; padding: 0;"><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>

IE8 / Chrome / Firefox
</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></div>

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

<b>2. 加入 MARGIN: 0; 預覽效果：

IE6 / IE7
果示意
<ul style="margin:0; padding: 0;"><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>

IE8 / Chrome
果示意
<ul style="margin:0; padding-left: 40px;"><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">Sto<b>3. 為導覽列加入 ID，以供 CSS 風格設定</b>

特別注意，不需在 &lt;ul> 外再加上 &lt;div>。直接在 &lt;ul> 內設定 id 即可。

<xmp><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></xmp>
o</a></li><li<style>#phorum #button li {float:left;}</style>
<ul id="button" style="list-style-type: none; background: dodgerblue; color:white;"> <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>
><a href="links.html">Links</a></li><li><a href="story.html">Story</a></li></ul>
list-style: none;"><li><a href=<pre>#button ul{
"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>
<b>5. 將 li 元素設定為向左浮動</b>
<pre>#button{
margin: 0;
padding: 0;
list-style: none;
}

#button li {
float: left;
}</pre>
預覽效果
<style>#phorum ul.button {margin:0; padding: 0; list-style: none;} #phorum ul.button li {float:left; background: dodgerBlue;}</style><pre>#button {
[color=#CC3300]/*高度設定*/[/color]
height: 22px;

class="button"><li><a href="index.html">About</a></li><li><a href="works.html">Works</a
[color=#CC3300]/*背景色設定*/[/color]
　　 background-color:#6E6E6E;
></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>

<b>6. 設定 li 元素的寬與高</b>
<
;
width: 170px;
line-height: 2em;
}</pre>
預覽效果
<style>#phorum ul.step6 li {width: 170px; line-height: 2em;}</style><ul class="button step6"><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>

<h2>CSS 部分</h2>
<pre>#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;
}</pre>

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

<pre>
#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;
}

</pre>

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


[hr]


<h2><b>[color=#CC3300]2.改變文字顏色的做法[/color]</b></h2>
<pre>
#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;
}

</pre>

<b>完成範例</b>
http://mepopedia.com/~jinjin/web/hw04/　（滑入僅文字變色的導覽列）
Changed By: HP
Change Date: November 06, 2011 09:57PM

[CSS] Step-by-Step: 以清單(UL+LI)實作導覽列 (兼容IE6)
導覽列對於網頁設計來說，是一個非常重要的部分，敘述網站的導覽架構，並讓瀏覽者一眼看到並能認知到是可點選的導覽按鈕。

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

以下則講解，透過CSS樣式，把清單（list）文字調整成導覽列使用的方法。我們的目標是作出下面這個形式的導覽列：
<style>#phorum #btn li {float:left; border-left: 1px solid white; width: 170px; text-align: center;} #phorum li a {display: block;} #phorum li a:hover {background: gray; color: white;}</style>
<ul id="btn" style="list-style-type: none; padding: 0px; margin-left: 0; background: dodgerblue; color:white; min-width: 350px; line-height: 2em; height: 2em;"> <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>

<b>1. 基本語法（HTML部份）</b>

1.A 清單（list）採用<b>[color=#CC0066] &lt;ul> 標籤定義清單的範圍[/color]</b>，並使用 [color=#CC0066]<b>&lt;li> 標籤定義個別項目</b>[/color]：
<xmp><ul>
<li>About</li>
<li>Works</li>
<li>Video</li>
<li>Links</li>
<li>Story</li>
</ul>
</xmp>

1.B 加入超連結標籤 &lt;a> 並寫入網址讓 List 具有導覽列功能：
<xmp><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></xmp>

預覽結果（底色與文字顏色另加）：
<style>#phorum ul{background: dodgerblue; color:dudgerblue;} #phorum li a {color:white;}</style>
IE6 / IE7 效果示意
<div style="border: 1px dodgerBlue solid"><ul C 為導覽列加入 ID (#button)，以供 CSS 風格設定
<xmp><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></xmp>

預覽結果（底色與文字顏色另加）：
<div style="border: 1px dodgerBlue solid"><ul style="list-style: outside; padding-left: 40px; margin-left:0;"><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></div>
<<div style="border: 1px dodgerBlue solid"><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></div>

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

<b>2. 加入 MARGIN: 0; </b>

預覽效果：

IE6 / IE7
<ul style="margin:0; padding: 0;"><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>

IE8 / Chrome / Firefox
<ul style="margin:0; padding: 40px;"><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>
><a href="video.html">Video</a></li><li><a href="links.html">Links</a></li><li><a href="story.html">Story</a></li></ul>
div style="border: 1px dodgerBlue solid"><ul style="list-style: outside; padding: 0; margin-left: 30pt;"><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">S預覽效果：

IE6 / IE7
<ul style="margin:0; padding: 0;"><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>

IE8 / Chrome / Firefox
</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></div>

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

<b>2. 加入 MARGIN: 0; 預覽效果：

IE6 / IE7
果示意
<ul style="margin:0; padding: 0;"><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>

IE8 / Chrome
果示意
<ul style="margin:0; padding-left: 40px;"><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">Sto<b>3. 為導覽列加入 ID，以供 CSS 風格設定</b>

特別注意，不需在 &lt;ul> 外再加上 &lt;div>。直接在 &lt;ul> 內設定 id 即可。

<xmp><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></xmp>
o</a></li><li<style>#phorum #button li {float:left;}</style>
<ul id="button" style="list-style-type: none; background: dodgerblue; color:white;"> <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>
><a href="links.html">Links</a></li><li><a href="story.html">Story</a></li></ul>
list-style: none;"><li><a href=<pre>#button ul{
"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>
<b>5. 將 li 元素設定為向左浮動</b>
<pre>#button{
margin: 0;
padding: 0;
list-style: none;
}

#button li {
float: left;
}</pre>
預覽效果
<style>#phorum ul.button {margin:0; padding: 0; list-style: none;} #phorum ul.button li {float:left; background: dodgerBlue;}</style><pre>#button {
[color=#CC3300]/*高度設定*/[/color]
height: 22px;

class="button"><li><a href="index.html">About</a></li><li><a href="works.html">Works</a
[color=#CC3300]/*背景色設定*/[/color]
　　 background-color:#6E6E6E;
></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>

<b>6. 設定 li 元素的寬與高</b>
<
;
width: 170px;
line-height: 2em;
}</pre>
預覽效果
<style>#phorum ul.step6 li {width: 170px; line-height: 2em;}</style><ul class="button step6"><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>

<h2>CSS 部分</h2>
<pre>#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;
}</pre>

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

<pre>
#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;
}

</pre>

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


[hr]


<h2><b>[color=#CC3300]2.改變文字顏色的做法[/color]</b></h2>
<pre>
#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;
}

</pre>

<b>完成範例</b>
http://mepopedia.com/~jinjin/web/hw04/　（滑入僅文字變色的導覽列）
Changed By: HP
Change Date: November 06, 2011 09:56PM

[CSS] Step-by-Step: 以清單(UL+LI)實作導覽列 (兼容IE6)
導覽列對於網頁設計來說，是一個非常重要的部分，敘述網站的導覽架構，並讓瀏覽者一眼看到並能認知到是可點選的導覽按鈕。

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

以下則講解，透過CSS樣式，把清單（list）文字調整成導覽列使用的方法。我們的目標是作出下面這個形式的導覽列：
<style>#phorum #btn li {float:left; border-left: 1px solid white; width: 170px; text-align: center;} #phorum li a {display: block;} #phorum li a:hover {background: gray; color: white;}</style>
<ul id="btn" style="list-style-type: none; padding: 0px; margin-left: 0; background: dodgerblue; color:white; min-width: 350px; line-height: 2em; height: 2em;"> <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>

<b>1. 基本語法（HTML部份）</b>

1.A 清單（list）採用<b>[color=#CC0066] &lt;ul> 標籤定義清單的範圍[/color]</b>，並使用 [color=#CC0066]<b>&lt;li> 標籤定義個別項目</b>[/color]：
<xmp><ul>
<li>About</li>
<li>Works</li>
<li>Video</li>
<li>Links</li>
<li>Story</li>
</ul>
</xmp>

1.B 加入超連結標籤 &lt;a> 並寫入網址讓 List 具有導覽列功能：
<xmp><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></xmp>

預覽結果（底色與文字顏色另加）：
<style>#phorum ul{background: dodgerblue; color:dudgerblue;} #phorum li a {color:white;}</style>
IE6 / IE7 效果示意
<div style="border: 1px dodgerBlue solid"><ul C 為導覽列加入 ID (#button)，以供 CSS 風格設定
<xmp><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></xmp>

預覽結果（底色與文字顏色另加）：
<div style="border: 1px dodgerBlue solid"><ul style="list-style: outside; padding-left: 40px; margin-left:0;"><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></div>
<<div style="border: 1px dodgerBlue solid"><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></div>

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

<b>2. 加入 MARGIN: 0; </b>

預覽效果：
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>

IE8 / Chrome / Firefox
a href="story.html"> padding: 0;i></ul>

IE8 / Chrome / Firefox
<ul style="margin:0; padding: 40px;"><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>
div style="border: 1px dodgerBlue solid"><ul style="list-style: outside; padding: 0; margin-left: 30pt;"><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">S預覽效果：

IE6 / IE7
<ul style="margin:0; padding: 0;"><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>

IE8 / Chrome / Firefox
</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></div>

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

<b>2. 加入 MARGIN: 0; 預覽效果：

IE6 / IE7
果示意
<ul style="margin:0; padding: 0;"><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>

IE8 / Chrome
果示意
<ul style="margin:0; padding-left: 40px;"><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">Sto<b>3. 為導覽列加入 ID，以供 CSS 風格設定</b>

特別注意，不需在 &lt;ul> 外再加上 &lt;div>。直接在 &lt;ul> 內設定 id 即可。

<xmp><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></xmp>
o</a></li><li<style>#phorum #button li {float:left;}</style>
<ul id="button" style="list-style-type: none; background: dodgerblue; color:white;"> <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>
><a href="links.html">Links</a></li><li><a href="story.html">Story</a></li></ul>
list-style: none;"><li><a href=<pre>#button ul{
"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>
<b>5. 將 li 元素設定為向左浮動</b>
<pre>#button{
margin: 0;
padding: 0;
list-style: none;
}

#button li {
float: left;
}</pre>
預覽效果
<style>#phorum ul.button {margin:0; padding: 0; list-style: none;} #phorum ul.button li {float:left; background: dodgerBlue;}</style><pre>#button {
[color=#CC3300]/*高度設定*/[/color]
height: 22px;

class="button"><li><a href="index.html">About</a></li><li><a href="works.html">Works</a
[color=#CC3300]/*背景色設定*/[/color]
　　 background-color:#6E6E6E;
></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>

<b>6. 設定 li 元素的寬與高</b>
<
;
width: 170px;
line-height: 2em;
}</pre>
預覽效果
<style>#phorum ul.step6 li {width: 170px; line-height: 2em;}</style><ul class="button step6"><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>

<h2>CSS 部分</h2>
<pre>#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;
}</pre>

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

<pre>
#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;
}

</pre>

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


[hr]


<h2><b>[color=#CC3300]2.改變文字顏色的做法[/color]</b></h2>
<pre>
#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;
}

</pre>

<b>完成範例</b>
http://mepopedia.com/~jinjin/web/hw04/　（滑入僅文字變色的導覽列）
Changed By: HP
Change Date: November 06, 2011 09:51PM

[CSS] Step-by-Step: 以清單(UL+LI)實作導覽列 (兼容IE6)
導覽列對於網頁設計來說，是一個非常重要的部分，敘述網站的導覽架構，並讓瀏覽者一眼看到並能認知到是可點選的導覽按鈕。

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

以下則講解，透過CSS樣式，把清單（list）文字調整成導覽列使用的方法。我們的目標是作出下面這個形式的導覽列：
<style>#phorum #btn li {float:left; border-left: 1px solid white; width: 170px; text-align: center;} #phorum li a {display: block;} #phorum li a:hover {background: gray; color: white;}</style>
<ul id="btn" style="list-style-type: none; padding: 0px; margin-left: 0; background: dodgerblue; color:white; min-width: 350px; line-height: 2em; height: 2em;"> <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>

<b>1. 基本語法（HTML部份）</b>

1.A 清單（list）採用<b>[color=#CC0066] &lt;ul> 標籤定義清單的範圍[/color]</b>，並使用 [color=#CC0066]<b>&lt;li> 標籤定義個別項目</b>[/color]：
<xmp><ul>
<li>About</li>
<li>Works</li>
<li>Video</li>
<li>Links</li>
<li>Story</li>
</ul>
</xmp>

1.B 加入超連結標籤 &lt;a> 並寫入網址讓 List 具有導覽列功能：
<xmp><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></xmp>

預覽結果（底色與文字顏色另加）：
<style>#phorum ul{background: dodgerblue; color:dudgerblue;} #phorum li a {color:white;}</style>
IE6 / IE7 效果示意
<div style="border: 1px dodgerBlue solid"><ul style="list-style: outside;"><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></div>

IE8 / Chrome / Firefox 效果示意
<div style="border: 1px dodgerBlue solid"><ul style="list-style: outside; padding-left: 40px; margin-left:0;"><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></div>
><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></div>
/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></xmp>

預覽結果（底色與文字顏色另加）：
<div style="border: 1px dodgerBlue solid"><ul style="list-style: outside; padding-left: 40px; margin-left:0;"><li><a href="index.html">About</a></li><li><a href="works.html">Works</a></li<style>#phorum li a {color:white;}</style><ul style="background: dodgerblue; color:red; margin:0;"><li>><lhref="index.html">About</a></li><li><a href="works.html">Works</a></li><li><a i><a href="video.html">Video</a></li><li><a href="links.html">Links</a></li><li><a href="story.html">Story</a></li></ul></div>
<<div style="border: 1px dodgerBlue solid"><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></div>

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

<b>2. 加入 MARGIN: 0; </b>

預覽效果：
a href="story.html">i></ul>

IE8 / Chrome / Firefox
<ul style="margin:0; padding: 40px;"><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>
div style="border: 1px dodgerBlue solid"><ul style="list-style: outside; padding: 0; margin-left: 30pt;"><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">S預覽效果：

IE6 / IE7
<ul style="margin:0; padding: 0;"><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>

IE8 / Chrome / Firefox
</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></div>

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

<b>2. 加入 MARGIN: 0; 預覽效果：

IE6 / IE7
果示意
<ul style="margin:0; padding: 0;"><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>

IE8 / Chrome
果示意
<ul style="margin:0; padding-left: 40px;"><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">Sto<b>3. 為導覽列加入 ID，以供 CSS 風格設定</b>

特別注意，不需在 &lt;ul> 外再加上 &lt;div>。直接在 &lt;ul> 內設定 id 即可。

<xmp><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></xmp>
o</a></li><li<style>#phorum #button li {float:left;}</style>
<ul id="button" style="list-style-type: none; background: dodgerblue; color:white;"> <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>
><a href="links.html">Links</a></li><li><a href="story.html">Story</a></li></ul>
list-style: none;"><li><a href=<pre>#button ul{
"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>
<b>5. 將 li 元素設定為向左浮動</b>
<pre>#button{
margin: 0;
padding: 0;
list-style: none;
}

#button li {
float: left;
}</pre>
預覽效果
<style>#phorum ul.button {margin:0; padding: 0; list-style: none;} #phorum ul.button li {float:left; background: dodgerBlue;}</style><pre>#button {
[color=#CC3300]/*高度設定*/[/color]
height: 22px;

class="button"><li><a href="index.html">About</a></li><li><a href="works.html">Works</a
[color=#CC3300]/*背景色設定*/[/color]
　　 background-color:#6E6E6E;
></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>

<b>6. 設定 li 元素的寬與高</b>
<
;
width: 170px;
line-height: 2em;
}</pre>
預覽效果
<style>#phorum ul.step6 li {width: 170px; line-height: 2em;}</style><ul class="button step6"><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>

<h2>CSS 部分</h2>
<pre>#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;
}</pre>

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

<pre>
#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;
}

</pre>

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


[hr]


<h2><b>[color=#CC3300]2.改變文字顏色的做法[/color]</b></h2>
<pre>
#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;
}

</pre>

<b>完成範例</b>
http://mepopedia.com/~jinjin/web/hw04/　（滑入僅文字變色的導覽列）
Changed By: HP
Change Date: November 06, 2011 09:46PM

[CSS] Step-by-Step: 以清單(UL+LI)實作導覽列 (兼容IE6)
導覽列對於網頁設計來說，是一個非常重要的部分，敘述網站的導覽架構，並讓瀏覽者一眼看到並能認知到是可點選的導覽按鈕。

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

以下則講解，透過CSS樣式，把清單（list）文字調整成導覽列使用的方法。我們的目標是作出下面這個形式的導覽列：
<style>#phorum #btn li {float:left; border-left: 1px solid white; width: 170px; text-align: center;} #phorum li a {display: block;} #phorum li a:hover {background: gray; color: white;}</style>
<ul id="btn" style="list-style-type: none; padding: 0px; margin-left: 0; background: dodgerblue; color:white; min-width: 350px; line-height: 2em; height: 2em;"> <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>

<b>1. 基本語法（HTML部份）</b>

1.A 清單（list）採用<b>[color=#CC0066] &lt;ul> 標籤定義清單的範圍[/color]</b>，並使用 [color=#CC0066]<b>&lt;li> 標籤定義個別項目</b>[/color]：
<xmp><ul>
<li>About</li>
<li>Works</li>
<li>Video</li>
<li>Links</li>
<li>Story</li>
</ul>
</xmp>

1.B 加入超連結標籤 &lt;a> 並寫入網址讓 List 具有導覽列功能：
<xmp><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></xmp>

預覽結果（底色與文字顏色另加）：
<style>#phorum ul{background: dodgerblue; color:dudgerblue;} #phorum li a {color:white;}</style>
IE6 / IE7 效果示意
<div style="border: 1px dodgerBlue solid"><ul style="list-style: outside;"><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></div>

IE8 / Chrome / Firefox 效果示意
<div style="border: 1px dodgerBlue solid"><ul style="list-style: outside; padding-left: 40px; margin-left:0;"><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></div>
/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></xmp>

預覽結果（底色與文字顏色另加）：
<div style="border: 1px dodgerBlue solid"><ul style="list-style: outside; padding-left: 40px; margin-left:0;"><li><a href="index.html">About</a></li><li><a href=<style>#phorum ul{ margin:0;} #phorum li a {color:white;}</style><ul style="background: dodgerblue; color:red;"><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>
"works.html">Works</a></li<style>#phorum li a {color:white;}</style><ul style="background: dodgerblue; color:red; margin:0;"><li>><lhref="index.html">About</a></li><li><a href="works.html">Works</a></li><li><a i><a href="video.html">Video</a></li><li><a href="links.html">Links</a></li><li><a href="story.html">Story</a></li></ul></div>
<<div style="border: 1px dodgerBlue solid"><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></div>

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

<b>2. 加入 MARGIN: 0; </b>

預覽效果：
a href="story.html">i></ul>

IE8 / Chrome / Firefox
<ul style="margin:0; padding: 40px;"><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>
div style="border: 1px dodgerBlue solid"><ul style="list-style: outside; padding: 0; margin-left: 30pt;"><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">S預覽效果：

IE6 / IE7
<ul style="margin:0; padding: 0;"><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>

IE8 / Chrome / Firefox
</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></div>

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

<b>2. 加入 MARGIN: 0; 預覽效果：

IE6 / IE7
果示意
<ul style="margin:0; padding: 0;"><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>

IE8 / Chrome
果示意
<ul style="margin:0; padding-left: 40px;"><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">Sto<b>3. 為導覽列加入 ID，以供 CSS 風格設定</b>

特別注意，不需在 &lt;ul> 外再加上 &lt;div>。直接在 &lt;ul> 內設定 id 即可。

<xmp><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></xmp>
o</a></li><li<style>#phorum #button li {float:left;}</style>
<ul id="button" style="list-style-type: none; background: dodgerblue; color:white;"> <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>
><a href="links.html">Links</a></li><li><a href="story.html">Story</a></li></ul>
list-style: none;"><li><a href=<pre>#button ul{
"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>
<b>5. 將 li 元素設定為向左浮動</b>
<pre>#button{
margin: 0;
padding: 0;
list-style: none;
}

#button li {
float: left;
}</pre>
預覽效果
<style>#phorum ul.button {margin:0; padding: 0; list-style: none;} #phorum ul.button li {float:left; background: dodgerBlue;}</style><pre>#button {
[color=#CC3300]/*高度設定*/[/color]
height: 22px;

class="button"><li><a href="index.html">About</a></li><li><a href="works.html">Works</a
[color=#CC3300]/*背景色設定*/[/color]
　　 background-color:#6E6E6E;
></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>

<b>6. 設定 li 元素的寬與高</b>
<
;
width: 170px;
line-height: 2em;
}</pre>
預覽效果
<style>#phorum ul.step6 li {width: 170px; line-height: 2em;}</style><ul class="button step6"><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>

<h2>CSS 部分</h2>
<pre>#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;
}</pre>

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

<pre>
#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;
}

</pre>

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


[hr]


<h2><b>[color=#CC3300]2.改變文字顏色的做法[/color]</b></h2>
<pre>
#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;
}

</pre>

<b>完成範例</b>
http://mepopedia.com/~jinjin/web/hw04/　（滑入僅文字變色的導覽列）
Changed By: HP
Change Date: November 06, 2011 09:25PM

[CSS] Step-by-Step: 以清單(UL+LI)實作導覽列 (兼容IE6)
Changed By: HP
Change Date: November 06, 2011 08:57PM

[CSS] Step-by-Step: 以清單(UL+LI)實作導覽列 (兼容IE6)
Changed By: HP
Change Date: November 06, 2011 08:37PM

[CSS] Step-by-Step: 以清單(UL+LI)實作導覽列 (兼容IE6)
Changed By: HP
Change Date: November 06, 2011 08:30PM

[CSS] Step-by-Step: 以清單(UL+LI)實作導覽列 (兼容IE6)
Changed By: HP
Change Date: November 06, 2011 08:21PM

[CSS] Step-by-Step: 以清單(UL+LI)實作導覽列 (兼容IE6)
Changed By: HP
Change Date: November 06, 2011 08:02PM

[CSS] Step-by-Step: 以清單(UL+LI)實作導覽列 (兼容IE6)
Changed By: HP
Change Date: November 06, 2011 07:50PM

[CSS] Step-by-Step: 以清單(UL+LI)實作導覽列 (兼容IE6)
Changed By: JinJin
Change Date: November 05, 2011 04:19PM

[CSS] Step-by-Step: 以清單(UL+LI)實作導覽列 (兼容IE6)
Changed By: HP
Change Date: November 05, 2011 03:12PM

[CSS] Step-by-Step: 以清單(UL+LI)實作導覽列 (兼容IE6)
Changed By: HP
Change Date: November 05, 2011 02:35PM

[CSS] 以清單(UL+LI)實作導覽列 (兼容IE6)
Changed By: HP
Change Date: November 05, 2011 02:18PM

[CSS] 以清單(UL+LI)實作導覽列 (ul+li)兼容IE6)

Original Message

作者: JinJin
Date: November 04, 2011 06:52PM

[CSS] 導覽列 (ul+li)兼容IE6)
首先談到的是[color=#CC0099]網頁導覽列的製作[/color]，其中分為以清單 ul 及 li 製作與圖片製作兩類

[color=#990000]一、透過CSS，以清單 ul 及 li 製作網頁導覽列[/color]




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

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

以往許多類似的做法，有用表格table製作，或用圖片製作，各有其優缺點：

以表格製作雖然看似架構簡單，但表格本身實際內容複雜(包含TR TD)，以CSS設定會更為繁瑣。

以圖片來製作雖然變化較多，但修改不易（例如只是修改文字內容，整張圖片或一組圖片就需重作）。

以清單 ul 及 li 製作網頁導覽列則是目前設計的趨勢，既簡潔又富設計感，修改也容易。例如修改按鈕的背景顏色只需在CSS中作一次的設定，但圖片則要整組重作（有時數目可能非常多）。

有關以 table 製作與以 CSS 製作的差異可以從觀察下面二個例子發現：

Table: http://www.sitepoint.com/examples/cssvtables/tables4.html
(此例中的留著許多邊框是為了凸顯多層表格，不是設計得不好看)
CSS: http://www.sitepoint.com/examples/cssvtables/butterflycss.html
[/color]

[hr]

以下則講解，透過CSS樣式，把清單（list）文字調整成導覽列使用的方法：


清單文字採用[color=#CC0066]＜ul＞標籤定義清單的範圍[/color]，並使用[color=#CC0066]＜li＞標籤定義個別項目[/color]，例如：

<br /> <ul><br /> 導覽列使用的方法：<br /> <br /> 清單文字採用<b>[color=#CC0066]＜ul＞標籤定義清單的範圍[/color]</b>，並使用[color=#CC0066]<b>＜li＞標籤定義個別項目</b>[/co即會產生以下的清單列<br /> <br /> <ul><br /> li><br /> <li>Links</li><br /> <li>Story</li><br /> </ul><br />

預覽結果（底色與文字顏色另加）：

  • About

  • Works

  • Video

  • Links

  • Story




接著，加入[color=#CC0066]連結[/color]的語法

<ul><br /> <li><a href="index.html">About</a></li><br /> <li><a href="works.html">Works</a></li><br /> ：</b><br /> <a href="video.html">Video</a></li> <li><a hre <li><a href="links.html">Links</a></li><br /> <li><a href="story.html">Story</a></li><br /> </ul><br />

即會產生以下有連結的清單列

    ;">
  • About
  • Links
    • Abo


      接著[color=#CC0066]設定導覽列的ID名稱為#button，直接設定於＜ul＞[/color]

      語法為：

      <ul id="button"><br /> /ul><br /> <br /> <b>3. 為導覽列加入 ID，以供 CSS 風格設定</b><br /> <br /> 特別注意，不需在 &lt;ul> 外再加上 &lt;div>。直接在 &lt;ul> 內設定 id 即可。<br /> <br /> <xmp><ul id="button"><br /> <li><a href="index.html">About</a></li><br /> a href="works.html">Works</a></li> <li><a href="video.html"</ul>


      [hr]


      接下來就開始開始[color=#CC0066]設定ＣＳＳ[/color]的部分

    • Links
    • Story


    1. 基本語法（HTML部份）

    清單（list）採用[color=#CC0066] <ul> 標籤定義清單的範圍[/color]，並使

      使用 [color0066]b>&別項目[/color]<ul stylindexckgrounAboutdgerblue;<br /> color:white"href="works.html">Works</a></li><br /> <li><a href="video.html">Video</a></li><br /> <li><a href="links.html">Links</a></li><br /> <br /> <li>Video</li><br /> <li>Links</li><br /> <li>Story</li><br /> </ul><br /> 觀察重點：<br /> 1. List 有預設的「圓點」標示。<br /> 2. 在 List 前後有預設的「邊距 MARGIN」（實際上的邊距值為「一行行高」：1 em）。<br /> <br /> <b>2. 加入超連結（HTML部份）</b><br /> <xmp><ul><br /> <li><a href="index.html">About</a></li><br /> <li><a href="works.html">Works</a></li><br /> yle="background: dodgerblue; color:dudgerblue;"><li><a href="index.html">About</a></li><li><a href="works.html">Works</a></li><li><a href="video.<style>#phhtml">Video</a></li><li><a href="links.html">Links</a></li><li><a href="swhitey.h<br /> tml">Story</a></li></ul><br /> <div style="bo<br /> <li><a href="works.html">Works</a></li><br /> <li><a href="video.html">Video</a></li><br /> <li><a href="links.html">Links</a></li><br /> <li><a href="story.html">Story</a></li><br /> </ul><br /> t 具有導覽列功能：<br /> <xmp><ul><br /> <li><a background: do<pre><br /> #button {<br /> dgerblue; color:dudgerblue; href="index.inl">Aout</a></li><br /> <li><a href="works.html">Works</a></li><br /> <li><ahref="video.html">Video</a></li><br /> <li><a href="links.html">Links</a></li><br /> <li><a href="story.html">Story</a></li><br /> </ul>

      預覽結果（底色與文字顏色另加）：

      ：

      <

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

      2. 加入 MARGIN: 0;

      預覽效果：
      a href="story.html">i>


    IE8 / Chrome / Firefox

    div style="border: 1px dodgerBlue solid">


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

2. 加入 MARGIN: 0; 預覽效果：

IE6 / IE7
果示意


IE8 / Chrome
果示意

list-style: none;">
  • #button ul{
    "index.html">About
  • Works
  • Video
  • Links
  • Story

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

    
#button li {
    
  float: left;
    
}

    預覽效果
    #button {
    
	[color=#CC3300]/*高度設定*/[/color]
    
	height: 22px;
    
	
    
class="button">
  • About
  • Works
	[color=#CC3300]/*背景色設定*/[/color]
    
   　　 background-color:#6E6E6E;
    
>
  • Video
  • Links
  • Story

    • 

    
6. 設定 li 元素的寬與高
    
<		
    
;
    
  width: 170px;
    
  line-height: 2em;
    
}

    預覽效果


    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;
    
}


    [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]


    [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/　（滑入僅文字變色的導覽列）