創作內容

3 GP

css - 全語法+圖片對照..2009/6/20

作者：小角落..│2008-07-29 15:33:25│巴幣：0│人氣：2800

本文引用自此
本文引用自此
本文引用自此

2010年11月4日改版後，新的圖解文。

如果這篇看的一點都不懂的話，請看css - 超級新手教學
如果找不到自己想要的，請看css - 導引 (看圖說故事)
如果沒有自己想要的效果，請看css - 語法說明
想要找小細部的設定，請看css - 各區塊分類解說圖(2009/4/13)
(不過這要20元喔!!不想花錢的可以看巴哈提供的分類區塊解說圖)

這裡是其他大大的css教學css - 巴哈css教學網
色碼表、上傳空間、螢幕檢色器css - 好用軟體+好文推薦

★使用方法：　(竟然有人看不懂..真切心><)
　　　1.拉捲軸，找到和你想要改的地方相似的圖片
　　　2.將圖片上方(or 下方)的語法複製ctrl+c
　　　3.回到自己小屋，css的地方，按ctrl+f 搜尋　→　ctrl+v 貼上 →　enter
　　　4.找到相似的標籤 (ex: body{　)　，將其全部覆蓋
　　　5.若是沒有找到，就直接貼上
　　　6.預覽頁面
　　　7.若不是你要的效果，請看css - 語法說明
　　　8.新增圖片連結至各小篇說明　(2009/512)

　　　　　　　　　kinini..2009/1/19

紫色的取自異(u4)
淡藍色取自KAEDE–嵐(wsp86145)
/*-------------------------css語法開始-------------------------------*/

★新勇者資料 (太多了，請點圖進入)

#allhtml{display:none !important;}/*碎碎念隱藏2008.10.28*/
★碎碎唸，詳細改法請點這
.home_t3{font-size: 10pt;}/*留言版字變小*/

/*-----上方廣告列修改(開始) 2008.10.08-------*/

div#nt_topnews{
background:none;/*背景*/
border:0px;/*邊框*/
font-family:"trebuchet ms";/*字型*/
}
div#nt_topnews table td a{
color:#342870; /*字型顏色*/
font-size:12px; /*字型大小*/
}
input.nt_bar2{
border:1px solid #342870; /*搜尋列框*/
font-family:"trebuchet ms"; /*搜尋列字型*/
color:#666666; /*搜尋列字色*/
}
input.nt_barbtn2{
border:none; /*搜尋鈕邊框*/
font-size:12px; /*搜尋鈕字大小*/
color:#ffffff; /*搜尋鈕字色*/
background:#342870; /*搜尋鈕背景色*/
}
/*-----上方廣告列修改(結束)-------*/

/*------遊戲動漫櫃的橫線------*/

.lovegame_line{
border-bottom:1px solid #757575;}
/*動漫遊戲櫃資料的表格框線*/
/*虛線(dashed)；實線(solid)*/

.button2 img{display:none;} /*隱藏紅箭頭*/

.button3 img{display:none;}

.infom_bk img{height:0px;}/*1.勇造隱藏(a)*/
.infom_bk a{display:none;}/*2.勇造按鈕隱藏(a+b)*/

/*--精華區底線--*/
.unline a:link, .unline a:visited{TEXT-DECORATION: none;}/*一般狀態(無底線)*/
.unline a:hover{TEXT-DECORATION: underline;}/*滑鼠移入狀態(有底線)*/

.unline img{display:none;}/*隱藏文件小圖示*/

/*---隱藏統計圖---*/
#Flash_curve{display:none;}

body{
background: url(http://i274.photobucket.com/albums/jj249/kiwi_mi/bee/body-2.png) no-repeat 50% 0% #fff;
/*背景不重複.置中.置底.圖片以外的地方填滿白色*/
background-attachment:fixed; /*背景固定*/
border: solid #afd0ff 0px;/*最外面的大框*/
scrollbar-face-color: #afd0ff;/*設定軸面顏色*/
scrollbar-highlight-color: #7fbfff;/*設定軸面三角左邊顏色*/
scrollbar-shadow-color: #7fbfff;/*設定軸面三角右邊顏色*/
scrollbar-3dlight-color: #afd0ff;/*設定左立體邊顏色*/
scrollbar-darkshadow-color: #afd0ff;/*設定右立體面顏色*/
scrollbar-arrow-color: #7fbfff;/*設定箭頭的顏色*/
scrollbar-track-color: #afd0ff;}/*設定軸軌的顏色*/

/*-------------小屋區表單背景設定-------------*/
div.left {background: none;}
div.leftOut1{background: none;}
div.leftOut2{background: none;}
div.leftDown {background: none;}
div.right {background: none;}
div.righttop{background: none;}
div.rightDown {background: none;}
div.container {background: none;}
div.main {background: none;}
div.mainOut {background: none;}
div.footer {background: none;
border: solid darkblue 0px;}
/*.ssize { color:#009000;font-size: 12px; line-height: 150%; }*//*底部文字(最後一行)*/
/*div.footer font{color:red;}*//*底部文字(上面兩行)*/

/*div.mainOut table{visibility: visible;}
div.mainOut img{visibility: visible;}
div.footer td.ssize {visibility: visible;}
div.footer td {visibility: hidden;}*//*隱藏右下角圈圈*/

/*----『相關文章』欄位的捲軸---*/
.home_scroll{
bordor:1px royalblue solid;
width:650px;
height:80px;
overflow:auto;
background:none;
border: solid #afd0ff 0px;/*最外面的大框*/
scrollbar-face-color: #afd0ff;/*設定軸面顏色*/
scrollbar-highlight-color: #7fbfff;/*設定軸面三角左邊顏色*/
scrollbar-shadow-color: #7fbfff;/*設定軸面三角右邊顏色*/
scrollbar-3dlight-color: #afd0ff;/*設定左立體邊顏色*/
scrollbar-darkshadow-color: #afd0ff;/*設定右立體面顏色*/
scrollbar-arrow-color: #7fbfff;/*設定箭頭的顏色*/
scrollbar-track-color: #afd0ff;/*設定軸軌的顏色*/
text-align:left;
font-size:12px;}

.home_scroll a:link,.home_scroll a:visited{color:royalblue ;}
.home_scroll a:hover{color: royalblue;}

/*月曆*/
.home_t1 td{background:none;}  /*月曆背景色 */
.home_t1 table{background:none;}  /*月曆框線*/
/*.home_t1{color:#757575;}*//*沒寫文章的日期*/
/*.home_c1{color:#757575;}*//*2008年的字(跟t1相衝突)*/
div.right font{color:#cc7382;}  /*有寫文章的日期*/
/*.home_c1 a:hover{TEXT-DECORATION: underline;color:#aaa;}*/

/*-----------------------右下統計圖那的設定-----------------------*/

/*------右下的標題list格式-------(就是白色那一塊)*/
.post_list{
font-size:12x;
background:url(http://i274.photobucket.com/albums/jj249/kiwi_mi/bee/6a06850a.gif) no-repeat;/*覆蓋綠點點的圖*/}

li{background: none;/*隱藏綠點點*/}

/*-----post_list裡面改不掉的那一圈白色-----(藍色那一塊)*/
.postboxin{background: none;}

/*-----今日訪客等等的灰色外框-----(紅色那一塊)*/
.postbox2{
background: none;
border:0px solid #7fbfff;
filter:alpha(opacity=70);
opacity:.7;}

/*------右下的標題格式-------*/
.post_title {
height:35px;
background-image:url(http://i274.photobucket.com/albums/jj249/kiwi_mi/bee/post_title.gif);
background-position:left;
color: #009000;
PADDING-left:25; /*←文字與左方的距離*/
PADDING-top :5; /*←文字與上方的距離*/
filter:alpha(opacity=70);
opacity:.7;}

/*--小屋統計、個人紀錄文字顏色--*/
.home_c1{color:royalblue;} /*首頁*/
.home_c1 a:link, .home_c1 a:visited{color: royalblue;}/*內頁的顏色*/
.home_c1 a:hover{color: royalblue;}/*內頁的顏色*/

/*連結跳動*/
a{text-decoration:none}
a:hover{position: relative; top: 0px;left:0px;}

/*---------------------------按鈕：------------------------------*/
.button,.button3,.button4,.button_h1{/*-----勇造下的按鈕+[給紅心]+[搜尋]-----*/
border:1px dashed #70a3ff ;
background:none;
color:royalblue ;}

.button2,.button_h2{/*-----[看更多]+[訂閱他的小屋]-----*/
border:#FFF 0px dashed;
background:none; }

.button_c1{color:#70a3ff ;} /*按鈕文字顏色*/
.button_c1 img{display:none;} /*--隱藏收藏『+』--*/

/*------------------滑鼠移入按鈕---------------*/
.button2:hover{
border-top:royalblue 1px dashed;
border-right:royalblue 0px solid;
border-bottom:royalblue 1px dashed;
border-left:royalblue 0px solid;
background:#afd0ff;}

.button3:hover,.button4:hover{
border-top:royalblue 1px dashed;
border-right:royalblue 0px solid;
border-bottom:royalblue 1px dashed;
border-left:royalblue 0px solid;
background: none;}

.button_c1{color:;background:none;}
/*utton_c1 img{display:none;}
.button_h1 img{display:none;}*/

/*-------訂閱小屋按鈕(一般狀態)------------*/

.home_order_button{/*display:none;*//*隱藏訂閱小屋按鈕*/
color:royalblue;}
.home_order_button:hover{
background:none;
text-align: center;
color:#fff;
text-decoration: underline;}

/*----部落閣頁面按紐數字----*/

.tsmal{color:royalblue;}/*左邊第一頁~第幾頁的字*/
.sertext{border: dashed 1px royalblue;}/*第幾頁的框框*/
.pag{ /*非所在頁數按鈕設定*/
background:none;
color:#ff8705;
border:1px #7fbfff solid;}

.p_nolink{/*無連結時的頁數按鈕設定*/
background:none;
color:#7fbfff;
border:1px #7fbfff solid;}

.p_nextprev{/*所在頁數按鈕設定*/
background:#7fbfff;
color:#fff;
border:1px #7fbfff solid;}

.pag:hover{/*滑鼠拜訪頁數按鈕設定*/
background:#7fbfff;
color:#fff;
border:1px #7fbfff solid;}

/*文字版、留言版底圖*/
textarea {
background: url(http://i274.photobucket.com/albums/jj249/kiwi_mi/bee/d80ee3ad.png) no-repeat;
background-position:right;
padding-left: 2px;
padding-right: 100px;
/*height:220px;*/
font-family:"新細明體"; }

/*-------------給紅心按鈕設定(這是舊版) ----------------------*/
.apprise_bg tbody{visibility:hidden;}
.apprise_bg input{
visibility:visible;
position:relative;
top:20px;/*改變按鈕上下位置*/
border: 1px dashed #f5a6c0;
color:#cc7382;}

/*--------------------上方勇者小屋---------------------*/

.wide_password2{color:royalblue;} /*ID的字體顏色*/

/*---信箱銀行和勇造VIP中間那條線---*/
.wide_line{
border-top:1px dashed royalblue;
background:none;}/*勇造VIP旁邊的箭頭底色*/

*----帳號面板的文字---*/
.wide_sev{
background:none;/*信箱銀行勇造VIP的底色*/
text-decoration: none; color: royalblue;}

.wide_sev a:link,.wide_sev a:visited {
text-decoration: none; color: royalblue;}

.wide_sev a:hover,.wide_sev a:active {
text-decoration: none; color: deeppink;}

/*---我要註冊+等級---*/
.wide_sign{
font-size:12px;
text-decoration: none;
color: royalblue;/*等級的字體顏色*/
background:none;}/*等級的底色*/
.wide_sign a:link,.wide_sign a:visited {
font-size:12px;
text-decoration: none;
color: royalblue; }
.wide_sign a:hover,.wide_sign a:active {
font-size:12px;
text-decoration: none;
color: deepink;}

/*----帳號面板背景顏色設定----*/
.wide_wordbk7{
background-image: url(http://i274.photobucket.com/albums/jj249/kiwi_mi/bee/377a6659.png) ;
padding-bottom:8px;
padding-top:8px;
border:0px solid #7fbfff;}

/*隱藏勇造+登出的圖片*/
/*.wide_wordbk7 img {visibility:hidden;} */

/*-------------GP圖------------*/

/*.ability_pad img{border:none;height: 0px; }*//*隱藏GP圖*/

/*設定GP、BP區塊的背景*/
/*.ability_pad{
background-color:none;
background-image : url(http://blog.roodo.com/kimim/4d117ef9.png);
background-repeat:no-repeat;} */

/*--------------頂端選單文字(會員中心.新手上路)--------------------*/

.wide_toptext, .wide_toptext A:link,.wide_toptext A:visited{
FONT-SIZE: 7.8pt;
COLOR: royalblue ;
TEXT-DECORATION: none;}
.wide_toptext A:hover{
FONT-SIZE: 7.8pt;
COLOR: deeppink;
TEXT-DECORATION: underline;}

/*--------------------------上面頭條廣告文字----------------------*/
/*---『找遊戲』那個框框---*/
.hotext{background:none;
font-size: 10pt;
COLOR: royalblue;
border:1px dashed royalblue;}
.keynews a:link,.keynews a:visited{FONT-SIZE: 10pt;
color: royalblue;
text-decoration: none;}
.keynews a:hover{FONT-SIZE: 10pt;
color: deeppink;
text-decoration:underline;}

/*--------------------------整體頁面設定--------------------------*/

/*--部落閣「文章內的文字」--*/

.home_h4{
color:royalblue;
font-size:13px;
font-family:"新細明體"; }

/*----整體文字----*/

TD{
color:royalblue;
font-size:12px;
line-height:150%;
word-break: break-all;
word-wrap:break-word;
font-family:"新細明體"; }

A:link,A:visited{
color:#326ADA;
text-decoration:none;}/*還未造訪連結狀態*/
a:hover,a:active {
color:#326ADA;
text-decoration: underline;}/*滑鼠移入連結狀態*/

.extend{
color:#009000;
font-family:"新細明體"; }/*屋主留言回應*/

.extend a:link,.extend a:visited{
color:#326ADA;}/*特殊連結(藍色)*/
.extend a:hover,.extend a:active {color: #326ADA;}

.extend2{color:#FF0000; }/*GP*/
.extend2 a:link,.extend2 a:visited { color: #FF0000; }/*本文引用至此*/
.extend2 a:hover,.extend2 a:active {color: #FF0000;}

.extend3{color:#8E8E8E; }
.extend3 a:link,.extend3 a:visited { color: #8E8E8E; }
.extend3 a:hover,.extend3 a:active {color: #8E8E8E;}

.home_t1, .home_t1 a:link, .home_t1 a:visited{color: #58070E;}
.home_t1 a:hover {color: #7C7CA6;}
.home_t2{font-size:16px;LINE-HEIGHT: 16px;}

/*----其他共用部分----*/
.line{border-bottom:1px dashed #7fbfff;}/*虛線*/

.line2{border-top:1px solid #7fbfff;}/*實線*/

.article_pic{
border:none;
height: 0px;
width: 0px;}/*文章或畫作的縮圖邊框(↑部落格新文章旁邊的巴哈圖片)*/

.home_input1{
color:#999999;
border:1px dashed #70a3ff ;
background-color:none;}/*input實線(只用於引用文章網址處)*/

.home_input2{/*input1以外的所有輸入框(留言框的文字)*/
color:royalblue;
border:1px dashed #70a3ff ;
background-color:#fff;}/*input實線*/

/*--------------------------框架------------------------------*/

.infom_bk{
border-left:1px solid #7fbfff;
border-right:1px solid #7fbfff;
padding-top:10px;}/*小屋首頁－勇者資料區背景色*/
[img=http://i274.photobucket.com/albums/jj249/kiwi_mi/bb/a11.png ulr=http://home.gamer.com.tw/blogDetail.php?owner=kinini&sn=2447]

/*----外部大框架設定----*/

.category_title{
background:none;
height:10px;
border-top:1px solid #7fbfff;
border-left:1px solid #7fbfff;
border-right:1px solid #7fbfff;}

.category_title2{
background:none;
height:10px;
border-top:1px solid #7fbfff;
border-left:1px solid #7fbfff;
border-right:1px solid #7fbfff;}

.category_word{
color:royalblue;
font-size:14px;
font-weight:bold;
padding-left:10px;
padding-top:20px;
padding-bottom:2px;
letter-spacing:1px;}

.category_bk{
background: none;
border-left:1px solid #7fbfff;
border-right:1px solid #7fbfff;
padding:12px;/*內文與左右兩邊的距離*/}

.category_footer{
border-left:1px solid #7fbfff;
border-right:1px solid #7fbfff;
border-bottom:#7fbfff 1px solid;
background:none;
height:10px;}

.category_bk tBODY{height:130%;}/*縮小精華區的上下間距*/

/*----表格設定(置於大框架中)----*/

.box1{
border:1px solid #7fbfff;
padding:5px;
margin-top:5px;}

.box_title{
background:#7fbfff;
font-weight:bold;
letter-spacing:2px;}

.box_list1{
background:none;}
　說明：因為首頁遊戲櫃的出現，所以改成這樣(覆蓋舊的)。←這段說明文字不用貼到css

.box_list2{
background:none;
border-left:0px dashed #ff3399; }

　說明：因為首頁遊戲櫃的出現，所以改成這樣(覆蓋舊的)。←這段說明文字不用貼到css

.box_icon1{
background-image:url(http://pic.bahamut.com.tw/home/list_icon1.gif) no-repeat;}/*三角形箭頭icon*/

.box_icon2{
background-image:url(http://pic.bahamut.com.tw/home/list_icon2.gif) no-repeat;}/*圓形彈珠icon*/

/*-----------------------最上方顯示大圖-----------------------*/
.banner{background:none;
height:120px;
padding-left:540px; /*文字距離左邊540px*/
padding-top:40px;} /*文字距離上面40px*/

.banner_t1{
color:royalblue;
font-weight:bold;
font-size: 10pt; }

.banner_t1 a:link,.banner_t1 a:visited,.banner_t1 a:hover{
color:royalblue;
font-weight:bold;
text-decoration:inherit;
font-size: 10pt; /*文字大小*/
}/*暱稱和帳號文字*/

.banner_t3{
color:royalblue;
line-height:18px;
height:20px;}/*碎碎唸文字顏色*/

.banner_t4{color:#5ca8f5;}/*顯示官階的文字顏色*/
.banner_t5{color:#5ca8f5;}/*顯示稱號的文字顏色*/

.banner image{display:none;}/*隱藏稱號圖片*/
/*.banner table{display:none;}*//*隱藏帳號暱稱碎碎唸(『勳章』)*/

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

.menu{margin-top:0px;
background:none;
/*position: relative;*/
/*top:70px;*//*選單的上下位置*/
/*left:0px;*//*選單的左右位置*/
/*width:150px;*//*選單的寬度*/
height:14px;}

/*----選單所在頁面狀態----*/
.menuIN{
background:none;
font-weight:none;
color: royalblue;
height:14px;
line-height: 14px;
text-align: center;
text-decoration: none;
border:royalblue 0px dashed;}

.menuIN a:link,.menuIN a:visited{
font-weight:bold;/*文字粗體設定(bold)*/
color:royalblue;/*文字顏色設定(在那頁文字的顏色)*/
height:14px;/*表格的高度*/
line-height:14px;/*內文的文字行高*/
text-align:center;/*文字置中*/
text-decoration:none;/*刪除文字的連結底線*/
}
.menuIN a:hover{
background:none;}

/*----選單非所在頁面狀態----*/
.menuout {
COLOR: royalblue;
height:14px;
font-weight:none;
line-height: 14px;
text-align:center;
text-decoration:none;}

.menuout a:link,.menuout a:visited {
color: royalblue;
font-weight:none;
height:14px;
line-height: 14px;
text-align:center;}

.menuout a:hover {
background-color:;
font-weight:none;
color:royalblue;
height:14px;
line-height:14px;
text-align:center;
text-decoration: none;
font-weight:bold;/*文字粗體設定(bold)*/
border:deeppink 0px dashed;}

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

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

.menubarB1{background:none;}/*次選單與主選單連接部分*/

.menubarB3{
background:#bfdfff;
border:1px dashed #7fbfff;
padding:6px;
text-align:left;
filter:alpha(opacity=70);
opacity:.7;}/*放次選單按鈕的背景色*/

.menubarB2{background:none;}/*次選單結束部分*/

/*--次選單的文字顏色--*/
.home_t1, .home_t1 a:link, .home_t1 a:visited{color: royalblue;}
.home_t1 a:hover {color: deeppink;}

/*-----------------------小屋封面圖------------------------------*/

.cover_pic{
height:0px;
background:none;}/*COVER圖*/

/*---------------------各文章列表區(下方)---------------------*/

/*----個人部落閣----*/
/*blog標題底色*/
.article_t1{
background:none;
color:forestgreen;
font-weight:bold;}

.article_t1 a:link, .article_t1 a:visited{
color:forestgreen;
font-weight:bold;}/*個人部落閣文章標題顏色*/

.article_t1 a:hover, .article_t1 a:active {
font-weight:bold;
color: forestgreen; }

.articlebox{
border-left:0px dashed #ff8705;
border-right:0px dashed #ff8705;
border-top:1px dashed #7fbfff;
border-bottom:1px dashed #7fbfff;
background:url(http://i274.photobucket.com/albums/jj249/kiwi_mi/bee/art.gif) no-repeat;
background-position:right;
text-align:left;
height:130px;
width:500px;/*沒有這行,寬度會強制變成變成720px*/
/*width:100%;*/
padding:8px;
}/*個人部落閣最新文章及GP值底色(BOLG那個內框框)*/

.article_hr{
height:0px;
border-top:0px;
border-left:0px;
border-right:0px;
border-bottom:1px dashed red;}/*版主回應分隔線*/

/*----個人精華區----*/
.elite{
color:#0055CB;
font-size:15px;
font-weight:bold;}

.elite a:link, .elite a:visited{
color:#0055CB;
font-size:15px;
font-weight:bold;}/*個人精華文章標題顏色*/