NekoFitness Life

 

 ↑ ↑ ↑ ↑ ↑ ↑ 全頁預覽圖 ↑ ↑ ↑ ↑ ↑

因為心情不好，就胡亂改版了。不過成果卻很溫馨！

這個版的素材，幾乎是我上日本素材網東找西找湊出來的，只有css是我原本寫好的改改圖而已，

所以不算是個設計作品，當然朋友們就可以隨意愛改就改！迴響說一聲就好。

此外，也歡迎朋友套用後，或未套用都給予我意見，讓我能夠精益求精喔！謝謝大家^^



內文區645px + 側欄區245px = 全頁版可愛網誌

↓ ↓ ↓ ↓ ↓ 打包↓ ↓ ↓ ↓ ↓
/*-------------- #comment-table --------------*/ #comment-form{widht: 530px; margin: 10px auto; border: none; background: url() no-repeat center; } #comment-form p{display: none; } #comment-form table tr.comment-form-title{display: none; } #comment-form table td{padding: 3px; color: #888; vertical-align: top; border: none; } #comment-form table th{width: 85px; padding: 5px; color: #888; vertical-align: top; border: none; } #comment-form table th font{display: none; } #comment-form table{width: 520px; padding: 5px; margin: 0px auto; border: none; } #comment-form input{border: 1px solid #FBEEEE; border-bottom: 1px solid #aaa; background: none; height: 20px; font: 11px "Century Gothic"; filter: alpha(opacity=70); opacity: 0.7; -moz-opacity: 0.7; } #comment-form textarea{border: 1px solid #aaa; background: none; width: 99%; height: 120px; line-height: 18px; font: 10px "Century Gothic"; filter: alpha(opacity=70); opacity: 0.7; -moz-opacity: 0.7; } #comment-form submit a{padding: 5px; color: #111; font: 11px "Century Gothic"; } /*-------------- reset --------------*/ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } fieldset,img { border: 0; } address,caption,cite,code,dfn,em,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: ''; } abbr,acronym { border: 0; } pre { font-size: 1em; } .article-content { _height: 1%; overflow: hidden; _overflow: none; } /*-------------- 全頁面 --------------*/ html{} body{font-size: 11px; *font-size: 10px; letter-spacing: 1pt; font-family: "Century Gothic"; color: #A6A6A6; background: url(http://p0.p.pixnet.net/albums/userpics/0/8/477908/48d0244097e41.gif) repeat; } #body-div{width: 904px; margin: 0 auto; position: relative; } a{color: #575143; text-decoration: none; } a:hover{color: #555; } br{letter-spacing: 0; } #authority{position: absolute; top: 1px; margin-left: 750px; color: #aaa; } #authority a{margin: 5px; color: #aaa; } #login-bar{position: absolute; top: 1px; margin-left: 5px; color: #aaa; } #login-bar a{color: #aaa; } #container{width: 900px; margin: 0 auto; padding: 15px 10px; background: #FBEEEE; border: 1px solid #eee; } /*-------------- banner --------------*/ #header{background: url(http://p0.p.pixnet.net/albums/userpics/0/8/477908/1190959637.jpg) no-repeat center; } #banner{text-align: left; height: 300px; } #banner h1{*position: relative !important; padding-top: 33px; padding-left: 20px; } #banner h1 a{font: 15px verdana; color: #fff; } #banner h2{text-align: left; margin-top: 180px; margin-left: 20px; line-height: 20px; color: #f0f0f0; font-size: 11px; *font-size: 10px; } #banner h2 a{color: #f0f0f0; } /*-------------- navigation --------------*/ #navigation{position: absolute; top: 285px; margin-left: 20px; } #navigation a{font-size: 11px; *font-size: 10px; color: #f0f0f0; margin: 3px 10px 3px 0px; } #navigation li{float: left; display: inline; } /*-------------- content --------------*/ #content{width: 645px; float: left; margin-top: 20px; line-height: 18px; overflow: hidden; } /*-------------- spotlight --------------*/ #spotlight{margin: 0px 5px 20px 5px; background: #fff; } #spotlight h5{display: none; } #spotlight-text{padding: 2px; line-height: 22px; } #spotlight-text a{color: #ff0000; } /*-------------- article area --------------*/ #article-area{} .article-area-title{margin: 0px 5px; } .article{margin: 0px 0px 30px 0px; padding: 5px; background: #fff; } .article-head{height: 55px; } .publish{display: block; font: 11px Tahoma; text-align: center; color: #999; width: 45px; height: 45px; padding: 2px; text-transform: uppercase; background: #eee; } .month{display: block; } .date{display: block; font-size: 15px; font-weight: bold; } .year{display: block; } .day, .time{display: none; } .title h2{padding: 0px 0px 0px 55px; margin-top: -40px; } .title h2 a{font: 16px "微軟正黑體"; font-weight: bold; color: #7F6862; } .article-body{margin: 3px 2px; } .bookmark{text-align: left; margin: 25px 2px 2px 2px; } .article-content{margin: 15px 2px; line-height: 20px; } .article-content a{text-decoration: underline; } .more{float: right; margin: 10px 0px; } .more a{text-decoration: none; } .forward{padding: 2px; text-align: left; font-size: 11px; *font-size: 10px; } .author{padding: 2px; text-align: left; font-size: 11px; *font-size: 10px; } .refer li{padding: 2px; text-align: left; font-size: 11px; *font-size: 10px; background: #ECDEDE; } .history{padding: 2px; text-align: left; font-size: 11px; *font-size: 10px; background: #ECDEDE; } .refer li:first-child, .back-to-top{display: none; } .article-footer{margin: 3px 2px; } #blog-main .refer, #blog-main .history{display: none;} /*-------------- display --------------*/ #display{text-align: left; margin-bottom: 20px; } #display span{margin: 0px 5px; } #display a{} /*-------------- trackback --------------*/ #user-post{margin-bottom: 30px; } #trackback-box{margin-bottom: 30px; } .user-post-title{padding: 5px; } #trackback-title{} #trackback-text{margin: 8px; } #trackback-url{margin: 8px; } #trackback-input{width: 140px; color: #000; background: #fff; border: 1px solid #fff; color: #5A5A5A; padding: 2px; } .input{width: 40px; color: #000; background: #fff; border: 1px solid #fff; padding: 0px; } #trackback-box .post-text{width: auto; float: none; } .user-post-text{margin: 5px; } /*-------------- comment --------------*/ #user-post{margin-bottom: 30px; } .user-post-title{padding: 5px; } #comment-title{} #comment-text{margin: 5px; } .post-comment a{font: 0pt verdana; color: #fff; display: block; text-indent: -5000px; margin: 10px auto; width: 200px; height: 17px; background: url(http://p0.p.pixnet.net/albums/userpics/0/8/477908/1216889149.png) no-repeat; } .single-post{position: relative; width: 530px; margin: 0px auto 40px auto; overflow: hidden; _overflow: none; _height: 1%; word-break: break-all; } #comment-text .secret{display: none; } .post-info{padding: 5px 0px 5px 0px; background: url(http://p0.p.pixnet.net/albums/userpics/0/8/477908/48d04054d3f52.gif) repeat-x left bottom; color: #9A5555; } .post-info a{color: #9A5555; } .floor{display: none; } .post-photo{position: absolute; top: 40px; left: 5px; } .post-photo img{width: 40px; height: 40px; border: 3px solid #ddd; padding: 1px; background: #fff; } .post-text p{color: #000; padding: 5px 0px; } .post-text{width: 435px; min-height: 60px; padding: 0px 30px 0px 65px; color: #999; line-height: 20px; } .reply-text{clear: both; width: 435px; padding: 10px 30px 0px 65px; line-height: 20px; color: #555; } .reply-text pre{color: #000; font: 11px "Arial"; *font: 10px "Arial"; line-height: 20px; } .reply-text p{text-align: right; padding-top: 10px; color: #aaa; } .reply-text p a{color: #aaa; } .reply-text textarea{display: block; border: 1px solid #eee; width: 99%; height: 70px; line-height: 20px; font: 10px "Arial"; } /*-------------- list --------------*/ .main-list{margin-top: 20px; } .main-list table{width: 98%; margin: 0px auto; } .main-list th{padding: 5px; } .main-list td{padding: 5px; } #murmur-list .list-num{display: none; } #murmur-list .list-date{width: 150px; padding: 5px 0px; margin: 2px; } /*-------------- page --------------*/ .page{margin: 10px 0px; text-align: center; } .page a{font-size: 10px; padding: 1px 2px; margin: 0px 2px; } .page a:hover{color: #000; } .page span{font-weight: bolder; } /*-------------- link側欄 --------------*/ #links{width: 245px; float: right; margin-top: 20px; overflow: hidden; } #links a{color: #a1a1a1; } #links a:hover{color: #555; } /*-------------- 側欄box --------------*/ .box{margin: 5px; margin-bottom: 20px; } .box-title{text-align: center; font-size: 12px; color: #7F6862; height: 18px; padding: 5px 0px; background: url(http://p0.p.pixnet.net/albums/userpics/0/8/477908/48d04053b2f10.gif) no-repeat center bottom; } .box-title:first-letter{} .box-text{margin: 0px 0px 0px 0px; padding: 5px; color: #888; text-align: left; } /*-------------- 側欄連結項目 --------------*/ #recent-article .box-text li, #hot-article .box-text li, #latest-comment .box-text li, #mylink .box-text li, #category .box-text li, #subscription .box-text li{width: 100%; } /*-------------- recent article --------------*/ #recent-article .box-text a, #hot-article .box-text a{display: block; padding: 2px 0px; font-size: 11px; *font-size: 10px; text-align: left; } /*-------------- latest comment & trackback --------------*/ #latest-comment .box-text span{} #latest-comment .box-text li a{font-size: 11px; *font-size: 10px; text-align: left; } #latest-comment .box-text li{padding: 1px 0px 0px 0px; overflow: hidden; font-size: 10px; *font-size: 9px; color: #747C8D; } #latest-comment .box-text a, #latest-trackback .box-text a, #subscription .box-text a{display: block; padding: 2px 0px 0px 0px; font-size: 11px; *font-size: 10px; text-align: left; } #latest-trackback .box-text li, #subscription .box-text li{padding: 2px 0px 0px 0px; font-size: 10px; *font-size: 9px; color: #747C8D; text-align: right; border-bottom: 1px dotted #999; } /*-------------- broadcast --------------*/ #broadcast ul{_height: 1%; overflow: hidden; _overflow: none; padding: 2px; margin-bottom: 2px; } #broadcast .broadcast-photo{display: inline; float: left; padding-right: 5px; } #broadcast .broadcast-photo img{width: 32px; height: 32px; } #broadcast .box-text li.broadcast-time a{color: #747C8D; font-size: 10px; } .broadcast-time{display: block; padding-top: 2px; margin-left: 5px; } .broadcast-text{height: 13px; overflow: hidden; padding: 1px; color: #999; font-size: 11px; *font-size: 10px; margin-left: 5px; } /*-------------- headshot --------------*/ #headshot-img{width: 90px; height: 90px; float: left; text-align: center; padding: 2px; border: 1px solid #8F9398; margin: 0px 10px 0px 0px; background: #fff; } #headshot .box-text{_height: 1%; overflow: hidden; _overflow: none; } #headshot a{display: block; border: 0; padding: 5px; } /*-------------- visitor & crumb --------------*/ #visitor .box-title{} #visitor .box-text{} #visitor ul, #crumb ul{_height: 1%; overflow: hidden; _overflow: none; } #visitor li, #crumb li{float: left; } #visitor .box-text li a img, #crumb .box-text li a img{height: 32px; width: 32px; margin: 2px; filter: alpha(opacity=30); opacity: 0.3; -moz-opacity: 0.3; } #visitor .box-text li a:hover img, #crumb .box-text li a:hover img{filter: alpha(opacity=100); opacity: 1; -moz-opacity: 1; } /*-------------- calendar --------------*/ #calendar{} #calendar .box-text{} #calendar table{width: 90%; margin: 0px auto; text-align: center; line-height: 190%; } #calendar .Month-Nav{text-align: right; } #calendar .current-month{text-align: center; } #calendar .cal-forward{text-align: right; } #calendar .weekday th, #calendar.col-abbr{text-align: center; } #calender th, #calendar td{} #calendar td a{display: block; background: url(http://p0.p.pixnet.net/albums/userpics/0/8/477908/48d044cf81fab.gif) no-repeat center; margin: 1px; } #calendar td a:hover{display: block; color: #999; } /*-------------- mylink --------------*/ #mylink .box-text h6{padding: 2px 0px; color: #8F9398; font-weight: bold; } #mylink .box-text a{display: block; padding: 2px 0px; } /*-------------- category --------------*/ #category .box-text h6{padding: 2px 0px; color: #8F9398; } #category .box-text a{display: block; padding: 2px 0px; } /*-------------- search --------------*/ input#search-target{text-align: center; width: 200px; height: 17px; color: #000; background: #fff; border: 1px solid #8F9398; color: #5A5A5A; padding: 2px; } input#search-submit{width: 206px; color: #000; font-size: 11px; background: #fff; border: 1px solid #8F9398; padding: 2px; margin-top: 4px; } #search li{text-align: center; } /*-------------- archive --------------*/ #archive .box-text select{width: 200px; font-size: 11px; *font-size: 10px; } #archive .box-more{margin-top: 10px; text-align: right; } /*-------------- murmur --------------*/ .murmur-time{margin-bottom: 10px; font-size: 11px; *font-size: 10px; } #murmur .box-more{margin-top: 10px; text-align: right; font-size: 11px; *font-size: 10px; } .murmur-text{line-height: 18px; font-size: 11px; *font-size: 10px; } /*-------------- favorite --------------*/ #favorite .box-text select{width: 200px; font-size: 11px; *font-size: 10px; } /*-------------- counter --------------*/ #counter .box-text li{font-size: 11px; *font-size: 10px; } /*-------------- folder --------------*/ #feed .box-text, #powered .box-text{text-align: center; } /*-------------- footer --------------*/ #footer{clear: both; text-align: center; padding: 10px 0px 0px 0px; color: #f0f0f0; font-size: 11px; *font-size: 10px; } #footer p, #bottom{text-align: center; padding: 2px 0px 5px 0px; color: #f0f0f0; font-size: 11px; *font-size: 10px; background: #D9CBCB; } /*-------------- 隱藏項目 --------------*/ #banner .skiplink, #blog-category, #category .box-more img, #category .box-text.box-more, #visitor .box-more a, #crumb .box-more a, #latest-comment .box-text img, #hot-article .box-text img, #recent-article .box-text img{display: none; }


因為目前家裡的IP分享器壞了，所以家裡的5台電腦是“輪流”上網的克難方式。

所以有問題的朋友，就請大家要有耐心等候，阿Q一上線都會即時回答！



 想要改banner圖，請找#header{}裡的background

 想要改全頁背景圖，請找body{}裡的background

 想改網誌區塊的底色，請找#container的background色碼去調整

 想改迴響版面，請找#comment-table

其他問題，請迴響發問囉！

最後，謝謝大家^^