自訂框線邊框(框框隨意玩)

自訂樣式應用

語法應用編輯(二度空間)


/*二度空間 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

voicexml

創作者介紹

tryit287814

tryit287814 發表在 痞客邦 PIXNET 留言(1) 人氣()


留言列表 (1)

發表留言
  • 平安
  • 午安~ ~ 過來給你灌水灌水灌水再灌水~
找更多相關文章與討論