close


 ~~感謝"芭樂園"分享~(請關掉背景音樂)~~ 














部落格範本


這裡製作了幾個範本並附成果圖。
有意者,自行複製使用,或加以修改應用。
使用前記得清空原 CSS 語法,以免重複使用語法而造成網頁不穩定。





範本一:(黑底無框線)










/* customization CSS 黑底範本 */


/* Background 部落格背景 */
body{background:#000000; }

/* col layout 定義佈局寬度 */
.twocolga .ycnt3col, .twocoldr .ycnt3col {zoom:1; width:950px; text-align:left; margin:0 auto;}

/* 捲軸設定 */
html{ScrollBar-TRACK-color: #000000; ScrollBar-FACE-color: #8B8B8B; ScrollBar-ARROW-color: #FFFFFF; ScrollBar-HIGHLIGHT-color: #D0D0D0; ScrollBar-SHADOW-color: #D0D0D0; }

/* 滑鼠 */
body{cursor:url(http://hk.geocities.com/love99_h/Ani/Arrow-107.ani)}
a:hover {cursor:url(http://hk.geocities.com/love99_h/Ani/4-02.ani)}

/* Master header 第一橫框(主頂欄)*/
#yhtw_masthead{ background:#8B8B8B; filter:alpha(opacity=0); }
#yhtw_masthead a ,#yhtw_masthead a:link{color:#00FF00;} ,#yhtw_masthead a:visited{color:#00FFFF;} ,#yhtw_masthead a:hover{color:#FF00FF;}

/* Blog title 第二橫框(部落格名稱)*/
#yblogtitle h1{color:#00BF60; font-family:標楷體; font-weight:bold; }
#yblogtitle .mbd, #yblogtitle .mft{ background-color:#D0D0D0; zoom:1; filter:alpha(opacity=0); font-family:標楷體; color:#FFFFBF; font-size:130%; }

/* Main content header 內文區頂欄 */
.yc3pribd .mhd{ background:#8B8B8B; color:#FFFFFF; text-align:center; }

/* Article content module 內文區文章標題 */
.yblogcnt .blgtitlebar {margin-bottom:5px; zoom:1;}
.yblogcnt .blgtitlebar h2 {font-family:標楷體; font-weight:bold; font-size:14pt; background:url(http://hk.geocities.com/love99_h/Gif/Sg/SgStar004.gif) no-repeat; padding-left:33px;}
.yblogcnt .blgtitlebar h2 a{color:#000080; padding-right:10px;}

/* Main content body 內文區內容 */
.yc3pribd .mbd, .yc3pribd .mft, #yreplymsg table, #ysbscrblist table, #ybloginfo table, #yusrinfo table, #yusrintro p{ background:#D0D0D0; zoom:1; filter:alpha(opacity:100); color:#000000; }

/* Nav module header 左右欄頂欄 */
.yc3sec .mhd, .yc3subbd .mhd, .yc3sec .mhd a, .yc3subbd .mhd a, .yc3sec .mhd a:link, .yc3subbd .mhd a:link, .yc3sec .mhd a:visited, .yc3subbd .mhd a:visited{ background:#8B8B8B; color:#FFFFFF; text-align:center; }

/* Nav module body 左右欄內容區 */
.yc3sec .mbd, .yc3subbd .mbd, .yc3sec .mft, .yc3subbd .mft{ background:#D0D0D0; zoom:1; filter:alpha(opacity:100); color:#000080; }

/* Links 連結字串控制 */
a,a:link,a:visited{color:#000080; }
a:hover{color:#FF00FF; position:relative; top:1px; left:1px; }

/* Nav module list 連結字串前加圖示 */
.ycntmod .mbd ul.list li {background:url(http://hk.geocities.com/love99_h/Gif/Sg/SgBeingA02.gif) no-repeat; padding-left:18px; margin-bottom:7px; }
.ycntmod .mbd ul.list li.more {background:url(http://hk.geocities.com/love99_h/Gif/Sg/SgBeingA04.gif) 50px no-repeat; }

/* 變更個人性別圖 */
#ymodprf .horos img{display:none;}
#ymodprf .horos{width:130px; height:134px; background:url(http://hk.geocities.com/love99_h/Gif/Male/MZ001.gif) center no-repeat; }

/* Module latest upup 改變更新日期前圖示 */
#ymodupdate .mbd .date{background:url(http://hk.geocities.com/love99_h/Gif/Sg/SgFlower004.gif) no-repeat; padding-left:35px; font-size:115%; }

/* 月曆上今天日期的字色及大小 */
#ymodcal .mbd td strong{ color:#FF0000; font-size:120%; }

/* 框線設置:無框線 */
.ycntmod .rctop { background:none; margin:0; }
.ycntmod .rctop div {background:none; height:0; right:0; }
.ycntmod .rcbtm { background:none; margin:0; }
.ycntmod .rcbtm div {background:none; height:0; right:0; }
.ycntmod .rcl { background:none; padding:0; }
.ycntmod .rcr { background:none; padding:0; }
.ycntmod { margin:0; }




範本二:(白底無框線)










/* customization CSS 白底範本 */

/* Background 部落格背景 */
body{background-color:#FFFFFF; }

/* col layout 定義佈局寬度 */
.twocolga .ycnt3col, .twocoldr .ycnt3col {zoom:1; width:950px; text-align:left; margin:0 auto;}

/* 捲軸設定 */
html{ScrollBar-TRACK-color: #FFFFFF; ScrollBar-FACE-color: #FCFAE1; ScrollBar-ARROW-color: #FF0000; }

/* 滑鼠 */
body{cursor:url(http://hk.geocities.com/love99_h/Ani/Stick-111.ani)}
a:hover {cursor:url(http://hk.geocities.com/love99_h/Ani/4-02.ani)}

/* Master header 第一橫框(主頂欄)*/
#yhtw_masthead{color:#FF0000; background:#E6EBD5; filter:alpha(opacity=100); opacity:1; moz-opacity:1;}
#yhtw_masthead a ,#yhtw_masthead a:link{color:#C3BE71;} ,#yhtw_masthead a:visited{color:#808000;} ,#yhtw_masthead a:hover{color:#FF00FF;}

/* Blog title 第二橫框(部落格名稱)*/
#yblogtitle h1{color:#438059; font-family:標楷體; font-weight:bold; }
#yblogtitle .mbd, #yblogtitle .mft{color:#FF0000; font-family:標楷體; font-size:130%; background-color:#FCFAE1; zoom:1; filter:alpha(opacity=0); }

/* blast 突出框(招呼語框)*/
#yblast .bg{zoom:1; filter:alpha(opacity:100); background:#FFFF00; width:425px; height:30px; }
#yblast .text{color:#FF0000; font-size:18pt; font-family:標楷體;}
#yblast .text a{display:none; }

/* Main content header 內文區頂欄 */
.yc3pribd .mhd{ background:#E6EBD5; filter:alpha(opacity=100); color:#800000; text-align:center; }

/* Article content module 內文區文章標題 */
.yblogcnt .blgtitlebar {margin-bottom:5px; zoom:1;}
.yblogcnt .blgtitlebar h2 {font-family:標楷體; font-weight:bold; font-size:14pt; background:url(http://hk.geocities.com/love99_h/Gif/Sg/SgStar004.gif) no-repeat; padding-left:33px;}
.yblogcnt .blgtitlebar h2 a{color:#008080; padding-right:10px;}

/* Main content body 內文區內容 */
.yc3pribd .mbd, .yc3pribd .mft, #yreplymsg table, #ysbscrblist table, #ybloginfo table, #yusrinfo table, #yusrintro p{ background:#FCFAE1; color:#57708F; zoom:1; filter:alpha(opacity:100); }

/* Nav module header 左右欄頂欄 */
.yc3sec .mhd, .yc3subbd .mhd, .yc3sec .mhd a, .yc3subbd .mhd a, .yc3sec .mhd a:link, .yc3subbd .mhd a:link, .yc3sec .mhd a:visited, .yc3subbd .mhd a:visited{ background:#E6EBD5; filter:alpha(opacity:100); color:#800000; text-align:center; }

/* Nav module body 左右欄內容區 */
.yc3sec .mbd, .yc3subbd .mbd, .yc3sec .mft, .yc3subbd .mft{ background:#FCFAE1; zoom:1; filter:alpha(opacity:100); color:#808000; }

/* Links 連結字串控制 */
a,a:link,a:visited{color:#808000; }
a:hover{color:#FF00FF; position:relative; top:1px; left:1px; }

/* Nav module list 連結字串前加圖示 */
.ycntmod .mbd ul.list li {background:url(http://hk.geocities.com/love99_h/Gif/Sg/SgBeingA02.gif) no-repeat; padding-left:18px; margin-bottom:7px; }
.ycntmod .mbd ul.list li.more {background:url(http://hk.geocities.com/love99_h/Gif/Sg/SgBeingA04.gif) 50px no-repeat; }

/* 改變個人性別圖 */
#ymodprf .horos img{display:none;}
#ymodprf .horos{width:130px; height:134px; background:url(http://hk.geocities.com/love99_h/Gif/Male/MZ001.gif) center no-repeat; }

/* Module latest upup 改變更新日期前圖示 */
#ymodupdate .mbd .date{background:url(http://hk.geocities.com/love99_h/Gif/Sg/SgFlower004.gif) no-repeat; padding-left:35px; font-size:115%; }

/* 月曆上今天日期的字色及大小 */
#ymodcal .mbd td strong{ color:#FF0000; font-size:12pt; }

/* 框線設置:無框線 */
.ycntmod .rctop { background:none; margin:0; }
.ycntmod .rctop div {background:none; height:0; right:0; }
.ycntmod .rcbtm { background:none; margin:0; }
.ycntmod .rcbtm div {background:none; height:0; right:0; }
.ycntmod .rcl { background:none; padding:0; }
.ycntmod .rcr { background:none; padding:0; }
.ycntmod { margin:0; }




範本三:(淡紫色無框線)










/* customization CSS 紫系範本 */

/* Background 部落格背景 */
body{background:#F4ECF1; }

/* col layout 定義佈局寬度 */
.twocolga .ycnt3col, .twocoldr .ycnt3col {zoom:1; width:950px; text-align:left; margin:0 auto;}

/* 捲軸設定 */
html{ScrollBar-TRACK-color: #F4ECF1; ScrollBar-FACE-color: #FDEEE0; ScrollBar-ARROW-color: #A040FF; ScrollBar-HIGHLIGHT-color: #DFBFFF; ScrollBar-SHADOW-color: #DFBFFF; }

/* 滑鼠 */
body{cursor:url(http://hk.geocities.com/love99_h/Ani/Stick-110.ani)}
a:hover {cursor:url(http://hk.geocities.com/love99_h/Ani/4-02.ani)}

/* Master header 第一橫框(主頂欄)*/
#yhtw_masthead{ background:#8B8B8B; filter:alpha(opacity=0); }
#yhtw_masthead a ,#yhtw_masthead a:link{color:#DFBFFF;} ,#yhtw_masthead a:visited{color:#A94A76;} ,#yhtw_masthead a:hover{color:#FF00FF;}

/* Blog title 第二橫框(部落格名稱)*/
#yblogtitle h1{color:#A94A76; font-family:標楷體; font-weight:bold; }
#yblogtitle .mbd, #yblogtitle .mft{ background-color:#D0D0D0; zoom:1; filter:alpha(opacity=0); font-family:標楷體; color:#7F3F00; font-size:130%; }

/* Main content header 內文區頂欄 */
.yc3pribd .mhd{ background:#DCD1DF; color:#A94A76; text-align:center; }

/* Article content module 內文區文章標題 */
.yblogcnt .blgtitlebar {margin-bottom:5px; zoom:1;}
.yblogcnt .blgtitlebar h2 {font-family:標楷體; font-weight:bold; font-size:14pt; background:url(http://hk.geocities.com/love99_h/Gif/Sg/SgStar004.gif) no-repeat; padding-left:33px;}
.yblogcnt .blgtitlebar h2 a{color:#54466F; padding-right:10px;}

/* Main content body 內文區內容 */
.yc3pribd .mbd, .yc3pribd .mft, #yreplymsg table, #ysbscrblist table, #ybloginfo table, #yusrinfo table, #yusrintro p{ background:#FDEEE0; zoom:1; filter:alpha(opacity:100); color:#7F3F00; }

/* Nav module header 左右欄頂欄 */
.yc3sec .mhd, .yc3subbd .mhd, .yc3sec .mhd a, .yc3subbd .mhd a, .yc3sec .mhd a:link, .yc3subbd .mhd a:link, .yc3sec .mhd a:visited, .yc3subbd .mhd a:visited{ background:#DCD1DF; color:#A94A76; text-align:center; }

/* Nav module body 左右欄內容區 */
.yc3sec .mbd, .yc3subbd .mbd, .yc3sec .mft, .yc3subbd .mft{ background:#FDEEE0; zoom:1; filter:alpha(opacity:100); color:#800080; }

/* Links 連結字串控制 */
a,a:link,a:visited{color:#800080; }
a:hover{color:#FF00FF; position:relative; top:1px; left:1px; }

/* Nav module list 連結字串前加圖示 */
.ycntmod .mbd ul.list li {background:url(http://hk.geocities.com/love99_h/Gif/Sg/SgBeingA02.gif) no-repeat; padding-left:18px; margin-bottom:7px; }
.ycntmod .mbd ul.list li.more {background:url(http://hk.geocities.com/love99_h/Gif/Sg/SgBeingA04.gif) 50px no-repeat; }

/* 變更個人性別圖 */
#ymodprf .horos img{display:none;}
#ymodprf .horos{width:130px; height:134px; background:url(http://hk.geocities.com/love99_h/Gif/Male/MZ001.gif) center no-repeat; }

/* Module latest upup 改變更新日期前圖示 */
#ymodupdate .mbd .date{background:url(http://hk.geocities.com/love99_h/Gif/Sg/SgFlower004.gif) no-repeat; padding-left:35px; font-size:115%; }

/* 月曆上今天日期的字色及大小 */
#ymodcal .mbd td strong{ color:#FF0000; font-size:120%; }

/* 框線設置:無框線 */
.ycntmod .rctop { background:none; margin:0; }
.ycntmod .rctop div {background:none; height:0; right:0; }
.ycntmod .rcbtm { background:none; margin:0; }
.ycntmod .rcbtm div {background:none; height:0; right:0; }
.ycntmod .rcl { background:none; padding:0; }
.ycntmod .rcr { background:none; padding:0; }
.ycntmod { margin:0; }




範本四:(有空再做)







 
 


範本五:(有有空再做)







 
 


玫瑰物語:(有人在用,僅供參考,請勿仿造)










/* customization CSS 玫瑰物語 */

/* Background 部落格背景 */
body{background-color:#E1C4A8; background-image:url(http://www.fileden.com/files/2007/1/14/642841/Chart/Rose11.jpg); background-repeat:repeat; background-attachment:fixed; }

/* col layout 定義佈局寬度 */
.twocolga .ycnt3col, .twocoldr .ycnt3col {zoom:1; width:950px; text-align:left; margin:0 auto;}

/* 捲軸設定 */
html{ScrollBar-TRACK-color: #E1C4A8;
ScrollBar-FACE-color: #E1C4A8;
ScrollBar-ARROW-color: #FFFFFF;
ScrollBar-HIGHLIGHT-color: #8000FF;
ScrollBar-SHADOW-color: #8000FF;}

/* 滑鼠 */
body{cursor:url(http://www.fileden.com/files/2007/1/14/642841/Mouse/Rose01.ani)}
a:hover {cursor:url(http://www.fileden.com/files/2007/1/14/642841/Mouse/Welcome01.ani)}

/* Master header 第一橫框(主頂欄)*/
#yhtw_masthead{color:#FF0000; background:#C3BE71; filter:alpha(opacity=0); opacity:1; moz-opacity:1;}
#yhtw_masthead a ,#yhtw_masthead a:link{color:#DFBFFF;} ,#yhtw_masthead a:visited{color:#E0DCAA;} ,#yhtw_masthead a:hover{color:#FFC0C0;}

/* Blog title 第二橫框(部落格名稱)*/
#yblogtitle h1{color:#FFFF80; font-family:標楷體; font-weight:bold; }
#yblogtitle .mbd, #yblogtitle .mft{color:#FFFFBF; font-family:標楷體; font-size:130%; background-color:#C49D71; zoom:1; filter:alpha(opacity=0); }

/* blast 突出框(招呼語框)*/
#yblast .bg{zoom:1; background:#FFDFBF; width:550px; height:30px; }
#yblast .text{color:#FFFFFF; font-size:14pt; font-family:標楷體;}
#yblast .text a{display:none; }

/* Main content header 內文區頂欄 */
.yc3pribd .mhd{ background:#C3BE71; filter:alpha(opacity=90); color:#823857; text-align:center; font-size:14px; }

/* Article content module 內文區文章標題 */
.yblogcnt .blgtitlebar {margin-bottom:5px; zoom:1;}
.yblogcnt .blgtitlebar h2 {font-family:標楷體; font-weight:bold;font-size:14pt;background:url(http://www.fileden.com/files/2007/1/14/642841/Chart/SgBeingA08.gif) no-repeat; padding-left:21px;}
.yblogcnt .blgtitlebar h2 a{color:#800000; padding-right:10px;}

/* Main content body 內文區內容 */
.yc3pribd .mbd, .yc3pribd .mft, #yreplymsg table, #ysbscrblist table, #ybloginfo table, #yusrinfo table, #yusrintro p{ background:#FFDFBF; color:#823857; zoom:1; filter:alpha(opacity:75); }

/* Nav module header 左右欄頂欄 */
.yc3sec .mhd, .yc3subbd .mhd, .yc3sec .mhd a, .yc3subbd .mhd a, .yc3sec .mhd a:link, .yc3subbd .mhd a:link, .yc3sec .mhd a:visited, .yc3subbd .mhd a:visited{ background:#C3BE71; filter:alpha(opacity:90); color:#823857; text-align:center; }

/* Nav module body 左右欄內容區 */
.yc3sec .mbd, .yc3subbd .mbd, .yc3sec .mft, .yc3subbd .mft{ background:#FFDFBF; zoom:1; filter:alpha(opacity:75); color:#823857; }

/* Links 連結字串控制 */
a,a:link,a:visited{color:#800080; }
a:hover{color:#FFC0C0; position:relative; top:1px; left:1px; }

/* Nav module list 連結字串前加圖示 */
.ycntmod .mbd ul.list li {background:url(http://www.fileden.com/files/2007/1/14/642841/Chart/SgBeingA02.gif) 0px no-repeat; padding-left:18px; margin-bottom:7px; }
.ycntmod .mbd ul.list li.more {background:url(http://www.fileden.com/files/2007/1/14/642841/Chart/SgBeingA04.gif) 50px no-repeat; }

/* 改變個人性別圖 */
#ymodprf .horos img{display:none;}
#ymodprf .horos{width:136px; height:120px; background:url(http://www.fileden.com/files/2007/1/14/642841/Chart/Rose-01.gif) }
/* Module latest upup 改變更新日期前圖示 */
#ymodupdate .mbd .date{background:url(http://www.fileden.com/files/2007/1/14/642841/Chart/SgFlower004.gif) no-repeat; padding-left:35px; font-size:115%; }

/* 月曆上今天日期的字色及大小 */
#ymodcal .mbd td strong{ color:#80C0FF; font-size:120%; }

/* 無框線設置 */
.ycntmod .rctop { background:none; margin:0; }
.ycntmod .rctop div {background:none; height:0; right:0; }
.ycntmod .rcbtm { background:none; margin:0; }
.ycntmod .rcbtm div {background:none; height:0; right:0; }
.ycntmod .rcl { background:none; padding:0; }
.ycntmod .rcr { background:none; padding:0; }
.ycntmod { margin:0; }




目前使用:






/* customization CSS 黑底範本 */

/* Background 部落格背景 */
body{background:#000000; }

/* col layout 定義佈局寬度 */
.twocolga .ycnt3col, .twocoldr .ycnt3col {zoom:1; width:990px; text-align:left; margin:0 auto;}

/* 捲軸設定 */
html{ScrollBar-TRACK-color: #000000; ScrollBar-FACE-color: #8B8B8B; ScrollBar-ARROW-color: #FFFFFF; ScrollBar-HIGHLIGHT-color: #D0D0D0; ScrollBar-SHADOW-color: #D0D0D0; }

/* 滑鼠 */
body{cursor:url(http://hk.geocities.com/love99_h/Ani/Arrow-107.ani)}
a:hover {cursor:url(http://hk.geocities.com/love99_h/Ani/4-02.ani)}

/* Master header 第一橫框(主頂欄)*/
#yhtw_masthead{ background:#8B8B8B; filter:alpha(opacity=0); }
#yhtw_masthead a ,#yhtw_masthead a:link{color:#00FF00;} ,#yhtw_masthead a:visited{color:#00FFFF;} ,#yhtw_masthead a:hover{color:#FF00FF;}

/* Blog title 第二橫框(部落格名稱)*/
#yblogtitle h1{color:#00BF60; font-family:標楷體; font-weight:bold; }
#yblogtitle .mbd, #yblogtitle .mft{ background-color:#D0D0D0; zoom:1; filter:alpha(opacity=0); font-family:標楷體; color:#FFFFBF; font-size:130%; }

/* Main content header 內文區頂欄 */
.yc3pribd .mhd{ background:#8B8B8B; color:#FFFFFF; text-align:center; }

/* Article content module 內文區文章標題 */
.yblogcnt .blgtitlebar {margin-bottom:5px; zoom:1;}
.yblogcnt .blgtitlebar h2 {font-family:標楷體; font-weight:bold; font-size:14pt; background:url(http://hk.geocities.com/love99_h/Gif/Sg/SgStar004.gif) no-repeat; padding-left:33px;}
.yblogcnt .blgtitlebar h2 a{color:#000080; padding-right:10px;}

/* Main content body 內文區內容 */
.yc3pribd .mbd, .yc3pribd .mft, #yreplymsg table, #ysbscrblist table, #ybloginfo table, #yusrinfo table, #yusrintro p{ background:#D0D0D0; zoom:1; filter:alpha(opacity:100); color:#000000; }

/* Nav module header 左右欄頂欄 */
.yc3sec .mhd, .yc3subbd .mhd, .yc3sec .mhd a, .yc3subbd .mhd a, .yc3sec .mhd a:link, .yc3subbd .mhd a:link, .yc3sec .mhd a:visited, .yc3subbd .mhd a:visited{ background:#8B8B8B; color:#FFFFFF; text-align:center; }

/* Nav module body 左右欄內容區 */
.yc3sec .mbd, .yc3subbd .mbd, .yc3sec .mft, .yc3subbd .mft{ background:#D0D0D0; zoom:1; filter:alpha(opacity:100); color:#000080; }

/* Links 連結字串控制 */
a,a:link,a:visited{color:#000080; }
a:hover{color:#FF00FF; position:relative; top:1px; left:1px; }

/* Nav module list 連結字串前加圖示 */
.ycntmod .mbd ul.list li {background:url(http://hk.geocities.com/love99_h/Gif/Sg/SgBeingA02.gif) no-repeat; padding-left:18px; margin-bottom:7px; }
.ycntmod .mbd ul.list li.more {background:url(http://hk.geocities.com/love99_h/Gif/Sg/SgBeingA04.gif) 50px no-repeat; }

/* 變更個人性別圖 */
#ymodprf .horos img{display:none;}
#ymodprf .horos{width:130px; height:134px; background:url(http://hk.geocities.com/love99_h/Gif/Male/MZ001.gif) center no-repeat; }

/* Module latest upup 改變更新日期前圖示 */
#ymodupdate .mbd .date{background:url(http://hk.geocities.com/love99_h/Gif/Sg/SgFlower004.gif) no-repeat; padding-left:35px; font-size:115%; }

/* 月曆上今天日期的字色及大小 */
#ymodcal .mbd td strong{ color:#FF0000; font-size:120%; }

/* 框線設置:無框線 */
.ycntmod .rctop { background:none; margin:0; }
.ycntmod .rctop div {background:none; height:0; right:0; }
.ycntmod .rcbtm { background:none; margin:0; }
.ycntmod .rcbtm div {background:none; height:0; right:0; }
.ycntmod .rcl { background:none; padding:0; }
.ycntmod .rcr { background:none; padding:0; }
.ycntmod { margin:0; }


















前言

主文區

左右欄框

部落格主體

部落格頂部的三橫框

部落格範本

其他功能效果

發文 常用語法

網路空間申請教學

CSS 語法教學連結





myshero重新整理編\97.08.06-03




 ~文章框架來自~~愛在★‧星夜天空下想您‧‧~~~ 


 


arrow
arrow
    全站熱搜
    創作者介紹
    創作者 Myshero 的頭像
    Myshero

    ╰☆ Myshero520╭☆

    Myshero 發表在 痞客邦 留言(0) 人氣()