創作內容

12 GP

【小屋】CSS自訂版面：四、主選單與次選單的親密關係篇

作者：莉薇婭莞夢│2007-09-07 11:34:23│巴幣：0│人氣：2773

＜本文發表於2007/09/07 最後修改於2007/09/07 22:04　如語娃娃＞
　　‧09/07 22:04
　　　「選單所在頁面狀態（.menuIN）」部分，簡化語法，詳細原因請看回應文說明。
-----
前言：
　　。以下內容可以對照「CSS自訂面板」的語法內容。
　　‧經過重重考驗，我們教學也來到主選單下方顯示的部份，如果你還搞不定那藍色的線條，這篇就稍微研究一下吧。
　　‧本篇的重點除了連接選單區的修改外，文中亦補充一點小小的技巧（或許已經有人知道了呵），不過如果你想更改選單的高度，這篇就看一下吧！（有人說不能改高度？不，錯了，只是沒有完全設定。）
　　‧本篇包含主選單與次選單的講解，所以有點落落長，不過這樣才有連貫，哈哈。（雖然多數都是相同內容的說明或語法。ＸＤ）
　　‧說明文字會以「 /**/ 」包夾，「/**/其中的說明文字」以及「CSS編輯中空格跟空行」皆不會造成語法上的影響，可以放心留著。

　　＜謝謝依璐卡、歪歪、sｈα n ｅ在本篇延期公告上的回應。
　　　也請依璐卡和歪歪需要麻煩一點重新收文唷（汗），那篇是公告是公告…（被毆）＞

本篇講解之部分─示意圖：

───────────────────────────────────────────
───────────────────────────────────────────
/*---------------------------主選單---------------------------*/
/*選單背景圖*/
.menu{
background:url(http://myhome.apbb.com.tw/indream228/menubar.gif) no-repeat center #FFFFFF;
/*背景圖設定，您也可以將此區設定為「none(無背景)」或是「#FFFFFF(色碼)」。*/
/*以目前如語個人有使用選單背景圖來說──
「no-repeat」就是背景圖不重複。或可選：
　　repeat(重複排列-網頁預設：不設定排列方式預設就是這個效果)、
　　repeat-x(在x軸重複排列，垂直排列<常見於直式背景圖的重複方式>)、
　　repeat-y(在y軸重複排列，水平排列<常見於橫式背景的重複排列，可參考如語小窩的大背景>)
「center」背景圖置中。或可選：
　　90% 90%(背景圖片x與y軸的位置)、
　　top(向上對齊)、bottom(向下對齊)、left(向左對齊)、right(向右對齊)，
「#FFFFFF」則是無圖的部分呈現白色(可以不加，不加就是透明)*/
height:35px;
/*選單表格的高度，太小的話選單會不見喔(整個被隱藏…抖)，基本大小可以依造您對選單樣式修改的要求。*/
/*注意：若要自訂選單高度，接下來主選單其他圖片設定的高度也要一起修改，才會真的呈現出您所要的表格高度。*/
/*註：寬度巴哈已鎖，無法設定。*/
}
/*語法末端一定要加的符號*/

/*----選單所在頁面狀態----*/
.menuIN{
background:url(http://myhome.apbb.com.tw/indream228/006-3.gif) no-repeat 90% 90%;
/*主選單上，您正在瀏覽的頁面的選項底圖，像現在您正在看部落閣中的文章，上面已顯示的選項底圖小小月亮就是囉。*/
/*小技巧：假設您的圖小小的，也可以設定它顯示的位置唷，就像目前您看到那小小月亮所在的位置就是90%90%的位置。*/
/*附註語法──
「no-repeat」就是背景圖不重複。或可選：
　　repeat(重複排列-網頁預設：不設定排列方式預設就是這個效果)、
　　repeat-x(在x軸重複排列，垂直排列<常見於直式背景圖的重複方式>)、
　　repeat-y(在y軸重複排列，水平排列<常見於橫式背景的重複排列，可參考如語小窩的大背景>)
「center」背景圖置中。或可選：
　　90% 90%(背景圖片x與y軸的位置)、
　　top(向上對齊)、bottom(向下對齊)、left(向左對齊)、right(向右對齊)，*/
text-align:center;
/*內文置中*/
}
/*語法末端一定要加的符號*/

/*拜訪中頁面的連結文字樣式*/
.menuIN a:link,.menuIN a:visited{
font-weight:bold;
/*文字粗體設定*/
color: #b23535;
/*文字顏色設定*/
height:35px;
line-height: 35px;[/font]
/*內文的文字行高*/
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://myhome.apbb.com.tw/indream228/001.gif) no-repeat;
/*背景圖設定，您也可以將此區設定為「none(無背景)」或是「#FFFFFF(色碼)」。*/
/*小技巧：假設您的圖小小的，也可以設定它顯示的位置唷，就像目前您看到那小小月亮所在的位置就是90%90%的位置。(懶得找說法了XD)*/
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;
/*高度依需要調整，因為我在這邊有加分隔圖，就是不管您到哪個頁面都看得到主選單與內文間多的那個分隔圖*/
background-image : url(http://myhome.apbb.com.tw/indream228/002.gif);
/*圖址，可以不設定直接刪掉這行。*/
}
/*語法末端一定要加的符號*/

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

/*次選單與主選單連接部分*/
.menubarB1{
background:none;
border:0px;
}
.menubarB3{
background:;
border-left:0px;
border-right:0px;
border-top:0px;
border-bottom:0px;
padding:6px;
text-align:left;
}
/*放次選單按鈕的背景色*/
.menubarB2{
height:33px;
background-image : url(http://myhome.apbb.com.tw/indream228/002.gif);
}
/*次選單結束部分*/

喜歡 12 收藏 32 引用 2 留言推上首頁檢舉

引用網址：https://home.gamer.com.tw/TrackBack.php?sn=949955
All rights reserved. 版權所有，保留一切權利

相關創作

【小屋】CSS自訂版面：文章標題和下方的上下篇連結顏色分開設定

【小屋】CSS自訂版面：進階─部落閣:相關文章欄位篇

【小屋】CSS自訂版面：進階─頁碼按鈕樣式修改　篇

【小屋】CSS自訂版面：最近常見的問題２─右下透明背景的設定

【小屋】CSS自訂版面：最近常見的問題１─最新文章欄位的預設圖

留言共 23 篇留言

白菊：
呵呵

謝謝教學唷

努力研究中^O^

09-07 11:50

莉薇婭莞夢：
不客氣，如果有問題的話再提出來唷˙ˇ˙09-07 12:19

闇光：
話說這部分CSS開放後我第一個想去改的。XD

教學辛苦了。★

09-07 11:54

莉薇婭莞夢：
呵呵~因為看它不順眼很久了吧XD~09-07 12:18

Beatrice：
( ′▽`)-oGP　　　繼續支持！

09-07 11:56

莉薇婭莞夢：
謝謝你M(_ _)M09-07 12:17

林鴻鈞：
真有心啊

09-07 12:30

莉薇婭莞夢：
呵呵ˊˇˋ~09-07 13:11

Minnie：
一樣細心跟實用啊XD
辛苦了!!加油!!

支持你唷^W^我推！ ( ′▽`)-oGP

09-07 12:34

莉薇婭莞夢：
謝謝XD~09-07 13:11

瑞希‧アサリン：
有時候寫的太詳細反而有點看不懂呢－－"

09-07 12:56

莉薇婭莞夢：
對不起，讓您看不懂ˊˋ:

常常要求寫得詳細，是我的缺點，但是…我能做的是把自己所知的弄出來…
我的整合能力沒有其他大大厲害，很抱歉沒能達到您理解講解內容的要求。

有時間、有機會，我會再試著改善文章內容。
謝謝您的指點。09-07 13:19

莉薇婭莞夢：
若您只是要刪除那兩條礙眼的線，請直接參考以下
/*---------------------------次選單---------------------------*/
/*----無次選單狀態(訪客瀏覽時看得到)----*/
/*次選單與主選單連接部分*/
.menubarA1{
background:none;/*無背景設定。*/
border:0px;/*表格無框線。*/
height:0px;/*表格無高度。*/
}

/*次選單結束部分*/
.menubarA2{
border:0px;/*沒有框線*/
height:０px;/*表單高度*/
}09-07 13:27

J i l l ~*：
我看不懂這篇是改哪的QQ
國文造詣太差 = =
有沒有圖可以看(被拖走|||)

09-07 13:24

莉薇婭莞夢：
主選單
　　「小屋首頁個人部落閣個人精華區個人好友圈個人板個人資料逛勇者大廳」

次選單
　　屋主登入小屋後會出現的功能列

次選單
/*次選單與主選單連接部分*/
　　主選單和次選單連接部分的藍色線09-07 13:33

莉薇婭莞夢：
已在文首加上圖片了˙ˇ˙

謝謝你提出問題唷09-07 14:25

歪歪：
如語，請問一下哦！
/*選單所在頁面狀態*/裡的字串，因為看起來很像，所以我把它合成一個，
.menuIN a:link,.menuIN a:visited{
background:url(http://pic.bahamut.com.tw/home/menu_in.gif);
background-repeat:no-repeat;
background-position:90% 90%
font-weight:bold;
color:#4B0082;
height:35px;
line-height:35px;
text-align:center;
text-decoration:none;
}
但那個選單圖變得有點奇怪，是因為不能合在一起嗎？

09-07 15:26

莉薇婭莞夢：
　　經過確認「.menuIN」主要是設定背景的，顏色、文字的設定並不會有影響，因為選單是有連結的。
　　至於為什麼圖片會重複顯示，是因為「a:link」它也是可以設定連結的背景的，雖然「a:visited」也有背景，但是呈現的位置會和「a:link」的重疊，所以滑鼠移到選單上看起來只有「.menuIN」及「a:link」的背景圖共兩枚相同的XD。
　　這樣說明，可以了解嗎＠＠？

.menuIN{
background:url(http://myhome.apbb.com.tw/indream228/006-3.gif) no-repeat 100% 100%;
}
/*語法末端一定要加的符號*/

/*拜訪中頁面的連結文字樣式*/
.menuIN a:link,.menuIN a:visited{
font-weight:bold;
/*文字粗體設定*/
color: #b23535;
/*文字顏色設定*/
height:35px;
/*表格的高度，假設您有自訂選單背景的高度，這邊一定要修改選單背景高度數字以下的數值*/
line-height: 35px;
/*內文的文字行高*/
text-align:center;
/*文字置中*/
text-decoration:none;
/*刪除文字的連結底線*/
}
/*語法末端一定要加的符號*/

－－－－－
　　歪歪謝謝妳點出來啊，這樣教學可以簡單一點了ＸＤ～09-07 21:39

瑞希‧アサリン：
我只是把看完的感想說出來而已沒想到嚇到您了@@"

如語不去當教職員太可惜了>▽<

09-07 15:28

莉薇婭莞夢：
囧
是真的很難過……人家心思敏感（被毆）

當教職員。。。我會被學生反過來吃得死死的ＸＤ
要求寫的細是我對自己的要求…
因為詳細，只要理解，隨時很容易因為看文字就知道該設定哪裏……
呵呵09-07 21:45

歪歪：
剛又試了一下，發現下面這串語法好像沒有也沒影響耶！ 0.0
如語大大可以幫忙確認嗎？ (我實在不敢很確定…)
.menuIN a:link,.menuIN a:visited{
font-weight:bold;
color:#0055CB;
height:35px;
line-height:35px;
text-align:center;
text-decoration:none;
}

09-07 15:38

莉薇婭莞夢：
　　有的，它是有影響的，只是影響很細微啊（汗）
　　以目前瀏覽區域為「個人部落閣」
　　「a:link」目前瀏覽頁面的連結文字樣式，現在妳看上方部落閣的文字，它是有連結的，只是在語法中我們將它的連結底線刪除，並使它呈現的連結文字顏色為紅色的。
　　「a:visited」滑鼠拜訪目前瀏覽頁面的連結樣式，當你把滑鼠移到文字上時，其實它本來也該會顯示連結特有的底線，只是我們在下方語法中也把它消除了。
　　如果我們不設定選單專屬的語法，它將會套用我們在最初「/*----整體文字----*/」中設定的連結樣式。

.menuIN a:link,.menuIN a:visited{
font-weight:bold;
color:#0055CB;
height:35px;
line-height:35px;
text-align:center;
text-decoration:none;
}09-07 21:56

~Ceylon錫蘭~：
收藏去了!感恩啊~>口<

09-07 18:07

莉薇婭莞夢：
不客氣＞ˇ＜09-07 21:57

歪歪：
如語~ (因為娃娃有另一個人也這樣叫…)
我發現 /*選單所在頁面狀態*/ 一定要再多加個「text-align:center;」！
不然字會靠左對齊…
.menuIN{
background:url(http://pic.bahamut.com.tw/home/menu_in.gif)
background-repeat:no-repeat;
text-align:center;
}/*造訪中選單頁面背景*/

09-07 22:19

莉薇婭莞夢：
噗~好的~明天改~

超感謝妳的熱心幫忙XD~
等等送妳我唯一的心(害羞)09-07 23:03

俾斯麥：
關於籃白那個地方

語法是什麼阿@@?

有辦法用透明嗎?

09-10 17:10

莉薇婭莞夢：
主要是以下的部份，用了之後就透明囉˙ˇ˙~~

/*---------------------------次選單---------------------------*/
/*----無次選單狀態(訪客瀏覽時看得到)----*/
/*次選單與主選單連接部分*/
.menubarA1{
background:none;
/*無背景設定。要設定也可以自行調整。*/
border:0px;
/*如語的窩沒有那個藍白的分隔線就是這邊設定的。*/
height:0px;
}
/*語法末端一定要加的符號*/

/*次選單結束部分*/
.menubarA2{
border:0px;
/*沒有框線*/
}
/*語法末端一定要加的符號*/09-11 12:25

天忌：
>"<真害，愈佈置愈糟糕。
主要就是點下去的那一格沒有顯示出圖案
不過也由於不知道問題出在哪邊只好整個拿來請你幫忙修改一下

/*---------------------------主選單---------------------------*/
.menu{
background:url(http://i232.photobucket.com/albums/ee320/dd8842245/03.gif) no-repeat;
height:35px;
}/*選單背景圖*/

/*----選單所在頁面狀態----*/

.menuIN{
background:url(http://i232.photobucket.com/albums/ee320/dd8842245/03.gif) no-repeat 90% 90%;
font-weight:bold;
color: #0055CB;
height:35px;
line-height: 35px;
text-align: center;
text-decoration: none;
}
.menuIN a:link,.menuIN a:visited{
font-weight:bold;
color:#0055CB;
height:35px;
line-height:35px;
text-align:center;
text-decoration:none;
}

09-11 15:57

莉薇婭莞夢：
囧...我還看那麼久……原來是放置位置的問題！

請把所在頁面背景圖後面的90%90%刪掉就可以了。

像這樣↓
/*----選單所在頁面狀態----*/

.menuIN{
background:url(http://i232.photobucket.com/albums/ee320/dd8842245/03.gif) no-repeat;
font-weight:bold;
color: #0055CB;
height:35px;
line-height: 35px;
text-align: center;
text-decoration: none;
}09-11 16:07

天忌：
/*----選單非所在頁面狀態----*/
.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://i232.photobucket.com/albums/ee320/dd8842245/03.gif) no-repeat;
font-weight:bold;
color:#0055CB; height:35px;
line-height:35px;
text-align:center;
text-decoration: none;
DISPLAY: block;
}

/*---------------------------次選單---------------------------*/

/*----無次選單狀態----*/
.menubarA1{
background:#AFE8F0;
border-left:1px solid #CCCCCC;
border-right:1px solid #CCCCCC;
border-top:0px;
border-bottom:1px solid #5CBAC8;
}/*次選單與主選單連接部分*/

.menubarA2{
background:#EBEBEB;
border-left:1px solid #CCCCCC;
border-right:1px solid #CCCCCC;
border-top:0px;
border-bottom:0px;
}/*次選單結束部分*/

09-11 15:58

莉薇婭莞夢：
前面的已回應，請看第一篇。09-11 16:09

天忌：
/*----有次選單狀態----*/
.menubarB1{
background:#AFE8F0;
border-left:1px solid #CCCCCC;
border-right:1px solid #CCCCCC;
border-top:1px;
border-bottom:1px;
}/*次選單與主選單連接部分*/

.menubarB3{
background:#D8F1F4;
border-left:1px solid #CCCCCC;
border-right:1px solid #CCCCCC;
border-top:1px;
border-bottom:1px solid #5CBAC8;
padding:6px;
text-align:left;
}/*放次選單按鈕的背景色*/

.menubarB2{
height:33px;
background-image : url(http://i232.photobucket.com/albums/ee320/dd8842245/03.gif);
}
/*次選單結束部分*/

主要就是想要拿http://i232.photobucket.com/albums/ee320/dd8842245/03.gif為背景兼按鈕

另外
http://home.gamer.com.tw/home.php?owner=dd8842245
我的小屋主標題到基本資料的分格線想要弄掉
也不知道怎麼弄

09-11 15:58

莉薇婭莞夢：
灰色和藍色？（早知道我果然寫得不夠詳細）
來請看到有這句話「/*次選單與主選單連接部分*/」「次選單結束部分」的部份的語法，不論是有選單無選單。
把框線（ＢＯＲＤＥＲ）和高度（ＨＩＧＨＴ）設成０即可。
以下是簡化後的，請核對後再複製貼上到它的位置上。

/*----無次選單狀態----*/
.menubarA1{
border:0px;
height:0px;
}/*次選單與主選單連接部分*/
.menubarA2{
border:0px;
height:0px;
}/*次選單結束部分*/

/*----有次選單狀態----*/
.menubarB1{
border:0px;
height:0px;
}/*次選單與主選單連接部分*/
.menubarB2{
border:0px;
height:0px;
}/*次選單結束部分*/09-11 16:18

天忌：
感謝你^^
問題已解決^^

09-11 16:44

莉薇婭莞夢：
不客氣˙ˇ˙~
很高興有幫上忙XD~09-11 16:47