所有有url
(圖檔
)}這個語法的地方，
()通通都不準拿掉，只要把你的圖檔網址帶入
()中即可
所有
}後面有
圖示及紅色字體加註的地方請在語法內拿掉XD
其他CSS相關教學
/*--------------------------整體頁面設定--------------------------*/
/*游標*/
BODY {
cursor:url(游標檔圖片檔網址1)};
a:hover {
cursor:url(游標檔圖片檔網址2)};
註:
body裡面放游標代表著一般時候的游標
hover裡面放游標代表當滑鼠移到超連結時候的游標
CSS的游標得用cur檔(靜態游標)、ani檔(動態游標)或ico檔，不支援gif、bmp、jpg檔案
語法都正常可是一樣無法顯示出來就要檢察一下游標連結是不是有問題
/*連結跳動*/
a{
text-decoration:none
}
a:hover{
position: relative; top: 1px;left:2px;
}
/*捲軸*/
html{
SCROLLBAR-FACE-COLOR:#fcfcfc;
SCROLLBAR-HIGHLIGHT-COLOR:#fc90b4;
SCROLLBAR-SHADOW-COLOR:#fc90b4;
SCROLLBAR-3DLIGHT-COLOR:#fc90b4;
SCROLLBAR-ARROW-COLOR:#fc90b4;
SCROLLBAR-TRACK-COLOR:#fc90b4;
SCROLLBAR-DARKSHADOW-COLOR:#fcb4b4;
SCROLLBAR-BASE-COLOR:#fc90b4
}
圖示
/*網頁四色加框*/
body{
border-left:10px dotted pink;
border-right:10px dotted pink;
border-top:10px dotted pink;
border-bottom:10px dotted pink;
}
註:可自由調整4個邊的顏色及寬度
dotted後面為顏色
圖示
/*留言處和回應處插圖*/
textarea {
background:url(留言處和回應處插圖圖檔網址);
background-repeat:no-repeat;
background-position:right;
padding-left:10px;
padding-right:10px;
height:195px;
}
圖示
/*--------------------------右選單設定--------------------------*/
/*右選單大標題圖*/
.post_title {
background-image:url(右選單大標題圖網址);
height:45px;
background-position:center;
padding-left:53px;
padding-right:30px;
font-size:100%;
color:#005A78;
}
圖示
/*右選單小標題圖*/
body{list-style:url(右選單小標題圖網址);
}
圖示
/*右選單背景透明*/
.postboxin {
background-image:url();
}
.postbox2 {
background-image:url();
filter:Alpha(opacity=50,finishOpacity=0,style=0);
}
圖示修改前
圖示修改後
/*欄位加框*/
li{
BACKGROUND:url(黑色部份的背景圖檔) 0% 50%;
COLOR:#FFFFFF;
BORDER-TOP-STYLE:double;
BORDER-RIGHT-STYLE:double;
BORDER-LEFT-STYLE:double;
BORDER-BOTTOM-STYLE:double;
padding-left:1px;
}
註:
黑色部份的背景圖檔請依喜好設定
修改前
修改後
不想用使用以上語法者，可以不用放進CSS語法裡。
/*--------------------------小屋主頁面設定--------------------------*/
/*背景固定*/
BODY {
background-image:url(背景圖檔網址);
background-attachment:fixed;
}
/*全板背景*/
div.left {
background: none;
}
div.leftOut1{
background: none;
}
div.leftOut2{
background: none;
}
div.leftDown {
background: none;
}
div.right {
background: none;
}
{
background: none;
}
div.rightDown {
background: none;
}
div.container {
background: none;
}
div.main {
background: none;
}
div.mainOut {
background: none;
}
div.footer {
background: none;
}
全板背景相關交學
/*----整體文字----*/
/*還未造訪連結狀態*/
TD{
color:#303030;
font-size:13px;
line-height:110%;
font-family:"Arial";
word-break: break-all;
word-wrap:break-word;
}
A:link{
color:#303030;
text-decoration:none;
}
/*造訪過後連結狀態*/
A:visited{
color:#A5873C;
text-decoration:none;
}
/*滑鼠移入連結狀態*/
A:hover{
color:#A51E00;
text-decoration:none;
}
/*特殊連結(藍色)及屋主文章留言*/
.extend{
color:#C35A78;
}
.extend a:link,.extend a:visited{
color:#C35A78;
}
/*GP數與驗證碼顏色*/
.extend2{
color:#C35A78;
}
.extend2 a:link,.extend2 a:visited{
color:#C35A78;
}
/*灰色－備註與說明文字*/
.extend3{
color:#8E8E8E;
}
.extend3 a:link,.extend3 a:visited{
color:#8E8E8E;
}
/*----其他共用部分----*/
/*虛線*/
.line{
border-bottom:1px dashed #969696;
}
/*實線*/
.line2{
border-top:1px solid #D9ECF0;
}
/*文章或畫作的縮圖邊框*/
.article_pic{
border-left:1px solid #C4C4C4;
border-right:3px solid #C4C4C4;
border-top:1px solid #C4C4C4;
border-bottom:3px solid #C4C4C4;
}
/*input實線(只用於引用文章網址處)*/
.home_input1{
color:#999999;
border:1px solid #EFEFEF;
background-color:#FFF;
}
/*input實線*/
.home_input2{
color:#464646;
border:1px solid #D5D5D5;
background-color:#FFF;
}
/*--------------------------框架------------------------------*/
/*小屋首頁－勇者資料區背景色*/
.infom_bk{
border-left:1px solid #CCCCCC;
border-right:1px solid #CCCCCC;
padding-top:10px;
background:#FFFFFF
}
/*----外部大框架設定----*/
/*部落閣最新文章使用*/
.category_title{
background:url(部落閣最新文章區背景圖網址);
height:50px;
border:1px solid #CCCCCC
}
圖示
/*最新收錄精華使用*/
.category_title2{
background:url(最新收錄精華區背景圖網址);
height:50px;
border:1px solid #CCCCCC
}
圖示
/*部落閣最新文章及最新收錄精華標題文字設定*/
.category_word{
color:#303030;
font-size:16px;
font-weight:bold;
padding-left:325px;
padding-top:0px;
padding-bottom:2px;
}
/*內文的背景色*/
.category_bk{
background:#FFFFFF;
border-left:1px solid #CCCCCC;
border-right:1px solid #CCCCCC;
padding:12px;
}
/*框架結束部分*/
.category_footer{
background:url(框架結束部分背景圖網址);
height:53px;
border-right:1px solid #CCCCCC;border-left:1px solid #CCCCCC;border-
bottom:1px solid #CCCCCC;
}
圖示
/*----表格設定(置於大框架中)----*/
/*表格框線顏色*/
.box1{
border:1px solid #303030;
}
/*表格標題底色*/
.box_title{
background:#FFFFFF;
font-weight:bold;
letter-spacing:2px;
}
/*表格內文底色 1*/
.box_list1{
background-color:#FFFFFF;
}
/*表格內文底色 2*/
.box_list2{
background-color:#FFFFFF;
}
/*三角形箭頭icon*/
.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;
}
/*-----------------------最上方顯示大圖-----------------------*/
/*小屋上方主圖*/
.banner{
background: url() repeat;
height:50px;
padding-left:20px;
padding-top:15px;
}
小屋上方主圖相關教學
/*暱稱和帳號文字*/
.banner_t1{
color:#303030;
font-weight:bold;
}
.banner_t1 a:link,.banner_t1 a:visited,.banner_t1 a:hover{
color:#303030;
font-weight:bold;
text-decoration:inherit;
}
/*碎碎唸文字顏色*/
.banner_t3{
color:#303030;
line-height:18px;
height:42px;
}
/*顯示官階的文字顏色*/
.banner_t4{
color:#008E25;
}
/*顯示稱號的文字顏色*/
.banner_t5{
color:#235BD3;
}
/*---------------------------主選單---------------------------*/
/*選單背景圖*/
.menu{
background:url(選單背景圖網址) no-repeat;
height:35px;
}
圖示
/*----選單所在頁面狀態----*/
.menuIN{
background:url() no-repeat;
font-weight:bold;
color: #0055CB;
height:31px;
line-height: 40px;
text-align: center;
text-decoration: none;
}
.menuIN a:link,.menuIN a:visited{
font-weight:bold;
color:#0055CB;
height:35px;
line-height:31px;
text-align:center;
text-decoration:none;
}
/*----選單非所在頁面狀態----*/
.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:31px;
line-height:31px;
text-align:center;
}
.menuout a:hover {
background:url(選單背景圖網址) no-repeat;
font-weight:bold;
color:#0055CB; height:px;
line-height:35px;
text-align:center;
text-decoration: none;
DISPLAY: block;
}
圖示
/*---------------------------次選單---------------------------*/
/*----無次選單狀態----*/
/*次選單與主選單連接部分*/
.menubarA1{
background:url();
border-left:0px solid #CCCCCC;
border-right:0px solid #CCCCCC;
border-top:0px;
border-bottom:0px solid #CCCCCC;
}
/*次選單結束部分*/
.menubarA2{
background:url();
border-left:0px solid #CCCCCC;
border-right:0px solid #CCCCCC;
border-top:0px;
border-bottom:0px;
}
/*----有次選單狀態----*/
/*次選單與主選單連接部分*/
.menubarB1{
background:#AFE8F0;
border-left:1px solid #CCCCCC;
border-right:1px solid #CCCCCC;
border-top:0px;
border-bottom:0px;
}
/*放次選單按鈕的背景色*/
.menubarB3{
background:#D8F1F4;
border-left:1px solid #CCCCCC;
border-right:1px solid #CCCCCC;
border-top:0px;
border-bottom:1px solid #5CBAC8;
padding:6px;
text-align:left;
}
/*次選單結束部分*/
.menubarB2{
background:#EBEBEB;
}
/*----------------------------小屋封面圖------------------------------*/
/*COVER圖(就是勇造右邊那張大圖)*/
.cover_pic{
background:url(COVER圖網址) repeat;
}
/*--------------------勇者基本資訊和能力表--------------------*/
/*給紅心的敘述文字*/
.heartGP{
color:#303030;
}
/*評價區底色*/
.apprise_bg{
background-color:#FFFFFF;
}
/*顯示個人能力數值的底圖*/
.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;
}
/*---------------------各文章列表區(下方)---------------------*/
/*----個人部落閣----*/
/*個人部落閣文章標題顏色*/
.article_t1{
color:#C35A78;
font-weight:bold;
}
.article_t1 a:link, .article_t1 a:visited{
color:#C35A78;
font-weight:bold;
}
/*個人部落閣最新文章及GP值底色*/
.articlebox{
border:1px solid #303030;
background:url(個人部落閣最新文章及GP值底色圖網址);
background-position:right;
background-repeat:no-repeat;
padding:20px;
height:30px;
width:720;
}
個人部落閣最新文章及GP值底色相關教學
/*部落閣巴哈logo*/
.article_pic{
border:none;
height: 0px;
width: 0px;
}
把部落閣最新文章的巴哈logo圖變不見
不想把LOGO變不見。可以不用放進CSS語法裡。
/*個人部落閣文章版主回應分色線*/
.article_hr{
border:none;
background-color:#D9ECF0;
height:1px;
color:#D9ECF0;
}
/*----個人精華區----*/
/*個人精華文章標題顏色*/
.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;
}
創作內容
CSS-我的小屋CSS
聊聊 (253)