日誌2007-09-07 13:58

【小屋】CSS自訂版面：四、主選單與次選單篇<簡化版>

前言：＜本文發表於2007/09/07 最後修改於2007/09/07 14:00　如語娃娃＞
　　。經過訪客反應前篇太複雜──看不懂。
　　　所以，這篇刪去大部分的說明，只是想找刪掉藍線方法的人，直接複製次選單以下的內容，複製貼上即可。
　　‧說明文字會以「 /**/ 」包夾，「/**/其中的說明文字」以及「CSS編輯中空格跟空行」皆不會造成語法上的影響，可以放心留著。
　　‧想知道其他運用方式的人請參考前篇，若本篇還是沒能讓您理解，麻煩請說您希望改如何的感覺，如語會盡可能的為您服務。

　　──很抱歉，在下只會細部並補充自己所知道的，以致於文章或許難以理解。
　　　　若分享無法解答您的疑問，懇請您將疑問提出，感謝您的流覽與參考。──


───────────────────────────────────────────
───────────────────────────────────────────
/*---------------------------主選單---------------------------*/
/*選單背景圖*/
.menu{
background:url(http://) no-repeat center #FFFFFF;
/*背景圖設定，您也可以將此區設定為「none(無背景)」或是「#FFFFFF(色碼)」。*/
height:35px;
/*選單表格的高度，太小的話選單會不見喔(整個被隱藏…抖)，基本大小可以依造您對選單樣式修改的要求。*/
/*注意：若要自訂選單高度，接下來主選單其他圖片設定的高度也要一起修改，才會真的呈現出您所要的表格高度。*/
/*註：寬度巴哈已鎖，無法設定。*/
}

/*----選單所在頁面狀態----*/
.menuIN{
background:url(http://) no-repeat 90% 90%;
/*主選單上，您正在瀏覽的頁面的選項底圖，像現在您正在看部落閣中的文章，上面已顯示的選項底圖小小月亮就是囉。*/
text-align: center;/*文字置中*/
}

/*拜訪中頁面的連結文字樣式*/
.menuIN a:link,.menuIN a:visited{
font-weight:bold;/*文字粗體設定*/
color: #b23535;/*文字顏色設定*/
height:35px;/*表格的高度*/
line-height: 35px;/*內文的文字行高*/
text-align:center;/*文字置中*/
text-decoration:none;/*刪除文字的連結底線*/
}

/*----選單非所在頁面狀態----*/
/*「.menuout」無連結的感覺這邊可以不加，因為，選單都有連結，所以很可有可無*/
/*既然是CSS中本來就有的，那留著也不會有壞處一ˇ一"*/
.menuout {
font-weight:bold;/*文字粗體設定*/
COLOR:#7C7C7C;/*文字顏色設定*/
height:35px;/*表格的高度*/
line-height: 35px;/*內文的文字行高*/
text-align: center;/*文字置中*/
text-decoration: none;/*刪除文字的連結底線*/
}

/*-選單非所在頁面「有連結」的設定-*/
/*無滑鼠拜訪及曾拜訪過的頁面連結設定*/
.menuout a:link,.menuout a:visited {
font-weight:bold;/*文字粗體設定*/
COLOR:#7C7C7C;/*文字顏色設定*/
height:35px;/*表格的高度*/
line-height: 35px;/*內文的文字行高*/
text-align: center;/*文字置中*/
}

/*滑鼠拜訪的連結設定，就是滑鼠移上去的效果*/
.menuout a:hover {
background:url(http://) no-repeat;/*背景圖設定*/
font-weight:bold;/*文字粗體設定*/
color:#b23535;/*文字顏色設定*/
height:35px;/*表格的高度*/
line-height: 35px;/*內文的文字行高*/
text-align: center;/*文字置中*/
text-decoration: none;/*刪除文字的連結底線*/
DISPLAY: block;/*區塊要顯示*/
}

/*---------------------------次選單---------------------------*/
/*----無次選單狀態(訪客瀏覽時看得到)----*/
/*次選單與主選單連接部分*/
.menubarA1{
background:none;/*無背景設定。*/
border:0px;/*表格的框線。*/
height:0px;/*表格無高度。*/
}

/*次選單結束部分*/
.menubarA2{
border:0px;/*沒有框線*/
height:33px;/*表格高度*/
}
/*語法末端一定要加的符號*/

/*----有次選單狀態(屋主瀏覽時看得到)----*/
/*說真的如果您很介意自己登入自己的小屋時和訪客瀏覽時一樣，這邊在設定即可*/
/*設定方式與無選單的設定雷同。*/

/*次選單與主選單連接部分*/
.menubarB1{
background:none;
border:0px;
}
.menubarB3{
background:;
border:0px;
padding:6px;
text-align:left;
}
/*放次選單按鈕的背景色*/

.menubarB2{
height:33px;
background-image : url(http://myhome.apbb.com.tw/indream228/002.gif);
}
/*次選單結束部分*/