小君的友情世界

翔霏學習版-痞客樣式02預覽圖 兩欄式右欄

建議解析度1024X768以上

另有Blog Switc 百款背景網頁特效

更多背景特效 將陸續收集 

版型語法複製↓ 

body { font-family:arial, verdana, Helvetica, sans-serif; -webkit-text-size-adjust:none; font-size:12px; background:url(http://i.imgur.com/Hl10cpz.jpg); color:#333; line-height:150%; background-image:url(http://i.imgur.com/Hl10cpz.jpg); background-position:undefined; } * { margin:0; padding:0; } table { border-collapse:collapse; border-spacing:0; } address,caption,cite,code,dfn,th,var { font-style:normal; font-weight:normal; } ol,ul { list-style:none; } caption,th { text-align:left; } h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; } q:before,q:after { content:''; } pre { font-size:1em; } .article-content { _height:1%; overflow:hidden; _overflow:none; color:#107070; text-align:left; margin:10px 0; } .article-content p { margin-bottom:1em; } a { text-decoration:none; color:#107070; } br { letter-spacing:normal; } a:hover { color:#00C4C4; } #authority { border-bottom:1px dashed #107070; text-align:center; padding:5px 0; } #authority a { text-shadow:1px 1px 0 #fff; margin:0 5px; } #container2 { width:910px; background:url(http://i.imgur.com/KuSfNzU.jpg) left top repeat-y; margin:0 auto; } #header { height:365px; overflow:hidden; position:relative; background:url(http://i.imgur.com/JbFrJ0U.jpg) no-repeat; background-image:url(http://i.imgur.com/JbFrJ0U.jpg); background-position:undefined; background-repeat:no-repeat; } #login-bar { position:absolute; left:0; top:35px; color:#107070; } #login-bar a { color:#107070; } #banner h1 { position:absolute; left:30px; top:90px; height:20px; width:250px; overflow:hidden; } #banner h1 a { font-size:15px; color:#00cc00; font-weight:bold; line-height:20px; text-shadow:1px 1px 0 #fff; } #banner h2 { position:absolute; left:30px; top:130px; font-size:9px \9; color:#00cc00; height:30px; width:300px; line-height:15px; overflow:hidden; } #blog-category { position:absolute; top:80px; left:500px; font-size:15px; color:#107070; } } #blog-category a { color:#107070; } #navigation { position:absolute; left:20px; top:210px; } #navigation li { float:left; height:25px; } #navigation li a { display:block; width:100%; height:100%; font-size:0; text-indent:-5000px; } #navigation #link-album { width:65px; } #navigation #link-blog { width:93px; } #navigation #link-guestbook { width:93px; } #navigation #link-profile { width:65px; } #main { background:url(http://i.imgur.com/KuSfNzU.jpg) no-repeat; overflow:hidden; _overflow:none; _height:1%; padding:20px; } #content { float:left; width:625px; overflow:hidden; } #spotlight { -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; background:#107070; border:1px solid #3AA5A5; margin:0 10px 30px; padding:10px 15px; } #spotlight h5 { color:#fc0; font-weight:bold; font-size:15px; margin-bottom:5px; text-shadow:1px 1px 0 #107070; } #spotlight-text { color:#107070; } .article { _height:1%; margin-bottom:20px; border-bottom:1px dotted #FF7F7C; padding-bottom:20px; } .article-head { _height:1%; } .publish { font-size:11px; font-family:verdana; height:24px; text-shadow:1px 1px 0 #FF7F7C; padding-top:14px; padding-left:50px; background:url(http://i.imgur.com/6g7DykJ.jpg) no-repeat; color:#fff; } .title { _height:1%; padding:5px 10px; } .title a { color:#107070; font-weight:bold; font-size:20px; text-shadow:1px 1px 0 #fff; } .title a img { display:inilne; } .article-body { text-align:right; color:#107070; margin:10px; } .article-footer { -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; background:#97E2DC; margin:10px; padding:10px; } .back-to-top { text-align:right; text-transform:uppercase; text-shadow:1px 1px 0 #eee; } .article-area-title,#view-mode { color:#97E2DC; } .main-list { -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; background:#C9F3F0; margin:10px; padding:20px; } .main-list th { border-bottom:2px solid #00FFFF; padding:5px; } .main-list td { border-bottom:1px solid #2ADFDF; padding:5px; } .user-post-box { _height:1%; margin-bottom:30px; } .user-post-title { height:50px; margin-bottom:20px; font-size:0; text-indent:-5000px; background:url(http://i.imgur.com/Hu0nLsP.jpg) no-repeat; } #comment-box .user-post-title { background:url(http://i.imgur.com/Hu0nLsP.jpg) left bottom no-repeat; } .single-post { -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; overflow:hidden; _overflow:none; _height:1%; width:580px; background:#97E2DC; border:1px solid #BCF6F1; margin:10px auto; padding:10px; } .post-info { color:#107070; font-size:12px; font-family:tahoma; font-weight:bold; margin-bottom:5px; text-shadow:1px 1px 0 #fff; float:left; width:500px; } .post-photo { float:right; width:60px; } .post-photo img { width:50px; height:50px; border:1px solid #ccc; padding:2px; } .post-text { color:#C40000; float:left; width:500px; } .reply-text { border-top:1px dashed #FF7F7C; padding-top:5px; color:#C675EC; margin-top:5px; float:left; width:500px; } .single-post.secret .post-text { float:none; width:auto; } #trackback-url { text-align:right; padding:10px; } #trackback-box input#trackback-input { width:300px; } #trackback-box .post-text { width:auto; float:none; } .page { text-align:center; padding:20px; } .page a,.page SPAN { -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; border:1px solid #9CEBAE; color:#9CEBAE; margin:0 1px; padding:3px 10px; } .page a:hover { background:#00C4C4; border:1px solid #00C4C4; color:#fff; } .page SPAN { color:#666; } #links { margin-top:120px; float:right; width:220px; overflow:hidden; } .box { _height:1%; margin-bottom:20px; } .box-title { background:url(http://i.imgur.com/elBzwEF.jpg) no-repeat; padding-left:45px; font-weight:bold; color:#0F4A4A; font-size:20px; font-family:華康行書體; text-shadow:1px 1px 0 #FFFF00; height:30px; line-height:30px; } .box-text { color:#888; font-size:15px; line-height:20px; padding:10px!important; } .box-more { text-align:right; margin:5px 0; } .box-more a { font-size:11px; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; background:#9CEBAE; color:#fff; padding:2px 5px; } #user-info dl dd { margin:0; } #user-info .user-img { margin-bottom:5px; width:95px; } #user-info .user-img img { -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; background:#fff; border:1px solid #ccc; padding:3px; } #calendar th,#calendar td { text-align:center; padding:1px; } #calendar td a { -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; background:#97E2DC; color:#107070; display:block; margin:1px; } #search ul,#visitor ul,#crumb ul { overflow:hidden; _overflow:none; _height:1%; margin-bottom:5px; } #visitor li,#crumb li { float:left; line-height:0; margin:2px; } #visitor li img,#crumb li img { width:40px; height:40px; background:#fff; border:1px solid #000; padding:1px; } #search li { float:left; margin-right:3px; } #latest-trackback a,#latest-comment a,#subscription a { display:block; width:99%; } #footer { clear:both; background:url(http://i.imgur.com/mGvxKT1.jpg) no-repeat; padding-top:50px; height:100px; text-align:center; } #bottom,#bottom a { color:#107070; } input,textarea { vertical-align:middle; font-family:Helvetica, Arial, "LiHei Pro", PMingLiU, sans-serif; font-size:1em; color:#666; border:1px solid #ccc; background:#fff; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; padding:2px 5px; } select { font-family:Helvetica, Arial, "LiHei Pro", PMingLiU, sans-serif; font-size:1em; color:#666; border:1px solid #ccc; background:#fff; width:90%; padding:2px; } #header h1 a { color:#0cc; font-size:14pt; } #header h1 a:link,#header h1 a:visited,#header h1 a:hover,#header h1 a:active { color:#0cc; } #header h1 { font-size:14pt; } #header h2 { color:#0cc; font-size:12pt; } fieldset,img,abbr,acronym { border:0; } #banner .skiplink,.time,.title img,.post-comment,#recent-article img { display:none; } .main-list table,#calendar table { width:100%; } #latest-trackback li,#latest-comment li,#subscription li,#announce li,#recent-article li,#hot-article li,#category li,#latest-comment li,#latest-trackback li,#subscription li { margin-bottom:3px; } #container #links-row-1 div.hslice[id*="-mib-"], #container #links-row-1 div.hslice[id*="-Mib-"], #container #links-row-1 div.hslice[id*="-mIb-"], #container #links-row-1 div.hslice[id*="-miB-"]{ display:none !important; } /*此語法只有pixnet可以用，請不要擅自亂改語法及圖片喔！*/ /*將這段語法貼在CSS最下面就可以囉!*/ #visitor ul{left:20px;width:180px;height:195px;background: url(http://i.imgur.com/E7726Id.gif); margin-left:13px;padding-left:15px;padding-top:105px;} #visitor IMG {} #visitor .box-text li a{ height:45px;width:45px; display:block; MARGIN: 5px; background:#FFF url(http://i.imgur.com/coC2CsX.gif) no-repeat center center; } #visitor .box-text li a:hover {background:none;} #visitor .box-text li a img{visibility:hidden;height:45px;width:45px;} #visitor .box-text li a:hover img{visibility:visible;height:45px;width:45px} #visitor .box-text li { float: left; } #visitor .box-text ul{} #visitor .box-more{clear:both;} a, a:link, a:visited{color:#107070;text-decoration:none;} a:hover{color:#C675EC;position:relative;top:2px;background:url(http://) repeat-x bottom;} html{SCROLLBAR-FACE-COLOR:#97E2DC; SCROLLBAR-HIGHLIGHT-COLOR:#FFFFFF; SCROLLBAR-3DLIGHT-COLOR:#FFFFFF; SCROLLBAR-ARROW-COLOR:#FFFFFF; SCROLLBAR-DARKSHADOW-COLOR:#97E2DC;} #category .box-text h6 img{display:none;} #category .box-text h6 { background-image:url(http://cute.pro.vexp.idv.tw/blogimg07042.gif); background-repeat:no-repeat; background-position:left center;color:#107070; line-height:30px; padding-left:25px;font-size:16px} #category .box-text li a{ background-image:url(http://cute.pro.vexp.idv.tw/cros1-icon-f06_sZQv.gif); background-repeat:no-repeat; background-position:1px 1px; padding-left:22px} #category .box-text li a:hover{ background-image:url(http://cute.pro.vexp.idv.tw/blogimg07042.gif); background-repeat:no-repeat} padding-left:22px

翔霏學習版-痞客留言板01預覽圖

留言板語法複製↓ 

body { font-family: 'trebuchet ms', verdana, sans-serif; background:#81D2CC url(http://i.imgur.com/LRc89jZ.jpg) repeat-x top; color:#000000; font-size:12px ; margin:0; } #Container{ background:url(http://i.imgur.com/HXsT89x.jpg) repeat-y center; width: 901px; margin: 0 auto; text-align: left; } #pageHeader { background:url(http://i.imgur.com/xLkxcCa.jpg) no-repeat top center; color:#000000; width:901px; height:500px; } #navbar { padding:0px 10px; position:relative; top:445px; left:-30px; color:#0C7A6F; margin:0 auto; text-align:right;} .navBarLink {color:#0C7A6F} .navBarLink a, .navBarLink a:visited, .navBarLink a:active {color:#0C7A6F } .navBarLink a:hover {color:#0C7A6F} #gbheader {} .adblock { padding-bottom:10px; } .gbTopic { padding: 10px 0px 0px 55px; } .gbTopic a { color: #6c2b07; font-family: Arial, Helvetica, sans-serif; line-height: 23px; font-size: 14px; text-decoration: none; } .gbDescr { color: #C40000; font-family: Arial, Helvetica, sans-serif; line-height: 20px; font-size: 12px; text-decoration: none; float:left; padding: 5px 0px 0px 80px; clear: both; } #gbbody { clear:both; width: 700px; margin: 0 auto; } #gbfooter { } #pageFooter { color:#187773; clear: both; width:901px; height:90px; background:#81D2CC url(http://i.imgur.com/a0HVX9E.jpg) no-repeat center top;} #footernav { float:left; margin-top:80px; padding-left:35px; } #copyright { float:right; margin-top:80px; padding-right:35px; color:#aaa; } .crtxt {color: #187773; font-family: Arial, Helvetica, sans-serif; line-height: 23px; font-size: 12px; text-decoration: none; } a:hover { font-family: Arial, Helvetica, sans-serif; color: #187773; text-decoration: none; } a.styleLink { font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 23px; color: #0C7A6F; text-decoration: underline; } a.styleLinkNow { font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 23px; color: blue; } .styleTxt { font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 23px; color: #0C7A6F; text-decoration: none; } .gbBox { background:#C0EAE6; margin:0 auto 30px auto; width:700px; } .spacerDiv{ clear:both; } .gbBoxLeft { width:150px; border:0px; float:left; } .gbBoxRight { width:550px; float:right; } .gbUserImg { border-right: 0px; } .ImgTd { text-align:center; padding: 10px; height:90px; } .UsernameTd { text-align:center; padding: 7px 0px 3px 0px; height:25px; } .UserlinkTd { padding: 7px 0px 3px 0px; height:25px; text-align:center; } .UserlinkTd table { margin:0 auto; } .UserlinkTd a span{ display:none; } .UserlinkTd a { display:block; width:16px; height:16px; } .linkMail a { background:url(http://s.pixfs.net/f.pixnet.net/css/gb/images/email.gif) center; } .linkURL a { background:url(http://s.pixfs.net/f.pixnet.net/css/gb/images/www.gif) center no-repeat; } .linkIP a { background:url(http://s.pixfs.net/f.pixnet.net/css/gb/images/info.gif) center no-repeat; } .linkDelete a { background:url(http://s.pixfs.net/f.pixnet.net/css/gb/images/delete.png) center no-repeat;} .loggedIn { padding-left:15px; background: url(http://s.pixfs.net/f.pixnet.net/css/gb/images/vuser.gif) left no-repeat; } .InnerBox { border-collapse: collapse; width:520px; margin:10px; } .fieldName { width:80px; text-align:right; padding-right:5px; border-bottom: 1px solid #81D2CC; } .field { border-bottom: 1px solid #81D2CC; text-align:left; padding: 2px 5px; } .gbTitle { color: #0C7A6F; font-family: Arial, Helvetica, sans-serif; line-height: 23px; font-size: 14px; text-decoration: none; font-weight: bold; } .gbReplyTd { background:#CEFEFE; } .gbReply { color:#446D8C; background:#CEFEFE; } .userPanel {float:right; margin-right:-30px; margin-top:2px; margin-bottom:80px;} .userPanel a {color:#187773} .userComment { clear:both; position:relative; top:-50px; text-align:center; text-align: center; } .pageSelector { text-align:center; margin: 0 auto; width:680px; height:33px; background:#C0EAE6; } .pageSelectorTop { position: relative; top:-22px; padding-top:5px; padding-left:20px; } .pageSelectorBtm { margin-top:10px; padding-top:5px; padding-left:20px; } .InnerBox input { border: 1px solid gray; padding: 2px; width:95%; } input.radio { border: 0px; width: 5%; } .PrivateMsg { display:block; padding:20px; background: url(http://s.pixfs.net/f.pixnet.net/css/gb/images/permdeny.gif) no-repeat 38% 50%; border: 1px dashed gray; font-size: 14px; color: #187773; font-weight: bold; } .outGB { font-size: 11px; color: #187773; } html{SCROLLBAR-FACE-COLOR:#97E2DC; SCROLLBAR-HIGHLIGHT-COLOR:#FFFFFF; SCROLLBAR-3DLIGHT-COLOR:#FFFFFF; SCROLLBAR-ARROW-COLOR:#FFFFFF; SCROLLBAR-DARKSHADOW-COLOR:#97E2DC;}  

痞客網誌隱藏語法:

/*---------------------------------------------------------------------*/

 除了綠色字之外，其他可直接複製至CSS裡，方便以後更改。：）

#login-bar/*招呼語&登入登出*/
#banner .skiplink/*跳到主文*/
#blog-category/*部落格全站分類*/
.day/*文章日期的週*/
.back-to-top/*回到最上頁*/
.post-info img/*迴響者資訊的圖示*/
.reply-text p/*版主回覆資訊*/
.user-ip/*迴響者IP*/
.img.pixnet-user/*迴響者的PIXNET會員圖示*/
#visitor .box-text .box-more/*誰來我家的所有訪客列表*/
#murmur .box-title/*碎碎唸欄位的標題*/
#murmur .box-more/*碎碎唸欄位的所有歷史碎碎唸*/
#counter .box-title/*參觀人氣欄位的標題*/
#category .box-text .box-more/*文章分類欄位的總開合按鈕*/
#footer #bottom/*頁尾超連結*/　(回到首頁&回到主文&免費註冊&服務中心&痞客邦首頁)
.article-footer/*文章附加資訊*/
.title h2 img/*文章標題的圖示*/
#category .box-more/*文章分類欄位的總開合按鈕*/　(同#category .box-text .box-more)
#recent-article img/*近期文章欄位的圖示*/
#category .box-text h6 img/*文章分類欄位的分類目錄圖示*/
.author span /*單篇文章人氣*/

/*---------------------------------------------------------------------*/

★翔霏作品素材皆取自網路加工 如造成原創不悅請告知  翔霏將立即移除★