自訂框線邊框(框框隨意玩)
自訂樣式應用
語法應用編輯(二度空間)
/*二度空間 CSS自訂樣式(自訂邊框樣式)範例,語法依照中文意思排列*/
/*不存在的網址連結及多餘的重複語法,會影響正常的視窗開啟速度*/
/*注意空格及每段語法連慣性,避免開啟動作不正常,無設定的相關語法,以yahoo預設值為設定值*/
/*背景預設顏色的作用: 圖片失聯時,以背景色替代,顏色要謹慎設定*/
/*個人資料管理頁面公開的部落標題-個人資料-自我介紹+背景圖-背景預設顏色-文字顏色-字型 字體大小使用預設值*/ #ybloginfo table, #yusrinfo table, #yusrintro p {background: url(圖片網址) #E6E6E6;color:#FF0000;}
/*整頁背景預設顏色-背景圖 - 背景圖不重複 - 背景固定*/ body {background:#1B006B;background-image: url(圖片網址);background-repeat:repeat;background-attachment:fixed;}
/*回應 - 引用+邊框*/ div.btncomment a {border-left:4px double #00ffff; border-right:4px double #00ffff; border-top:4px double #00ffff; border-bottom:4px double #00ffff;} div.btntrackback a {border-left:4px double #00ffff; border-right:4px double #00ffff; border-top:4px double #00ffff; border-bottom:4px double #00ffff;}
/*訂閱+邊框(格主需在登出的狀態下才看得到)*/ div#btnsbsrb_nologin a {border-left:5px double #00ffff; border-right:5px double #00ffff; border-top:5px double #00ffff; border-bottom:5px double #00ffff;}
/*部落格自訂格名與標題內容風格描述 - 文字置中*/ #yblogtitle .mbd{text-align:center;}
/*部落格自訂格名+背景圖+背景預設顏色 - 字體顏色 - 字型 - 字體大小 - 粗體字*/ #yblogtitle h1{background: url(圖片網址) #0000bf; color: #FF0000; font-family:標楷體; FONT-SIZE:26pt; font-weight:bold;}
/*部落格描述字體顏色 - 字型 - 字體大小*/ #yblogtitle .text {color:#FF0000; font-family:標楷體; FONT-SIZE:20pt;}
/*部落格描述+背景圖+背景預設顏色+邊框*/ #yblogtitle .text {background: url(圖片網址) #0000bf; border-left:4px double #00ffff; border-right:4px double #00ffff; border-top:4px double #00ffff; border-bottom:4px double #00ffff;}
/*滑鼠自動變換含超連結字體變換顏色-連結初始字體顏色-去除連結底線+連結位置相對自動加彩色邊框*/ /*附記 : 左右欄框分目錄連結,字體顏色在此會 受到影響*/ body{cursor:url(小圖網址)} a:hover{cursor:url(小圖網址);color:#00ffff;} a,a:link,a:visited{color:#ffffff;text-decoration: none} a:hover {position: relative; border-left:3px ridge #00ffff; border-right:3px ridge #ffff00; border-top:3px ridge #00ff80; border-bottom:3px ridge #ff00ff;}
/*左右欄框分類標題 -框與框的間距+邊框*/ .ycntmod .mbd ul.list li {margin-bottom:7px; border-left:3px ridge #00ffff; border-right:3px ridge #ffff00; border-top:3px ridge #00ff80; border-bottom:3px ridge #ff00ff;}
/*左右欄框分類標題 -標題小圖-不重複 - 小圖與文字間隙*/ .ycntmod .mbd ul.list li {background:url(小圖網址) 3% 10% no-repeat;padding-left:15px;}
/*文章標題小圖-不重複 - 小圖與文字間隙 - 小圖與文字位置*/ .yblogcnt .blgtitlebar h2 {background:url(小圖網址) no-repeat;padding-left:15px;} .yblogcnt .blgtitlebar {margin-bottom:10px;zoom:1;}
/*文章標題字體-顏色-字型-大小-粗體*/ .yblogcnt .blgtitlebar h2 {color:#FF0000;font-family:標楷體;font-size:22px;font-weight:bold;}
/*文章欄位字體顏色 - 字型 - 字體大小*/ .yc3pribd .text {color: #AFEEEE;font-family:新細明體;font-size:125%;}
/*所有預設整體字體-顏色-字型-大小(其它架框項目無設定時,在此可能影響)*/ .text {color:#FFFF00; font-family:新細明體; font-size:115%;}
/*欄位名稱標題字體顏色-字型-字體大小-粗體*/ #ymodmsgbd .mhd h3, .ycntmod .mhd h3, .ymsgboard .mhd h3 {color:#FF0000;font-family:標楷體;font-size:22px;font-weight:bold;}
/*欄位名稱標題+背景圖(建議用橫形圖)-不重複-文字位置 - 此語法建議用在進階設定欄框半透明樣式*/ #ymodmsgbd .mhd h3, .ycntmod .mhd h3, .ymsgboard .mhd h3 {background: url(圖片網址) no-repeat; padding-left:15px;}
/*個性圖 - 圖框大小-不重複+邊框*/ #ymodprf .horos{width:129px;height:129px;background:url(圖片網址) no-repeat center; border-left:4px double #00ffff; border-right:4px double #00ffff; border-top:4px double #00ffff; border-bottom:4px double #00ffff;}
/*月曆-字體基本顏色-字體大小+背景圖-背景預設顏色+邊框*/ #ymodcal table {color:#FF0000; font-size:100%; background: url(圖片網址) #000000; border-left:4px double #00ffff; border-right:4px double #00ffff; border-top:4px double #00ffff; border-bottom:4px double #00ffff;}
/*月曆-連結日期+醒目框線*/ #ymodcal table a {border-left:1px solid #ff0000; border-right:1px solid #ff0000; border-top:1px solid #ff0000; border- bottom:1px solid #ff0000;}
/* 月曆上今天日期的字色及大小 */ #ymodcal .mbd td strong {color:#FFFF00; font-size:115%;}
/*捲軸改變顏色*/ html{ scrollbar-face-color: #1B006B; scrollbar-highlight-color: #FFFFFF; scrollbar-shadow-color: #FFFFFF; scrollbar-3Dlight-color: #1B006B; scrollbar-arrow-color:#FFFFFF; scrollbar-track-color: #1B006B; scrollbar-darkshadow-color:#1B006B }
/*隱藏性別小圖*/ #ymodprf .horos img{display:none;}
/*隱藏部落格相簿*/ #ymodalbum{display:none;}
/*隱藏更新日期欄*/ #ymodupdate{display:none}
/*隱藏摩頭摩尾*/ #yhtw_masthead, #yhtw_mastfoot{display:none;}
|
邊框語法解說 :
border-left:5px double #00ffff; border-right:5px double #00ffff; border-top:5px double #00ffff; border-bottom:5px double #00ffff;
left = 左邊框
right = 右邊框
top = 上邊框
bottom = 下邊框
double = 雙線 (請參考框線條樣式)
5px = 框線粗細像素值 (一般使用在1~5之間)
#ff00ff = 框線顏色色碼 (可搭配個人使用的背景配色,請參考色碼表)
框線條樣式 : ( 無、點線、實線、雙線、溝線、脊線、嵌入線、浮出線 )
相對應語法 : none︱ dotted|solid︱ double︱ groove︱ ridge︱ inset︱ outset
貼語法路徑→管理部落格→面板設定→自訂樣式→加入語法→確定
色碼表應用 : (注意 : 有些數字色碼無支援應用在奇摩部落格當邊框顏色,無支援的貼上只會顯示灰色)
英文色碼表 數字色碼表
相關設定與語法解說連結 :
http://tw.myblog.yahoo.com/jw!.KNty8iGR0WBlosOtiUpDA--/article?mid=7443&prev=1&next=7420&l=a&fid=57
http://tw.myblog.yahoo.com/jw!.KNty8iGR0WBlosOtiUpDA--/article?mid=7334&prev=7349&next=7325&l=a&fid=57
http://tw.myblog.yahoo.com/jw!.KNty8iGR0WBlosOtiUpDA--/article?mid=7210&prev=7240&next=7205&l=a&fid=57
http://tw.myblog.yahoo.com/jw!.KNty8iGR0WBlosOtiUpDA--/article?mid=7162&prev=7198&next=7089&l=a&fid=57
http://tw.myblog.yahoo.com/jw!.KNty8iGR0WBlosOtiUpDA--/article?mid=4514&prev=4665&next=3884&l=f&fid=57
