小屋創作

日誌2007-09-16 18:42

【小屋】我家落落長的CSS語法整理

作者:莉薇婭莞夢

目前(9/24)我家就用這款的↓
當然已刪掉圖片的網址,雖然顏色設定還留在上面XD
不過連我自己都覺得長的離譜,也懶得改啦
如果有設定上不太了,或許看一下、研究許久會懂(?)

純說明概要:可先參考過後再來此找相對應的語法。
  歡迎擷取語法修改。
  在文章發表日期三天後,有問題請利用留言板,文串不容易留意到ˊˇˋ:"

/*-------------------------版面外加語法區------------------------*/
/*----------網頁主體設定--------*/
body{
/*--設定網頁外框--*/
border: 10px solid #ec6d71;
/*----背景圖設定---*/
background :#fdeff2; /*背景底色*/
background-image : url(http://); /*背景圖片網址*/
background-repeat:repeat-X; /*背景圖片重複排列*/
background-attachment: fixed; /*背景圖片固定*/
/*--卷軸樣式設定--*/
SCROLLBAR-FACE-COLOR: #fdeff2; /*設定軸面顏色*/
SCROLLBAR-HIGHLIGHT-COLOR:#fcb4b4; /*設定軸面三角左邊顏色*/
SCROLLBAR-SHADOW-COLOR: #fcb4b4; /*設定軸面三角右邊顏色*/
SCROLLBAR-3DLIGHT-COLOR: #fdeff2; /*設定左立體邊顏色*/
SCROLLBAR-DARKSHADOW-COLOR: #fdeff2; /*設定右立體面顏色*/
SCROLLBAR-ARROW-COLOR: #fcb4b4; /*設定箭頭的顏色*/
SCROLLBAR-TRACK-COLOR: #fdeff2; /*設定軸軌的顏色*/
/*--基本游標設定--*/
cursor:url(http://副檔名為ANI),text;/*游標網址*/
}
/*----------預設按鈕設定----------*/
/*--按鈕基本呈現--*/
.button2,.button3,.button_h1,.button_h2{
font-family:"Book Antiqua,Arial";
font-size:12px;
color:#c97586;
background:#FFFFFF;
border:1px #f09199 solid;
cursor:url(http://myhome.apbb.com.tw/indream228/bubble_3.ani)
}
/*--「+收藏」--*/
/*文字顏色*/
.button_c1{
color:#c97586;}
/*按扭去圖*/
.button_c1 img{
display:none;}
/*-「+收藏」、「看更多」-*/
.button4 {
font-family:"Book Antiqua,Arial";
font-size:12px;
border-width:1px;
border-color: #f09199 ;
border-style: solid;
line-height:16px;
background:url(http://) no-repeat #FFF;
text-align: center;
text-decoration: none;
width:100%;
cursor:url(http://副檔名為ANI),text;/*游標網址*/
}
/*--造訪按鈕樣式--*/
.button2:hover,.button3:hover,.button4:hover{
color:#c97586;
font-family:"Book Antiqua,Arial";
font-size:12px;
background:#FFFFFF;
background:url(http://) no-repeat #FFF;
border:1px #f09199 solid;
}

/*----------中間背景設定----------*/
div.left {
background-color: transparent;
}
div.leftOut1{
background: none;
}
div.leftOut2{
background-color: transparent;
}
div.leftDown {
background: transparent;
}
div.right {
background:transparent;
}
div.rightDown {
background: transparent;
}
div.container {
background: transparent;
}
div.main {
background: transparent;
}
div.mainOut {
background: transparent;
}
div.footer {
background: transparent;
}

/*--------右下的標題格式---------*/
.post_title {
padding: px;
background:url(http://) 50% 50% no-repeat #FFF;
}
/*右下的表單標籤list格式*/
.post_list{
background:none;
margin: 0px;
padding: 0px;
text-decoration:none;
}
/*無連結時*//*綠色圓點,以下是消除預設圖*/
.post_list ul{
list-style-type: none;
margin: 0px;
padding: 0px;
text-decoration:none;
}
/*有連結時*//*自訂有連結的顯示樣式*/
.post_list a{
border-bottom: #ccc 1px solid;
width: 100%;
background: url(http://) no-repeat left center;
padding-left: 20px;
display: block;
}
/*滑鼠造訪*//*自訂滑鼠造訪時的連結樣式*/
.post_list a:hover{
background: url(http://) no-repeat left center;
color:#eebbcb;
text-decoration:none;
}

/*--右下的內文底圖格式--*/
.postbox2 {
background:#ffe1e5;
border:0px;
FILTER: Alpha(opacity=70);/*表格透明*/
-moz-opacity: 0.7;
}
.postbox2 img{
display:none;}


/*--------------------------整體頁面設定--------------------------*/
/*-------------整體文字------------*/
TD{
color:#818181;
font-size:13px;
line-height:150%;
font-family:"Book Antiqua,Arial";
word-break: break-all;
word-wrap:break-word;
}

/*-------------連結設定-----------*/
/*-------基本連結------*//*設定影響:好友新文章之好友帳號*/
/*還未造訪連結狀態*/
A:link{
color:#b23535;
font-size:12px;
text-decoration:none;
}
/*造訪過後連結狀態*/
A:visited{
color:#b23535;
font-size:12px;
text-decoration:none;
cursor:url(http://副檔名為ANI);/*游標網址*/
}
/*滑鼠移入連結狀態*/
A:hover{
color:#c97586;
font-size:12px;
text-decoration: underline;
cursor:url(http://副檔名為ANI);/*游標網址*/
}
/*特殊連結*//*及屋主文章留言,「看摘要」、「好友新文章連結」*/
.extend{
color:#c97586;
}
.extend a:link{
color:#631d37;
font-size:12px;
}
.extend a:hover{
font-size:10px;
}
.extend a:visited{
font-size:12px;
color:#c97586;
}

/*GP數與驗證碼顏色,引用文章連結時的顏色*/
.extend2{
color:;
}
.extend2 a:link{
color:#95859c ;
font-size:12px;
}
.extend2 a:hover{
vertical-align:super;
color:#95859c ;
font-size:12px;
}
.extend2 a:visited{
color:#95859c ;
font-size:12px;
}

/*灰色-備註與說明文字*/
.extend3{
color:#c97586;
}
.extend3 a:link,.extend3 a:visited{
color:#000000;
}

/*---------其他共用部分---------*/
/*虛線*//*部落閣文章分隔線、好友文章列表分隔線*/
.line{
border-bottom:1px dashed #fcc9d4;
}

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

/*文章或畫作的縮圖邊框*/
.article_pic{
border:none;
height: 0px;
width: 0px;
}

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

/*input實線*//*留言輸入欄設定*/
.home_input2{
color:#028760;
border:1px solid #fcb4b4;
background-color:none;
background-image : url(http://);
background-repeat:no-repeat;
background-attachment: fixed;
background-position:100% 90%;
cursor:url(http://副檔名為ANI);/*游標網址*/
}

/*-------------------------------框架----------------------------------*/
/*小屋首頁-勇者資料區背景色*/
.infom_bk{
border:0px;
padding-top:10px;
padding-bottom:10px;
background:none;
}

/*-------外部大框架設定-------*/
/*主標題一使用*/
.category_title{
background:none;
height:75px;
background-image : url(http://);
background-repeat:no-repeat;
background-position:center;
display:none
}

/*主標題二以下使用*/
.category_title2{
background:none;
background-image : url(http://);
background-position:right;
text-align:center;
height:30px;
}

/*主標題文字設定*/
.category_word{
color:#b24747;
font-size:15px;
font-weight:bold;
text-align:center;
padding-top:10px;
padding-bottom:2px;
}

/*內文的背景色*/
.category_bk{
background:#ffe1e5;
border:1px solid #b23535;
padding:12px;
text-align:center;
filter=progid:dximagetransform.microsoft.gradient(gradienttype=1, startcolorstr=#fffffc, endcolorstr=#ffe1e5);
}

/*框架結束部分*/
.category_footer{
background:none;
height:33px;
background-image : url(http://);
}

/*--表格設定(置於大框架中)-*/
/*--連結樣式--*/
.box1 a:link{color:#7ebeab}
.box1 a:visited{color:#7ebeab}
.box1 a:hover{color:#7ebeab}
/*--版面樣式--*/
/*表格框線顏色*/
.box1{
border:1px solid #663333;
}
/*表格標題底色*/
.box_title{
color:#FFFFFF;
font-weight:bold;
text-align:center;
background:#028760;
filter=progid:dximagetransform.microsoft.gradient(gradienttype=0, startcolorstr=#028760, endcolorstr=#fffffc)
letter-spacing:2px;
}
/*表格內文底色 1*/
.box_list1{
background-color:#E6E6E6;
}
/*表格內文底色 2*/
.box_list2{
background-color:#F4F4F4;
}

/*--以下設定不明--*/
.box_icon1{
background-image:url(http://myhome.apbb.com.tw/indream228/006-3.gif) no-repeat;
}/*三角形箭頭icon*/
.box_icon2{
background-image:url(http://pic.bahamut.com.tw/home/list_icon2.gif) no-repeat;
}/*圓形彈珠icon*/

/*-------------------------最上方顯示大圖------------------------*/
/*----------小屋上方主圖--------*/
.banner{
height:20px; /*表格的高度。*/
padding-left:0px; /*內文與表格左邊邊界的距離。*/
padding-top:2px; /*內文與表格上邊邊界的距離*/
}

/*--------暱稱和帳號文字---------*/
/*--無連結的設定--*//*無連結效果的文字顏色,設定( )的顏色*/
.banner_t1{
display:block;
font-family:"Verdana,新細明體";
font-size:15px;
color:#003322;
font-weight:bold;
}
/*--有連結的設定--*/
.banner_t1 a:link,.banner_t1 a:visited,.banner_t1 a:hover{
color: #003322;
font-weight:bold;
font-size:15px;
text-decoration:inherit;
}

/*-------碎碎唸文字顏色--------*/
.banner_t3{
color:#003333;
height:20px; /*格子的高度,搭配文字的位置可以以此來拉開它和「暱稱與帳號」或下方「官階與稱號」間的距離*/
line-height : 20px; /*設定當下文字的行高*/
text-align:right; /*文字靠右對齊*/
vertical-align:text-top; /*文字垂直向上對齊*/
}

/*--------暱稱和帳號文字---------*/
/*--顯示官階的文字顏色--*/
.banner_t4{
color:#b23535;
display : block
}

/*--顯示稱號的文字顏色--*/
.banner_t5{
color:#b23535;
text-align:center; /*內文置中*/
padding-left:10px; /*顯示稱號的文字,與左邊稱號圖章距離*/
padding-right:500px; /*顯示稱號的文字,與右邊勳章距離*/
}

/*-------------------------------主選單-------------------------------*/
/*-----------選單背景圖------------*/
.menu{
background:#FFFFFF; /*背景圖設定*/
border:1px solid #fcb4b4;
height:25px; /*選單表格的高度*/
FILTER: Alpha(opacity=80);/*表格透明*/
filter=progid:dximagetransform.microsoft.gradient(gradienttype=1, startcolorstr=#fffffc, endcolorstr=#fcb4b4);
}


/*-------選單所在頁面狀態-------*/
.menuIN{
background:url(http://) no-repeat 100% 100%; /*背景圖,不重複,座標100%100%*/
weight:155px;
}

/*--有連結的設定--*/
.menuIN a:link,.menuIN a:visited{
font-weight:bold; /*文字粗體設定*/
color: #b23535; /*文字顏色設定*/
height:25px;
weight:155px;
margin-left:10px;
line-height: 25px; /*內文的文字行高*/
text-align:left; /*文字置左*/
text-decoration:none; /*刪除文字的連結底線*/
}

/*------選單非所在頁面狀態-----*/
/*---無連結的設定---*//*無連結這邊可以不加,因為選單都有連結,所以很可有可無*/
.menuout {
font-weight:bold;
/*文字粗體設定*/
COLOR:#7C7C7C;
/*文字顏色設定*/
height:25px; /*表格的高度,若有自訂選單背景的高度,這邊一定要修改選單背景高度數字以下的數值*/
line-height: 25px; /*內文的文字行高*/
text-align: center; /*文字置中*/
text-decoration: none; /*刪除文字的連結底線*/
}

/*---有連結的設定---*/
/*無拜訪(或曾拜訪)頁面連結設定*/
.menuout a:link,.menuout a:visited {
font-weight:bold; /*文字粗體設定*/
COLOR:#7C7C7C; /*文字顏色設定*/
height:25px; /*表格的高度,若有自訂選單背景的高度,這邊一定要修改選單背景高度數字以下的數值*/
line-height: 25px; /*內文的文字行高*/
text-align: center; /*文字置中*/
}

/*拜訪的連結設定,就是滑鼠移上去的效果*/
.menuout a:hover {
background:url(http://) no-repeat 100% 100%; /*背景圖,不重複,座標100%100%*/
weight:155px;
font-weight:bold; /*文字粗體設定*/
color:#b23535; /*文字顏色設定*/
height:25px; /*表格的高度,若有自訂選單背景的高度,這邊一定要修改選單背景高度數字以下的數值*/
line-height: 25px; /*內文的文字行高*/
text-align: center; /*文字置中*/
text-decoration: none; /*刪除文字的連結底線*/
DISPLAY: block;
}


/*-------------------------------次選單-------------------------------*/
/*----------無次選單狀態----------*//*訪客瀏覽時看得到,藍白的分隔線就是這邊設定*/
/*次選單與主選單連接部分*/
.menubarA1{
background:none; /*無背景設定。要設定也可以自行調整。*/
border:0px;
height:0px; /*表格無高度,如果您想設定什麼背景,這邊就要調整高度唷。*/
}

/*次選單結束部分*/
.menubarA2{
height:33px; /*高度依需要調整*/
background-image : url(http://); /*圖址*/
}

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

/*次選單與主選單連接部分*/
.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://);
}

/*--------------------------小屋封面圖------------------------------*/
.cover_pic{
background:url(http://pic.bahamut.com.tw/HOME/92/home_indream228.JPG) repeat;
}

/*--------------------勇者基本資訊和能力表--------------------*/
/*-------給紅心的敘述文字-------*/
.heartGP{
color:#e9546b;
}

/*------------評價區底色------------*/
.apprise_bg{
background-color:none;
}

/*--顯示個人能力數值的底圖--*/
/*--GP與BP區的底色*//*外加*/
.ability_pad{
background-color:none;
background-image : url(http://);
background-repeat:no-repeat;
background-attachment: fixed;
background-position:90% 50%;
}
/*--總GP與BP顯示圖*//*外加*/
.ability_pad img{
display:none;}
/*--勇者各素質區*/
.ability {
color:ef7781;
BORDER:0px solid;
PADDING-RIGHT:1px;
PADDING-LEFT:1px;
PADDING-BOTTOM:1px;
PADDING-TOP:1px;
LINE-HEIGHT:14px;
HEIGHT:0pt;
TEXT-ALIGN:center;
TEXT-DECORATION:none;
}

/*----------------------各文章列表區(下方)----------------------*/
/*------------個人部落閣-----------*/
/*最新文章及GP值底色*/
.articlebox{
color:#028760;
border-top:1px solid #fcb4b4;
border-bottom:1px solid #fcb4b4;
border-left:1px solid #fcb4b4;
border-right:1px solid #fcb4b4;
background-color:#FFF;
background-image : url(http://);
background-repeat:no-repeat;
background-attachment: fixed;
background-position:95% 100%;
padding:20px;
width:720px;
height:140px;
vertical-align:top; /*垂直向上對齊*/
}

/*--文章內文預設*//*外加,影響每篇文章的預設字型*/
.home_h4{
color:#68699b;
font-size:13px;
}

/*文章標題顏色*/
.article_t1{
color:ef7781;
filter=progid:dximagetransform.microsoft.gradient(gradienttype=0, startcolorstr=#fffffc, endcolorstr=#ef7781);
font-weight:bold;
}
.article_t1 a:link, .article_t1 a:visited{
color:ef7781;
filter=progid:dximagetransform.microsoft.gradient(gradienttype=0, startcolorstr=#fffffc, endcolorstr=#ef7781);
font-weight:bold;
}



/*版主回應分色線*//*設定分隔圖一定要原本有的「color:#色碼」刪掉*/
.article_hr{
border:0px solid #F4F4F4;
background-image : url(http://);
background-repeat:no-repeat;
background-position : center;
height:37px;
weight:437px;
}

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

/*收藏人數文字顏色和底線框色*/
.elite_ppl{
color:#49A1B3;
font-weight:bold;
font-size:12px;
border:1px solid #9A9A9A;
background-color:#FFF;
background-image : url(http://);
background-repeat:no-repeat;
background-attachment: fixed;
background-position:105% 100%;
}

26

47

LINE 分享

相關創作

5/3日記 - 明天要去看電影

【下午有些想寫一下…】之近期歌單分享

留言

開啟 APP

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

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