css - 自我風格的選單 5/25

在勇者大廳發現有人把選單..
改成自己的特殊文字..或是圖片~
研究了很久><

適用於IE瀏覽器..
火狐不支援唷!!!-----感謝xzxc487212 (散碎)


1.就是這樣↓




2.這是選單的語法..
　(用ctrl+f 搜尋『menu』唷!! 重複寫會衝突的)

.menu{
background:transparent;
position: relative; /*選單浮動(讓選單可以出現在任意處)*/
top:0px;/*選單的上下位置*/
right:250px;/*選單的左右位置*/
width:150px;/*選單的寬度*/
height:14px;}

/*----選單所在頁面狀態----*/
.menuIN{weight:0px;}

/*--拜訪的的設定--*/
.menuIN a:link,.menuIN a:visited{
color: #000;/*#BA9986; 文字顏色設定*/
height:45px;
line-height:0px; /*內文的文字行高*/
text-decoration:none; /*刪除文字的連結底線*/}


/*----選單非所在頁面狀態----*/
.menuout {
COLOR: #757575;
line-height: 0px;}

.menuout a:link,.menuout a:visited {
color: #757575;
height:44px;
line-height: 0px;}

.menuout a:hover {
color:#111;
height:44px;
line-height:0px;
text-align:center;
text-decoration: none;}



3.將你要的文字畫在div.left 那張圖
　我是用這張↓



ps.不懂什麼是div.left ? 請看css - div
div的設置方法，請看css - 上方主圖+封面圖!?



4.然後你會看到選單變成這樣..↓
　兩個字重疊了..





5.怎麼把原來的字變不見呢?
原來是這行在搞鬼!!↓
line-height:0px; /*內文的文字行高*/
把文字的行高設定成　0px..
文字就會接近看不見..
變成這樣..




5-1 調整圖片與選單的高度
　　方法1.把圖片文字拉下來一點，重新上傳圖片
　　方法2.調整選單(menu)內的top或是bottom數值




6.然後再將文字的顏色設定成與背景相符合的顏色
color: #757575;　　
(像我是改成#FFF 白色的)


6.1　若是底圖不是簡易可分辨的顏色
　　可以參考css - 好用軟體+好文推薦推薦的軟體★北斗色彩識別器-------5/25



7.如果你設定的文字比較高or小
可以改文字的高度
height:44px;
(記得全部都要改喔!!)


8.『完成』



附註:
.menu{
background:transparent;
position: relative; /*選單相對位置(寫這行才能設定top那些)*/
top:0px;/*選單的上下位置*/
right:250px;/*選單的左右位置*/
width:150px;/*選單的寬度*/
height:14px;}


ps.可以設定 top.bottom.right.left 的 px

↑上面這段是直立式的選單寫法..
詳細請參考..css - 直立式選單




以上取自..黑兔(kp25467 )的小屋


這位大大真是厲害!!
由衷佩服XD
哪像我都死腦筋ˊˋ..
沒有創造力阿!!!


一個人想破頭都想不到..
但是經由別人一點..
似乎什麼都變簡單了@O@"

發明家很偉大~
發現家也很厲害的呀!!!!


...