LV. 27
GP 1k

【分享】CSS版面套用:七姬物語─空澄樣

樓主 如語娃娃 indream228
GP1 BP-
  這兩天弄了小空樣的版面,參考我家小屋目前的版面,就可以知道下方語法的呈現模樣。如果喜歡的話,將下方語法整個複製,到你的小屋自訂版面全選後,貼上取代您原本的語法即可。
  話說還有一塊還沒改到……就是左上的個人資料小屋那邊,還是自己前一個設計的圖,最近會改掉吧,等我想到放什麼樣子的圖比較好的時候XD。

  適用瀏覽器:IE、火狐(沒意外的話)
  適合瀏覽解析:1024*768以上


/*────────────────各區共─────────────────*/
/*=========================== 主體背景 ============================*/
/*===================================================================*/
/*主體背景─次背景*/
div.left {padding-top: 0px;background: none;}
div.leftOut1{
padding-top: 0px;
background-color :transparent;
background-image:url(http://i277.photobucket.com/albums/kk75/indream228/b5ebcf36.jpg);
background-position :50% 0%;
background-repeat:no-repeat; /*背景圖片不重複排列*/
}
div.leftOut2{padding-top: 0px;background: none;}
div.leftDown {background: none;}
div.right {background: none;}
div.rightDown {background: none;}
div.container {padding-top: 0px;background-color :transparent;}
div.main {padding-top: 0px;background: none;}
div.mainOut {padding-top: 0px;background: none;}
div.mainOut img{visibility:visible;}
div.footer {background: none;}

/*網頁下方─不知所以的圓圈圈*/
div.footer table {visibility:hidden;}
.footer .ssize {visibility:visible;}
table {background: none;}
td {background: none;}
img {visibility:hidden;}

/*主體背景─主背景*/
body{
/*--設定網頁外框--*/
border: 0px solid #000000;
/*---主背景設定---*/
background-color :#486EB4; /*背景底色*/
background-image : url(http://i277.photobucket.com/albums/kk75/indream228/BG_LOGO.jpg); /*背景圖片網址*/
background-position :50% 0%;
background-repeat:no-repeat; /*背景圖片不重複排列*/
background-attachment: fixed; /*背景圖片固定*/
/*--卷軸樣式設定--*/
/*SCROLLBAR-FACE-COLOR:# ;
SCROLLBAR-HIGHLIGHT-COLOR:# ;
SCROLLBAR-SHADOW-COLOR:# ;
SCROLLBAR-3DLIGHT-COLOR:# ;
SCROLLBAR-DARKSHADOW-COLOR:# ;
SCROLLBAR-ARROW-COLOR:# ;
SCROLLBAR-TRACK-COLOR:# ;*/
/*--基本游標設定。若要使用,將前後的符號刪掉即可--*/
/*cursor:url(http://);*/
/*--基本項目符號設定--*/
/*list-style:url(http://);*/
}

/*=========================== 主體前景 ============================*/
/*===================================================================*/
/*無連結─整體文字*/
TD{
color:#4774b2;/*顏色*/
font-size:13px;/*大小*/
line-height:150%;/*行高*/
font-family:"Arial";/*字型*/
/*word-break:break-all;word-wrap:break-word;換行樣式*/
}
/*有連結─整體未造訪連結*/
A:link{
color:#FFFFFF;
text-decoration:none;}
/*有連結─整體造訪中連結*/
A:hover,.unline A:hover{
color:#0064AF;
text-decoration: underline;}
/*有連結─整體已造訪連結*/
A:visited{
color:#FFFFFF;
text-decoration:none;}

/*無連結─特殊連結(藍色)及屋主文章留言*/
.extend{
color:#00b21d;}
/*有連結─好友最新文章列表─文章標題、個人最新收錄精華連結*/
.extend a:link,.extend a:visited{
color:#4169e1;}
/*無連結─GP數與驗證碼顏色*/
.extend2{
color:#FF0000;}
/*有連結─部落閣文章「本文引用至此」的連結*/
.extend2 a:link,.extend2 a:visited{
color:#FF0000;}
/*灰色-備註與說明文字*/
.extend3{
color:#8E8E8E;}
.extend3 a:link,.extend3 a:visited{
color:#8E8E8E;}
.home_t1 a:link,.home_t1 a:visited{
color:#4169e1;}

/*按鈕─去圖*/
.button_c1 img{display:none;}
.button2 img{display:none;}
.button3 img{display:none;}
/*按鈕─無連結*/
.button2,.button3,.button4,.button_h1,.button_h2{
font-family:"Book Antiqua,Arial";
font-size:12px;
color: #85abdd;
height:19px;
background-color:transparent;
border:0px #f09199 solid;}
/*按鈕─造訪時*/
.button2:hover,.button3:hover,.button4:hover{
color:#85abdd;
font-size:12px;
height:20px;
background-color:transparent;
border:0px #f09199 solid;}
/*按鈕─「+」收藏*/
.button_c1{color:#85abdd;}

/*欄位─引用文章網址*/
.home_input1{
color:#667fff;
border:1px solid #EFEFEF;
background-color:#b5c1ff;}
/*欄位─文字輸入欄位*/
.home_input2{
color:#b5daff;
border:1px solid #D5D5D5;
background-color:#486EB4;}
/*欄位─文字輸入欄位。外加版本,要使用的話刪掉前後符號。*/
/*textarea {
background-color: transparent;
padding-left: 10px;padding-right:10px;height:300px;}*/

/*分隔線─版主回應分隔線*/
.article_hr{
border:none;
background-color:#D9ECF0;
height:1px;
color:#D9ECF0;}
/*分隔線─虛線*/
.line{
border-bottom:1px dashed #969696;}
/*分隔線─實線*/
.line2{
border-top:1px solid #D9ECF0;}

/*頁數按鈕─無連結時*/
.p_nolink{
background :#cce5ff;
color:#CCC;
border:1px #FFFFFF solid;}
/*頁數按鈕─所在頁數*/
.p_nextprev{
background :#cce5ff;
color:#CCC;
border:1px #FFFFFF solid;}
/*頁數按鈕─非所在頁數*/
.pag{
background :#486EB4;
color:#cce5ff;
border:1px #FFFFFF solid;}
/*頁數按鈕─滑鼠拜訪*/
.pag:hover{
background :#cce5ff;
color:#486EB4;
font-size:13px;
font-weight:bold;
border:1px #b0c4de solid;}
/*頁數按鈕─放頁數的背景設定*/
.estext{background :none;}
/*頁數按鈕─所在頁數文字區設定*/
.tsmal{padding-left: 25px;padding-right:25px;color :#486EB4;}
/*頁數按鈕─自填頁數欄位設定*/
.sertext{background :none;border:1px #FFFFFF solid;color:#486EB4;}

/*──────────────前景─上方───────────────*/
/*===================================================================*/
/*廣告─基本文字樣式*/
.hotext{FONT-SIZE: 10pt; COLOR: #FFFFFF}
/*廣告─連結文字樣式*/
.keynews a:link{FONT-SIZE: 10pt; COLOR: #FFFFFF; TEXT-DECORATION: none}
/*廣告─造訪過後的文字樣式*/
.keynews a:visited{
FONT-SIZE: 10pt; COLOR: #FFFFFF; TEXT-DECORATION:none}
/*廣告─滑鼠移入的文字樣式*/
.keynews a:hover{
FONT-SIZE: 10pt; COLOR: #FFFFFF; TEXT-DECORATION:underline}

/*下拉式選單─基本樣式*/
.wide_t1 {
font-size: 9pt;
line-height:25pt;
COLOR: #333C9A;
background:#A8ADD9;}
/*下拉式選單─呈現位置。如要使用才將前後符號刪掉。*/
/*position : absolute;
top:-0px; left:850px;
clip: rect(2px 108px 17px 2px);*/
/*下拉式選單─選單內容:首項*/
.wide_titlebar{color:#338310; background:#F1FCDF;}
/*下拉式選單─選單內容:分類1*/
.wide_titlebar1{COLOR:#ffbd4c;background:#ffe4b5}
/*下拉式選單─選單內容:分類2*/
.wide_titlebar2{COLOR:#ff7f66;background:#ffc1b5}

/*勇者小屋─隱藏此欄位的所有預設圖,要使用的話刪除前後符號。*/
/*.wide_wordbk7 img {visibility:hidden;}*/
/*勇者小屋─基本設定*/
.wide_wordbk7{
background-image : url(http://myhome.apbb.com.tw/indream228/baha_home_blue/USER_LOGO_blue.jpg);
border:none;}
/*勇者小屋─帳號ID的字體顏色*/
.wide_password2{color:#4682b4;}
/*勇者小屋─信箱、銀行和勇造、VIP之間的分隔線,如果想拿掉的話就用0px*/
.wide_line{
border:0px;
background-color:transparent;}
/*勇者小屋─信箱、銀行、勇造、VIP的底色*/
.wide_sev{background-color:transparent;}
/*勇者小屋─等級基本設定*/
.wide_sign{
color:#4682b4;
background-color:transparent;}

/*──────────────前景─左下───────────────*/
/*============================ 橫幅區 =============================*/
/*===================================================================*/
/*小屋橫幅區─橫幅主圖*/
.banner{
background: none;
height:50px;
padding-left:5px;
padding-top:0px;
/*display:none;*/
}
/*小屋橫幅區─暱稱和帳號文字。「()」為無連結的文字。*/
.banner_t1{
color:#f0fff0;
font-weight:bold;}
.banner_t1 a:link,.banner_t1 a:visited,.banner_t1 a:hover{
color:#f0fff0;
font-weight:bold;
text-decoration:inherit;}
/*小屋橫幅區─碎碎唸文字顏色*/
.banner_t3{
color:#fffff0;
line-height:18px;
height:42px;}
/*小屋橫幅區─顯示官階的文字顏色*/
.banner_t4{
color:#b0e0e6;}
/*小屋橫幅區─顯示稱號的文字顏色*/
.banner_t5{
color:#b0e0e6;}
/*小屋橫幅區─「訂閱他的小屋」按鈕設定*/
.home_order_button{
font-size:12px;
border-width:0px ;
border-color:#bfbfbf #464646 #464646 #bfbfbf;
border-style:solid;
padding:1px 4px 1px 4px ;
line-height:16px;
background:none;
text-align: center;
text-decoration: none;
cursor: pointer}
.home_order_button:hover{
color:#b0e0e6;
border-width:0px ;
border-color:#464646 #bfbfbf #bfbfbf #464646;
border-style:solid;padding:1px 4px 1px 4px ;
line-height: 16px;
background:none;
text-align: center; text-decoration: none;}

/*============================ 主選單 =============================*/
/*===================================================================*/
/*主選單─背景、主體設定(會被其表格內的其他設定影響)*/
.menu{
background-color:transparent;
background-image:none;
background-position :0% 0%;
background-repeat: no-repeat;
text-align: inherit;
position: relative;
top:10px;/*選單的上下位置*/
left:-250px;/*選單的左右位置*/
width:1px;/*選單的寬度*/
height:130px;}
/*主選單─所在頁面*/
.menuIN{
background:none;
font-weight:bold;
color: #f0f8ff;
height:13px;
line-height:15px;
text-align: center;
text-decoration: none;}
.menuIN a:link,.menuIN a:visited{
font-weight:bold;
color:#f0f8ff;
height:13px;
line-height:15px;
text-align:center;
text-decoration:none;
}
/*主選單─非所在頁面*/
.menuout {
font-weight:bold;
COLOR:#b0c4de;
height:13px;
line-height:15px;
text-align:center;
text-decoration:none;
padding-left:10px;
}
.menuout a:link,.menuout a:visited {
font-weight:bold;
color:#b0c4de;
height:13px;
line-height:15px;
text-align:center;
}
.menuout a:hover {
background:none;
font-weight:bold;
color:#f0ffff;
height:13px;
line-height:15px;
text-align:center;
text-decoration: none;
DISPLAY: block;
}

/*無次選單狀態─次選單與主選單連接部分*/
.menubarA1{background:none;border:0px solid #CCCCCC;}
/*無次選單狀態─次選單結束部分*/
.menubarA2{background:none;border:0px solid #CCCCCC;}
/*有次選單狀態─次選單與主選單連接部分*/
.menubarB1{background:none;border:0px solid #CCCCCC;}
/*有次選單狀態─放次選單按鈕的背景色*/
.menubarB3{background:none;}
/*有次選單狀態─次選單結束部分*/
.menubarB2{background:none;}

/*============================ 主表格 =============================*/
/*===================================================================*/
/*主標題─背景&外框*/
.category_title{
background-color:transparent;
background-image :url(http://i277.photobucket.com/albums/kk75/indream228/0873c82c.gif);
height:30px;}
/*主標題─文字*/
.category_word{
color:#E6EEF9;
font-size:15px;
font-weight:bold;
padding-left:85px;}
/*副標題(屋主才有機會看到的)*/
.category_title2{
background:none;
height:40px;}
/*內文背景&外框*/
.category_bk{
background-color:transparent;
background-image :none;
background-repeat:no-repeat;
background-position :0% 0%;
border-width:0px 1px 1px 1px;
border-color:#ffffff;
border-style:solid;
padding:12px;}
/*框架結束*/
.category_footer{
background:none;
height:25px;}

/*─────────────前景─右下────────────────*/
/*====================================================================*/
/*無連結─月曆文字顏色*/
.home_c1{COLOR: #FFFFFF}
/*右下─人氣流量圖*/
#Flash_curve{display:none;}

/*右下表單─標題格式*/
.post_title {
color:#fff;
background-color:transparent;
background-image : url(http://i277.photobucket.com/albums/kk75/indream228/553895f9.jpg);
background-repeat:no-repeat;
background-position : 50% 50%; /*背景圖片x與y軸的位置*/
height:50px;
padding-left:53px;}
/*右下表單─資料區*/
.postboxin {
background:none;
background-repeat: no-repeat;}
.postbox2 {
border:0px;
background:none;
background-repeat: no-repeat;}
.postbox2 img{display:none;}
/*右下表單─項目符號圖片設定*/
.post_list{
color:#ffffff;
background:url(http://i277.photobucket.com/albums/kk75/indream228/list.gif) no-repeat left center;
padding-left: 13px;
margin: 0px;text-decoration:none;}
.post_list ul,.post_list a:link,.post_list a:visited,.post_list a:hover{
COLOR: #ffffff;
padding-left: 10px;
border-bottom: #ccc 0px solid;list-style-type: none;margin: 0px;text-decoration:none;}

/*────────────────小屋首─────────────────*/
/*─────────────────────────────────────*/
/*首頁-勇者資料區背景色*/
.infom_bk{
background:none;
border:0px solid #CA7C6F;
padding-top:0px;
padding-left:5px;}
/*首頁─勇者資料區:小屋封面圖、COVER圖、看版圖*/
.cover_pic{
background:none;
background-repeat: no-repeat;
height:0px;visibility:hidden;}
/*勇者資料區:表格外框*/
.box1{
border:0px solid #D9ECF0;}
/*勇者資料區─給紅心的敘述文字*/
.heartGP{
color:#FF3366;}
/*勇者資料區─評價區的底色、背景*/
.apprise_bg{
background:none;}
/*勇者資料區─個人能力數值區*/
.ability {
background-color:#FFF;
BORDER-RIGHT:#969696 2px solid;
BORDER-TOP:#bfbfbf 1px solid;
BORDER-LEFT:#bfbfbf 1px solid;
BORDER-BOTTOM:#969696 2px solid;
PADDING-RIGHT:4px;
PADDING-LEFT:4px;
PADDING-BOTTOM:1px;
PADDING-TOP:1px;
LINE-HEIGHT:14px;
HEIGHT:0pt;
TEXT-ALIGN:center;
TEXT-DECORATION:none;}
/*勇者資料區─表格標題;各區共用─部落閣、精華區下方:留言區表格之非選擇中選項背景色*/
.box_title{
background-color:transparent;
font-weight:bold;
letter-spacing:2px;}
/*勇者資料區─表格內文底色 1;各區共用─部落閣、精華區下方:表格之選擇中之選項、回應背景色1*/
.box_list1{
background-color:transparent;}
/*勇者資料區─表格內文底色 2;各區共用─部落閣、精華區下方:表格之回應2*/
.box_list2{
background-color:transparent;}
.box_list2 a:link,.box_list2 a:visited {color:#228b22;}

/*首頁─部落閣最新文章欄位前之縮圖*/
.article_pic{
border-left:1px solid #C4C4C4;
border-right:3px solid #C4C4C4;
border-top:1px solid #C4C4C4;
border-bottom:3px solid #C4C4C4;}
/*首頁─部落閣最新文章欄位背景及GP值底色*/
.articlebox{
border:1px solid #7DC8D0;
background-color:#FFFFF4;
padding:5px;
width:100%;}

/*─────────────── 個人部落閣───────────────*/
/*─────────────────────────────────────*/
/*個人部落閣─文章標題有無連結*/
.article_t1{
color:#fffacd;
font-weight:bold;}
.article_t1 a:link, .article_t1 a:visited{
color:#009919;
font-weight:bold;}
/*個人部落閣─文章內容預設字型*/
.home_h4{
color:#68699b;
font-size:13px;}
/*個人部落閣─相關文章欄位*/
.home_scroll{
width:650px;/*欄位寬度*/
height:80px;/*欄位高度*/
color:#00bfff;/*文字顏色*/
font-size:12px;/*文字大小*/
text-align:left;/*文字對齊方式*/
border:1px #b0c4de solid;/*欄位的框線*/
overflow:auto;/*內文超過欄位高度時顯示捲軸*/
background-color:transparent;
SCROLLBAR-FACE-COLOR:#4682b4; /*軸面顏色*/
SCROLLBAR-HIGHLIGHT-COLOR:#b0c4de; /*軸面三角左邊顏色*/
SCROLLBAR-SHADOW-COLOR:#b0c4de; /*軸面三角右邊顏色*/
SCROLLBAR-3DLIGHT-COLOR:#4682b4; /*左立體邊顏色*/
SCROLLBAR-DARKSHADOW-COLOR:#4682b4; /*右立體面顏色*/
SCROLLBAR-ARROW-COLOR:#b0c4de; /*箭頭的顏色*/
SCROLLBAR-TRACK-COLOR:#4682b4; /*軸軌的顏色*/
overflow:auto;}

/*─────────────── 個人精華區───────────────*/
/*─────────────────────────────────────*/
/*個人精華區─文章標題顏色*/
.elite{
color:#0055CB;
font-size:15px;
font-weight:bold;}
.elite a:link, .elite a:visited{
color:#0055CB;
font-size:15px;
font-weight:bold;}
/*個人精華區─收藏人數文字顏色和底線框色*/
.elite_ppl{
color:#49A1B3;
font-weight:bold;
font-size:12px;
border:1px solid #9A9A9A;
background-color:#FFF;}
/*個人精華區─精華區標籤使用熱門度設定*/
.tag1 { color: #3399CC;}
.tag1 a:link, .tag1 a:visited, .tag1 a:hover { color: #3399CC;}
.tag2{ color: #C184C1;}
.tag2 a:link, .tag2 a:visited, .tag2 a:hover { color: #C184C1;}
.tag3 { color: #669966;}
.tag3 a:link, .tag3 a:visited, .tag3 a:hover { color: #669966;}


/*─────────────── 其他保留────────────────*/
/*─────────────────────────────────────*/
/*用意不明──三角形箭頭icon*/
.box_icon1{
background-image:url(http://pic.bahamut.com.tw/home/list_icon1.gif);
background-repeat:no-repeat;}
/*用意不明──圓形彈珠icon*/
.box_icon2{
background-image:url(http://pic.bahamut.com.tw/home/list_icon2.gif);
background-repeat:no-repeat;}

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■◇
 背景色 :background-color:;
 ‧若不使用圖片請用「none」或「transparent」取代「url()」。
 背景圖 :background-image:url();
 排列方式:background-repeat:;
 背景效果:background-attachment:;
 對齊位置:background-position :;

 框線整合:border: 1px solid #6699cc;
 ‧個別設定(順序為上、右、下、左)
 框線寬度:border-width:1px 3px 3px 1px;
 框線顏色:border-color:#C4C4C4;
 框線風格:border-style:solid;

 其他語法請爬文,很多大大有釋出整理。
◇■■■■■■■■■■■■■■■◆整理:如語娃娃(indream228◆■*/
1
-
未登入的勇者,要加入 2 樓的討論嗎?
板務人員:歡迎申請板主

精華區有 16 筆文章
目前無人維護,申請組長


face基於日前微軟官方表示 Internet Explorer 不再支援新的網路標準,可能無法使用新的應用程式來呈現網站內容,在瀏覽器支援度及網站安全性的雙重考量下,為了讓巴友們有更好的使用體驗,巴哈姆特即將於 2019年9月2日 停止支援 Internet Explorer 瀏覽器的頁面呈現和功能。
屆時建議您使用下述瀏覽器來瀏覽巴哈姆特:
。Google Chrome(推薦)
。Mozilla Firefox
。Microsoft Edge(Windows10以上的作業系統版本才可使用)

face我們了解您不想看到廣告的心情⋯ 若您願意支持巴哈姆特永續經營,請將 gamer.com.tw 加入廣告阻擋工具的白名單中,謝謝 !【教學】