[講義04] 以CSS製作網頁導覽列

Re: [講義04] 以CSS製作網頁導覽列

misoomisooo — Wed, 17 Jan 2018 15:23:31 +0800

(1).作業網址： http://mepopedia.com/~web104-2c/hw04/hw04-1055445081

(2).請回答以下問題：
1.導覽列配色與風格設定：簡單的
2.有無遇到的問題? 影片沒聲音只能靠自己的眼睛跟腦袋
3.製作感想 :還好不會很難
4.製作作業的時間 20min(?)

Re: [講義04] 以CSS製作網頁導覽列

H224488882 — Wed, 11 Jan 2017 12:07:53 +0800

(1).作業網址： http://mepopedia.com/~web105-2c/final/final-1045445217/index2.html

(2).請回答以下問題：
1.導覽列配色與風格設定：簡單黑白灰
2.有無遇到的問題? 很大的問題
3.製作感想 :累
4.製作作業的時間兩小時

Re: [講義04] 以CSS製作網頁導覽列

1045445177 — Wed, 11 Jan 2017 11:54:55 +0800

(1).作業網址： http://mepopedia.com/~web104-2c/hw04/hw04-1045445177

(2).請回答以下問題：
1.導覽列配色與風格設定：荳荳
2.有無遇到的問題? 老師教學影片沒聲音很難做
3.製作感想 :還好沒太多感觸
4.製作作業的時間一天一點點

Re: [講義04] 以CSS製作網頁導覽列

千萬別看 — Wed, 11 Jan 2017 00:16:05 +0800

1).作業網址：file:///C:/Users/tr558/Desktop/10/hw04-1045445108/index.html
(2).請回答以下問題：
1.導覽列配色與風格設定：灌籃高手
2.有無遇到的問題? 無
3.製作感想 :我剛開始以為很難還在切片結果根本不用是我誤會大了
4.製作作業的時間 20

Re: [講義04] 以CSS製作網頁導覽列

1045440020 — Thu, 16 Jun 2016 13:50:39 +0800

(1).作業網址： http://mepopedia.com/~web104-2c/hw04/hw04-1045440020

(2).請回答以下問題：
1.導覽列配色與風格設定：多莉
2.有無遇到的問題? 老師教學影片沒聲音很難做
3.製作感想 :波棒
4.製作作業的時間 30分

Re: [講義04] 以CSS製作網頁導覽列

小花蛀牙 — Thu, 16 Jun 2016 11:37:59 +0800

(1).作業網址：http://mepopedia.com/~cg104-1a/final/final-1045440012/
(2).請回答以下問題：
1.導覽列配色與風格設定：繽紛
2.有無遇到的問題? 一開始一直無法讓清單的那個小點點不見，弄了好久終於不見了QQ
3.製作感想 :網頁真的好難做嗚嗚，語法也都亂七八糟，希望不會有人拿我得去改應該會很痛苦(:P)
4.製作作業的時間 :好久好久

Re: [講義04] 以CSS製作網頁導覽列

小吉 — Thu, 07 Jan 2016 02:20:50 +0800

(1).作業網址：file:///C:/Users/gina/Desktop/hw04-1035445114/index.html

(2).請回答以下問題：
1.導覽列配色與風格設定：柴犬
2.有無遇到的問題? 無
3.製作感想 : 心想事成
4.製作作業的時間 30分鐘

Re: [講義04] 以CSS製作網頁導覽列

1035445201 — Thu, 07 Jan 2016 00:41:40 +0800

(1).作業網址： http://mepopedia.com/~web104-2c/hw04/hw04-1035445201

(2).請回答以下問題：
1.導覽列配色與風格設定:美國恐怖故事
2.有無遇到的問題?
3.製作感想 :容易上手
4.製作作業時間:30分鐘

Re: [講義04] 以CSS製作網頁導覽列

林品秀 — Wed, 30 Dec 2015 00:49:55 +0800

(1).作業網址： http://mepopedia.com/~web104-2c/hw04/hw04-1035445090

(2).請回答以下問題：
1.導覽列配色與風格設定：唐老鴨
2.有無遇到的問題? 有一些忘光
3.製作感想 :一開始不知道從哪著手，之後慢慢做
4.製作作業的時間一小時

Re: [講義04] 以CSS製作網頁導覽列

1035445027 — Wed, 23 Dec 2015 15:03:24 +0800

(1).作業網址： http://mepopedia.com/~web104-2c/hw04/hw04-1035445027

(2).請回答以下問題：
1.導覽列配色與風格設定：魯魯米
2.有無遇到的問題? 無
3.製作感想 :容易上手
4.製作作業時間:30分鐘

Re: [講義04] 以CSS製作網頁導覽列

廖慧伃0908 — Sun, 20 Dec 2015 19:47:03 +0800

(1).作業網址： http://mepopedia.com/~web104-2c/hw04/hw04-1035445018

(2).請回答以下問題：
1.導覽列配色與風格設定：小王子
2.有無遇到的問題? 無
3.製作感想 :比前面作業還要容易上手
4.製作作業的時間 30分

Re: [講義04] 以CSS製作網頁導覽列

1035445156 — Thu, 17 Dec 2015 20:40:54 +0800

(1).作業網址： http://mepopedia.com/~web104-2c/hw04/hw04-1035445156

(2).請回答以下問題：
1.導覽列配色與風格設定：龍貓
2.有無遇到的問題? 無
3.製作感想 :我剛開始以為很難還在切片結果根本不用是我誤會大了
4.製作作業的時間 30分

[講義04] 以CSS製作網頁導覽列

JinJin — Tue, 25 Oct 2011 22:31:47 +0800

1 完整語法（含header )
1. [color=#CC3300]1.改變底色的做法/文字居中排法[/color]
2. [color=#CC3300]2.改變文字顏色的做法[/color]
3. 三、範例語法
4. [color=#CC0099]1.範例圖片按鈕的語法如下[/color]
4.1 1.HTML語法：
4.2 2.CSS部分的語法如下：
5. [color=#CC0099]2.透過CSS，以清單 ul 及 li 製作網頁導覽列的語法如下[/color]
5.1 1.HTML語法：
5.2 2.CSS部分的語法如下：

接下來的幾份講義將以下莫內網站，來解說不同的網頁設計功能

[color=#0033CC]永遠的印象--莫內，範例網址：[/color]

[color=#CC3366]1.透過CSS，以清單＜ul＞及＜li＞製作網頁導覽列[/color]
http://mepopedia.com/~jinjin/web/hw04/　（滑入僅文字變色的導覽列）
http://mepopedia.com/~jinjin/web/hw04-1/　（滑入底色變色及文字置中的導覽列）

[color=#CC3366]2.以圖片按鈕製作的導覽列[/color]
http://mepopedia.com/~jinjin/web/hw04-2/　

首先談到的是[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]，例如：

<ul> <li>About</li> <li>Works</li> <li>Video</li> <li>Links</li> <li>Story</li> </ul>
即會產生以下的清單列

About

Works

Video

Links

Story

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

<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>
即會產生以下有連結的清單列

About

Works

Video

Links

Story

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

語法為：

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

1. 完整語法（含header )

<!DOCTYPE html> <html> <head> <title>網頁導覽列</title> <link rel="stylesheet" href="style.css" media="screen" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <div id="wrapper"> <div id="header"></div> <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> <div id="content"></div> <div id="footer"></div> </div> </body> </html>

[hr]

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

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

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

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

2. [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: 169px;
        height: 22px;
        padding-top:2px;
        color: #FFF;
        text-decoration: none;
}

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

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

[hr]

[color=#990000]二、以圖片置入製作網頁導覽列[/color]

[color=#CC0066]※以圖片製作導覽按鈕的優點：可依設計者喜好設計多樣風格的按鈕
※以圖片製作導覽按鈕的缺點：修改較不方便，一定要進繪圖軟體修改，製作時間較長，檔案容量較大[/color]

1.以photoshop製作頂圖及按鈕

設定與裁切好尺寸，此範例設定為寬900px，按鈕寬180px，高21px
以參考線（尺規CTRL+R　拉出參考線）拉出所需的長寬

[IMG]http://mepopedia.com/~jinjin/web/img/4-01.jpg[/IMG]

[hr]
2.在清單列打入文字，並設定文字陰影，以增加閱讀性

[IMG]http://mepopedia.com/~jinjin/web/img/4-02.jpg[/IMG]

[hr]
3.在同一位置放上中英文字

[IMG]http://mepopedia.com/~jinjin/web/img/4-03.jpg[/IMG]

[hr]
4.將文字分別複製修改至適當位置

[IMG]http://mepopedia.com/~jinjin/web/img/4-04.jpg[/IMG]

[hr]
5.選擇工具箱中，裁切工具底下的切片工具，進行切片工作

[IMG]http://mepopedia.com/~jinjin/web/img/4-05.jpg[/IMG]

[hr]
6.使用切片工具，將頂圖案按鈕依照參考線手動切片，（或按參考線自動產生切片後，將頂圖部份合併）

[IMG]http://mepopedia.com/~jinjin/web/img/4-06.jpg[/IMG]

[hr]
7.直接按確定

[IMG]http://mepopedia.com/~jinjin/web/img/4-07.jpg[/IMG]

[hr]
8.格式選[color=#CC0066]僅影像[/color]，全部使用者切片，按確定

[IMG]http://mepopedia.com/~jinjin/web/img/4-08.jpg[/IMG]

[hr]
9.將頂圖與按鈕將切割大小自動輸出至自動產生的images資料夾中

[IMG]http://mepopedia.com/~jinjin/web/img/4-09.jpg[/IMG]

[hr]
10.將英文按鈕的部分，按住ＳＨＩＦＴ分別選取，按確定輸出

[IMG]http://mepopedia.com/~jinjin/web/img/4-10.jpg[/IMG]

[hr]
11.在切片的選項，選取　[color=#CC0066]選取的切片[/color]

[IMG]http://mepopedia.com/~jinjin/web/img/4-11.jpg[/IMG]

即會在images資料夾，自動產生英文組的按鈕

[hr]

放入按鈕的方法，請見講義三

連結按鈕的方法請參考下圖

[IMG]http://mepopedia.com/~jinjin/web/img/4-12.jpg[/IMG]

[hr]

3. 三、範例語法

4. [color=#CC0099]1.範例圖片按鈕的語法如下[/color]

1. 1.HTML語法：

<!DOCTYPE html> <html> <head> <title>永遠的印象--莫內</title> <link rel="stylesheet" href="style.css" media="screen" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript"> function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } </script> </head> <body onLoad="MM_preloadImages('images/back02_02.jpg','images/back02_03.jpg','images/back02_04.jpg','images/back02_05.jpg','images/back02_06.jpg')"> <div id="wrapper"> <div id="header"> <h1> <strong>Claude Monet</strong></h1> <span class="header-text">forever Impressionism </span> </div> <div id="button"><a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','images/back02_02.jpg',1)"></a><a href="works.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','images/back02_03.jpg',1)"></a><a href="video.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','images/back02_04.jpg',1)"></a><a href="links.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','images/back02_05.jpg',1)"></a><a href="story.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','images/back02_06.jpg',1)"></a></div> <div id="content"> <p></p> <p class="text-s">藍色調的睡蓮</p> <p class="title-1"> 關於莫內 <strong>Claude Monet</strong></p> <p> 莫內是法國畫家，是印象主義的創立者之一，而且只有他一人終其一生都堅持印象主義的原則和目標，也是唯一在生前贏得大眾認可的印象主義畫家。他少年時代所畫的諷刺漫畫就已具備了驚人的形似能力，直到他早期的印象主義繪畫還保留著這項特質，使他和十九世紀中葉風景畫家的朦朧概括迥然不同。他的風景畫完全以主題的視覺經驗感知為首要的考慮，忽視傳統的概念﹝構圖、題材、潤飾等﹞。</p> </div> <div id="footer"> │中國科技大學 ‧ 視覺傳達設計系 │ 電話: 02-29313416 │ 03-6991111 │<br> │地址：台北校區：116-95台北市文山區興隆路三段56號 2樓 │<br> │最佳瀏覽環境：IE6.0.FIRE FOX 2.0以上版本 │ 最佳瀏覽解析度：1024X768 以上 │ Designed by JinJin </div> </div> </body> </html>

2. 2.CSS部分的語法如下：

@charset "utf-8"; /* CSS Document */ body { background-color: #4188A6; /*底色*/ margin: 0px; /*緊貼頂部*/ } #wrapper { width: 900px; /*寬度設定為900px*/ margin: auto; /*版面居中對齊*/ border: 2px solid #DEECDF; } #header { background-image: url(images/back_01.jpg); background-repeat: no-repeat; padding-top: 20px; padding-bottom: 30px; padding-left: 30px; } #button { } #content { font-family: "微軟正黑體", "Arial Unicode MS"; font-size: 14px; line-height: 2em; color: #333; padding: 30px; background-color: #DDE3E3; } #footer { font-size: 12px; line-height: 1.5em; color: #DDE3E3; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; background-image: url(images/header01.jpg); background-repeat: no-repeat; } /************標題設定************/ h1{ color: #FFF; font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; font-size: 30px; margin: 0px; /*清除原有的距離*/ } .header-text { font-size: 15px; color: #D2EFF7; font-family: "Times New Roman", Times, serif; font-weight: bolder; font-style: italic; margin: 0px; /*清除原有的距離*/ } .title-1 { font-size: 18px; line-height: 2em; border-bottom-width: 1px; border-left-width: 12px; border-bottom-style: dotted; border-left-style: dotted; border-bottom-color: #417C9A; border-left-color: #417C9A; color: #187E95; } .text-s { font-size: 13px; color: #6F6CA1; border-left-width: 2px; border-left-style: dotted; border-left-color: #8081B1; padding-left: 5px; font-weight: bolder; } /************表格設定************/ #content table { border-bottom-width: 5px; border-bottom-style: solid; border-bottom-color: #278092; } #content table tr td { padding: 5px; font-size: 12px; line-height: 1.5em; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #278092; } /************表格標題************/ .table_title { font-size: 14px; font-weight: bolder; color: #E9F0E0; background-color: #278092; } /************連結設定************/ #content a { color: #278092; text-decoration: none; } /************連結滑鼠移過時的設定************/ #content a:hover { color: #903; text-decoration: underline; } /************靠左浮動的設定(繞圖排文時，圖片的設定)************/ .floatleft { float: left; padding-right: 20px; padding-bottom: 20px; } /************靠右浮動的設定(繞圖排文時，圖片的設定)************/ .floatright { float: right; padding-top: 20px; padding-bottom: 20px; padding-left: 20px; } /************清除浮動的設定(繞圖排文時，文字的設定)************/ .clearboth { clear: both; }

5. [color=#CC0099]2.透過CSS，以清單 ul 及 li 製作網頁導覽列的語法如下[/color]

1. 1.HTML語法：

<!DOCTYPE html> <html> <head> <title>永遠的印象--莫內</title> <link rel="stylesheet" href="style.css" media="screen" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <div id="wrapper"> <div id="header"> <h1> <strong>Claude Monet</strong></h1> <span class="header-text">forever Impressionism </span> </div> <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> <div id="content"> <p class="text-s">藍色調的睡蓮</p> <p class="title-1"> 關於莫內 <strong>Claude Monet</strong></p> <p> 莫內是法國畫家，是印象主義的創立者之一，而且只有他一人終其一生都堅持印象主義的原則和目標，也是唯一在生前贏得大眾認可的印象主義畫家。他少年時代所畫的諷刺漫畫就已具備了驚人的形似能力，直到他早期的印象主義繪畫還保留著這項特質，使他和十九世紀中葉風景畫家的朦朧概括迥然不同。他的風景畫完全以主題的視覺經驗感知為首要的考慮，忽視傳統的概念﹝構圖、題材、潤飾等﹞。</p> </div> <div id="footer"> │中國科技大學 ‧ 視覺傳達設計系 │ 電話: 02-29313416 │ 03-6991111 │<br> │地址：台北校區：116-95台北市文山區興隆路三段56號 2樓 │<br> │最佳瀏覽環境：IE6.0.FIRE FOX 2.0以上版本 │ 最佳瀏覽解析度：1024X768 以上 │ Designed by JinJin </div> </div> </body> </html>

2. 2.CSS部分的語法如下：

@charset "utf-8"; /* CSS Document */ body { background-color: #4188A6; /*底色*/ margin: 0px; /*緊貼頂部*/ } #wrapper { width: 900px; /*寬度設定為900px*/ margin: auto; /*版面居中對齊*/ border: 2px solid #DEECDF; } #header { background-color: #4B92B0; padding-top: 20px; padding-bottom: 30px; padding-left: 30px; } /*******按鈕不同部分*******/ #button { /*高度設定*/ height: 22px; /*文字設定*/ font-weight: bolder; color: #FFF; font-size: 14px; /*背景色設定*/ background-color:#6E6E6E; /*將內定的邊距清除*/ margin: 0px; /*將內定的內距清除*/ padding:0px; } #button li { /* 讓各個清單元素靠左對齊 */ float:left; /* 設定清單文字範圍的寬度 */ width:178px; /* 去除清單文字前面的小點*/ list-style-type:none; /* 設定背景色 */ background-color:#6E6E6E; /* 讓清單文字居中對齊 */ text-align:center; /* 設定字距為2px */ letter-spacing: 2px; /* 設定左邊的白邊樣式 */ border-left-width: 1px; border-left-style: solid; border-left-color: #FFF; /* 右邊留白1像素 */ margin-right:1px; } #button li a { /* 連結範圍充滿整個區塊 */ display: block; /* 單個連結範圍的框度和高度*/ width: 180px; height:20px; /* 連結範圍向上的內距 */ padding-top:2px; /* 連結的文字設為白色以及無裝飾(無底線) */ color: #FFF; text-decoration: none; } #button li a:hover{ /* 設定滑鼠移過時，清單改變的底色設定 */ background-color:#39919F } /*******按鈕部分結束*******/ #content { font-family: "微軟正黑體", "Arial Unicode MS"; font-size: 14px; line-height: 2em; color: #333; padding: 30px; background-color: #DDE3E3; } #footer { font-size: 12px; line-height: 1.5em; color: #DDE3E3; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; background-color: #4B92B0; } /************標題設定************/ h1{ color: #FFF; font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; font-size: 30px; margin: 0px; /*清除原有的距離*/ } .header-text { font-size: 15px; color: #D2EFF7; font-family: "Times New Roman", Times, serif; font-weight: bolder; font-style: italic; margin: 0px; /*清除原有的距離*/ } .title-1 { font-size: 18px; line-height: 2em; border-bottom-width: 1px; border-left-width: 12px; border-bottom-style: dotted; border-left-style: dotted; border-bottom-color: #417C9A; border-left-color: #417C9A; color: #187E95; } .text-s { font-size: 13px; color: #6F6CA1; border-left-width: 2px; border-left-style: dotted; border-left-color: #8081B1; padding-left: 5px; font-weight: bolder; } /************表格設定************/ #content table { border-bottom-width: 5px; border-bottom-style: solid; border-bottom-color: #278092; } #content table tr td { padding: 5px; font-size: 12px; line-height: 1.5em; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #278092; } /************表格標題************/ .table_title { font-size: 14px; font-weight: bolder; color: #E9F0E0; background-color: #278092; } /************連結設定************/ #content a { color: #278092; text-decoration: none; } /************連結滑鼠移過時的設定************/ #content a:hover { color: #903; text-decoration: underline; } /************靠左浮動的設定(繞圖排文時，圖片的設定)************/ .floatleft { float: left; padding-right: 20px; padding-bottom: 20px; } /************靠右浮動的設定(繞圖排文時，圖片的設定)************/ .floatright { float: right; padding-top: 20px; padding-bottom: 20px; padding-left: 20px; } /************清除浮動的設定(繞圖排文時，文字的設定)************/ .clearboth { clear: both; }
[hr]
依然沒有錄到聲音>"<

http://youtu.be/Q3QV5El081c