重新檢視美寶專區百科CSS語法及設計：以暨大外文系友會為例

建議要點：

一、CSS 設定先後次序原則
body 等重要整體風格設定應放在 CSS 文件開頭，標籤及類別設定不應以任意順序加入。建議以以下順序加入：
　1. 整體風格設定（如body或自定之#main、#wrapper，主要為設定版面寬度、背景、基本字體、版面置中與否等）
　2. 基本風格設定（如h1、h2、p、a、table等）
　3. 區塊視覺設定（如#header、#content、#footer）

二、區塊修改建議

區塊之間之間距建議以 padding 或 margin 控制，儘量勿以段落標籤 <p> 等以「內容」方式讓版面中之區塊有間距。

頂圖區塊：#wikiheader
#wikiheader 的 background 設定應由原本之向右改為向左 (background: left)。

內容區塊：#content
#content 與 #content_list 應合併（其中 #content 應無 float:left 的必要）。同時，為消除 #content 與 #footer 之間有「灰色間隙」的問題，以加上padding-bottom 的方式解決。最後，整體寬度（包括 #content、#wikiheader、#footer 在內）應由上層的 #building 決定，故不應設定 #content 的寬度（目前是設 900px）。同時，不設定寬度也能讓 #content 達到動態調適視窗大小的目的（因 #building 已設為 max-width: 900px）。

標題區塊：#wikiTitleBox 與 #wikiTitle
1. #wikiTitleBox 不應設定寬度，應由左右邊距的設定來動態決定 #wikiTitleBox 的寬度。
2. #wikiTitleBox 與 #wikiTitle 應合併。
3. padding 與 margin 部份之目的應為讓標題文字「垂直置中」，現改用設定 line-height 方式達成，故可刪除。
4. 基於「HTML結講與CSS設計分離」之原則，建議將原寫在標籤內之水平置中語法（align=center）移至CSS中（text-align:center）。

原 CSS 碼中有 #index 的宣告與設定，但實際上百科HTML中並無相關之區塊。經判斷，此段應為從其他百科或頁面之原始碼複製，整段宜移除以節省原始碼。

三、語法簡化
例如以下 body
body {
        margin-left: 0px;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        background-color: #e3e3e3;
        background-image: url(http://mepopedia.com/group/village/imgs/top_bg.jpg);
        background-repeat: repeat-x;
}
應簡化為
body {
        margin:0;
        background: #e3e3e3 url(http://mepopedia.com/group/village/imgs/top_bg.jpg) repeat-x;
}

.QWHeading1 {
        font-family: Tahoma, Geneva, sans-serif;
        font-size: 18px;
        color: #09C;
        border-bottom-width: 1px;
        border-bottom-style: dotted;
        border-bottom-color: #09F;
        font-weight: bold;
        background-image: url(http://mepopedia.com/group/ncnu-dfll/images/w4.gif);
        background-repeat: no-repeat;
        background-position: left center;
        padding-left: 50px;
        padding-bottom: 8px;
        padding-top: 2px;
}

應簡化為
.QWHeading1 {
        font-family: Tahoma, Geneva, sans-serif;
        font-size: 18px;
        color: #09C;
        border-bottom: 1px dotted #09F;
        font-weight: bold;
        background: url(http://mepopedia.com/group/ncnu-dfll/images/w4.gif) no-repeat left center;
        padding: 2px 0 8px 50px;
}

CSS 原始碼共289行 (2011/09/19)　　　　　　　　　修改後 CSS 原始碼共248行 (2011/10/06)

.links {
        height: 50px;
        padding: 10px 10px 0 0;
}
.button {
        width: 105px;
        height: 28px;
        float: right;
        margin-right: 2px;
}
.image {width: 105px; height: 28px;}

.edit {
        background:url(/group/ncnu-dfll/images/w3-2.gif);
}
.forum {
        background:url(/group/ncnu-dfll/images/w2-2.gif);
}
.post {
        background:url(/group/ncnu-dfll/images/post-2.gif);
}

.edit a .image {
        background: url(/group/ncnu-dfll/images/w3-2.gif);
}
.forum a .image {
        background: url(/group/ncnu-dfll/images/w2-2.gif);
}
.post a .image {
        background: url(/group/ncnu-dfll/images/post-2.gif);
}

.button a, .button a:link, .button a:visited {
        display:block;
}
.button a:hover .image{
        visibility:hidden; height: 0; width: 0;
}
.edit {background-repeat:no-repeat;}
.button a:hover {visibility:visible; height: 28px; width: 105px;} /*IE6*/


a:link {
        color: #00468C;
        text-decoration: none;
}
a:visited {
        text-decoration: none;
        color: #00468C;
}
a:hover {
        text-decoration: underline;
        color: #366C00;
}
a:active {
        text-decoration: none;
}
body {
        margin-left: 0px;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        background-color: #e3e3e3;
        background-image: url(http://mepopedia.com/group/village/imgs/top_bg.jpg);
        background-repeat: repeat-x;
}

#top {
        margin: auto;
        width: 900px;
        background-image: url(http://mepopedia.com/group/village/imgs/top_bg.jpg);
        background-repeat: repeat-x;
        height: 25px;
        font-size: 12px;
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        color: #666;
        padding: 3px;
}
#wikiheader{
        background: url(http://mepopedia.com/group/ncnu-dfll/images/wiki_top.jpg) no-repeat right;
        height: 75px;
        max-width: 900px;
}

#content{
        width: 900px;
        margin: auto;
        background-color: #FAFAFA;
        float: left;
}

#content_list {
        width: 900px;
        margin: auto;
        background-color: #FAFAFA;
}

#building {
        max-width: 900px;
        _width:expression((documentElement.clientWidth >928) ? "900px" : "auto");
        margin: auto; border: 3px solid #FFF;
}

#footer{
        margin: auto;
        background-color: #016da4;
        height: 50px;
        line-height:20px;
        font-family: Tahoma, Geneva, sans-serif;
        font-size: 12px;
        color: #FFF;
        padding-top: 12px;
        padding-right: 5px;
        padding-left: 20px;
        clear: both;
}
#building #footer a {
        color: #6FF;
}
#content_list .page_table tr td a {
        color: #F90;
}
#index {
        width: 948px;
        border: 3px solid #FFF;
        margin-top: auto;
        margin-right: auto;
        margin-bottom: auto;
        margin-left: auto;
        background-image: url(http://mepopedia.com/group/village/imgs/index.jpg);
        height: 610px;
        background-repeat: no-repeat;
}
#wikitext {
        margin-right: 60px;
        margin-left: 60px;
        font-family: Tahoma, Geneva, sans-serif;
        font-size: 16px;
        line-height: 21px;
        padding: 20px;
        border: 3px double #0CF;
        background-color: #FFF;
}



.list_tatle_title {
        height: 59px;
        background-image: url(http://mepopedia.com/group/village/imgs/list_title.gif);
        background-repeat: no-repeat;
}
.list_content {
        font-family: Tahoma, Geneva, sans-serif;
        font-size: 15px;
        height: 13px;
        padding: 5px;
        font-weight: bold;
        border-top-width: 1px;
        border-top-style: dotted;
        border-top-color: #09C;
        border-right-color: #09C;
        border-bottom-color: #09C;
        border-left-color: #09C;
        list-style-image: url(http://mepopedia.com/group/village/imgs/icon_news.gif);
        list-style-position: inside;
        background-color: #FFF;
}
.list_icon {
        background-image: url(http://mepopedia.com/group/village/imgs/icon_news.gif);
        background-repeat: no-repeat;
        background-position: center;
        width: 25px;
        border-top-width: 1px;
        border-top-style: dotted;
        border-top-color: #09C;
        background-color: #FFF;
}
.list_info {
        font-family: Tahoma, Geneva, sans-serif;
        font-size: 15px;
        color: #333;
        height: 13px;
        border-top-width: 1px;
        border-top-style: dotted;
        border-top-color: #09C;
        background-color: #FFF;
}

.list_title {
        font-family: Tahoma, Geneva, sans-serif;
        font-size: 16px;
        color: #333;
        height: 25px;
        padding: 5px;
        font-weight: bold;
        background-color: #E8FBFF;
}
.list_sides {
        background-color: #2298B6;
        width: 15px;
}
.list_botton {
        background-color: #0CF;
        height: 3px;
        border-bottom-width: 1px;
        border-bottom-style: double;
        border-bottom-color: #09F;
}
.list_table {
        margin-top: 30px;
        border: 3px double #0CF;
}

#top a {
        color: #666;
}
#top a:hover {
        color: #0CC;
        text-decoration: none;
}
#lst_div {
        padding-top: 5px;
        padding-bottom: 5px;
}

.wikiTitleBox {
        font-size: 14px;
        height: 30px;
        width: 880px;
        margin: 0 0 0 15px;
        background-repeat: repeat-x;
        background-image: url(http://mepopedia.com/group/ncnu-dfll/images/wiki-1.png);
        padding-top: 2px;
        background-color:#EFF;
        border-radius: 10px;
}
.wikiTitle {
        font-size: 16px;
        height: 30px;
        font-family: Georgia, "Times New Roman", Times, serif;
        color: #FFF;
        font-weight: bold;
        margin-top: 6px;
        margin-right: 0px;
        margin-bottom: 0px;
        margin-left: 0px;
        
}
.ForumTitleBox {
        background-image: url(http://mepopedia.com/group/ncnu-dfll/images/wiki-1.png);
        background-repeat: repeat-x;
        height: 30px;
        width: 880px;
        margin-left: 15px;
        padding-top: 2px;
}
.QWTitleBox        {
        background-image: url(http://mepopedia.com/group/ncnu-dfll/images/wiki-2.png);
        background-repeat: repeat-x;
        height: 50px;
        width: 880px;
        color: #FFF;
        font-family: Arial, Helvetica, sans-serif, "微軟正黑體";
        padding-top: 10px;
        font-weight: bold;
        margin-left: 15px;
        border-radius: 10px;
}
.QWHeading1 {
        font-family: Tahoma, Geneva, sans-serif;
        font-size: 18px;
        color: #09C;
        border-bottom-width: 1px;
        border-bottom-style: dotted;
        border-bottom-color: #09F;
        font-weight: bold;
        background-image: url(http://mepopedia.com/group/ncnu-dfll/images/w4.gif);
        background-repeat: no-repeat;
        background-position: left center;
        padding-left: 50px;
        padding-bottom: 8px;
        padding-top: 2px;
}
.map{
        margin-left: 20px;
}
.QWIndent{
        margin-left:-20px;
}

/* 整體風格設定 */

body {
        margin:0;
        background: #e3e3e3 url(http://mepopedia.com/group/village/imgs/top_bg.jpg) repeat-x;
}

#building {
        max-width: 900px;
        _width:expression((documentElement.clientWidth >928) ? "900px" : "auto");
        margin: auto; border: 3px solid #FFF;
}

/* 基本風格設定 */

a:link, a:visited {
        color: #00468C;
        text-decoration: none;
}

a:hover {
        text-decoration: underline;
        color: #366C00;
}

a:active {
        text-decoration: none;
}

/* 區塊風格設定 */

#top {
        margin: auto;
        width: 900px;
        background: url(http://mepopedia.com/group/village/imgs/top_bg.jpg) repeat-x;
        height: 25px;
        font-size: 12px;
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        color: #666;
        padding: 3px;
}
#top a {
        color: #666;
}
#top a:hover {
        color: #0CC;
        text-decoration: none;
}

#wikiheader{
        background: url(http://mepopedia.com/group/ncnu-dfll/images/wiki_top.jpg) no-repeat left;
        height: 75px;
        max-width: 900px;
}

#content{
        margin: auto;
        background-color: #FAFAFA;
        padding: 36px 0 50px;
}

#footer{
        margin: auto;
        background-color: #016da4;
        height: 50px;
        line-height:20px;
        font-family: Tahoma, Geneva, sans-serif;
        font-size: 12px;
        color: #FFF;
        padding-top: 12px;
        padding-right: 5px;
        padding-left: 20px;
        clear: both;
}
#building #footer a {
        color: #6FF;
}
#content .page_table tr td a {
        color: #F90;
}

.wikiTitle {
        margin: 0 15px;
        background: url(http://mepopedia.com/group/ncnu-dfll/images/wiki-1.png) repeat-x;
        background-color:#EFF; /*此處顏色設定建議可移除或設定為類似背景圖色之顏色*/
        border-radius: 10px;
        font: bold 16px/30px Georgia, "Times New Roman", Times, serif;
        color: #FFF;
        text-align: center;
}

#wikitext {
        margin-right: 60px;
        margin-left: 60px;
        font-family: Tahoma, Geneva, sans-serif;
        font-size: 16px;
        line-height: 21px;
        padding: 20px;
        border: 3px double #0CF;
        background-color: #FFF;
}

.list_tatle_title {
        height: 59px;
        background-image: url(http://mepopedia.com/group/village/imgs/list_title.gif);
        background-repeat: no-repeat;
}
.list_content {
        font-family: Tahoma, Geneva, sans-serif;
        font-size: 15px;
        height: 13px;
        padding: 5px;
        font-weight: bold;
        border-top-width: 1px;
        border-top-style: dotted;
        border-top-color: #09C;
        border-right-color: #09C;
        border-bottom-color: #09C;
        border-left-color: #09C;
        list-style-image: url(http://mepopedia.com/group/village/imgs/icon_news.gif);
        list-style-position: inside;
        background-color: #FFF;
}
.list_icon {
        background-image: url(http://mepopedia.com/group/village/imgs/icon_news.gif);
        background-repeat: no-repeat;
        background-position: center;
        width: 25px;
        border-top-width: 1px;
        border-top-style: dotted;
        border-top-color: #09C;
        background-color: #FFF;
}
.list_info {
        font-family: Tahoma, Geneva, sans-serif;
        font-size: 15px;
        color: #333;
        height: 13px;
        border-top-width: 1px;
        border-top-style: dotted;
        border-top-color: #09C;
        background-color: #FFF;
}

.list_title {
        font-family: Tahoma, Geneva, sans-serif;
        font-size: 16px;
        color: #333;
        height: 25px;
        padding: 5px;
        font-weight: bold;
        background-color: #E8FBFF;
}
.list_sides {
        background-color: #2298B6;
        width: 15px;
}
.list_botton {
        background-color: #0CF;
        height: 3px;
        border-bottom-width: 1px;
        border-bottom-style: double;
        border-bottom-color: #09F;
}
.list_table {
        margin-top: 30px;
        border: 3px double #0CF;
}

#lst_div {
        padding-top: 5px;
        padding-bottom: 5px;
}

.ForumTitleBox {
        background-image: url(http://mepopedia.com/group/ncnu-dfll/images/wiki-1.png);
        background-repeat: repeat-x;
        height: 30px;
        width: 880px;
        margin-left: 15px;
        padding-top: 2px;
}
.QWTitleBox        {
        background: url(http://mepopedia.com/group/ncnu-dfll/images/wiki-2.png) repeat-x;
        height: 50px;
        color: #FFF;
        font-family: Arial, Helvetica, sans-serif, "微軟正黑體";
        padding-top: 10px;
        font-weight: bold;
        margin: 50px 15px 0;
        border-radius: 10px;
}
.QWHeading1 {
        font-family: Tahoma, Geneva, sans-serif;
        font-size: 18px;
        color: #09C;
        border-bottom: 1px dotted #09F;
        font-weight: bold;
        background: url(http://mepopedia.com/group/ncnu-dfll/images/w4.gif) no-repeat left center;
        padding: 2px 0 8px 50px;
}
.map{
        margin-left: 20px;
}
.QWIndent{
        margin-left:-20px;
}

.links {
        height: 50px;
        padding: 10px 10px 0 0;
}
.button {
        width: 105px;
        height: 28px;
        float: right;
        margin-right: 2px;
}
.image {width: 105px; height: 28px;}

.edit {
        background:url(/group/ncnu-dfll/images/w3-2.gif);
}
.forum {
        background:url(/group/ncnu-dfll/images/w2-2.gif);
}
.post {
        background:url(/group/ncnu-dfll/images/post-2.gif);
}

.edit a .image {
        background: url(/group/ncnu-dfll/images/w3-2.gif);
}
.forum a .image {
        background: url(/group/ncnu-dfll/images/w2-2.gif);
}
.post a .image {
        background: url(/group/ncnu-dfll/images/post-2.gif);
}

.button a, .button a:link, .button a:visited {
        display:block;
}
.button a:hover .image{
        visibility:hidden; height: 0; width: 0;
}
.edit {background-repeat:no-repeat;}
.button a:hover {visibility:visible; height: 28px; width: 105px;} /*IE6*/

(編輯記錄)