NekoFitness Life

 

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

好久以前發送過的版本，後台的早就被我下架了，

因為網友問我要，所以我改了一些拿出來分享！

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

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



內文區660px + 側欄區235px = 全頁版清新網誌

↓ ↓ ↓ ↓ ↓ 打包↓ ↓ ↓ ↓ ↓
/*-------------- 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; letter-spacing: 1px; font-family: "Arial"; color: #888; background: #d4d4d4; } #body-div{width: 1000px; position: relative; } a{color: #737373; text-decoration: none; } a:hover{color: #999; } br{letter-spacing: 0; } #authority{position: absolute; top: 2px; right: 2px; color: #000; } #authority a{margin: 5px; color: #000; } #authority a:hover{color: #999; } #login-bar{position: absolute; top: 2px ; left: 2px; color: #000; } #login-bar a{color: #000; } #login-bar a:hover{color: #999; } #container{width: 1000px; background: url(http://p0.p.pixnet.net/albums/userpics/0/8/477908/1200494689.jpg) repeat-y right top; } /*-------------- banner --------------*/ #header{background: url(http://p0.p.pixnet.net/albums/userpics/0/8/477908/1201069773.jpg) no-repeat -20px 0px; } #banner{text-align: left; height: 340px; } #banner h1{*position: relative !important; padding-top: 80px; padding-left: 400px; } #banner h1 a{font-size: 22px; font-weight: bold; color: #333; } #banner h2{text-align: left; width: 500px; margin-top: 15px; margin-left: 400px; line-height: 220%; color: #999; font-size: 12px; } #banner h2 a{text-decoration: underline; } /*-------------- navigation --------------*/ #navigation{position: absolute; top: 295px; left: 498px; } #navigation a{vertical-align: bottom; color: #aaa; font-size: 12px; padding: 2px 10px; } #navigation li{float: left; display: inline; } #navigation a:hover{color: #222; } /*-------------- content --------------*/ #content{width: 660px; padding: 15px 0px 0px 0px; float: left; margin-left: 27px!important; margin-left: 12px; line-height: 20px; overflow: hidden; border-top: 1px solid #ddd; } /*-------------- spotlight --------------*/ #spotlight{margin: 0px 0px 25px 0px; border-bottom: 1px dashed #ddd; } #spotlight h5{display: none; } #spotlight-text{padding: 5px; } #spotlight-text a{text-decoration: underline; } /*-------------- article area --------------*/ #article-area{} .article-area-title{margin: 0px 5px; } .article{margin: 0px 0px 25px 0px; border-bottom: 1px dashed #ddd; } .article-head{height: 45px; background: url(http://p0.p.pixnet.net/albums/userpics/0/8/477908/49c86d61adf5e.jpg) no-repeat 0px 3px; *background: url(http://p0.p.pixnet.net/albums/userpics/0/8/477908/49c86d61adf5e.jpg) no-repeat 0px 7px; } .publish{font: 12px "Tw Cen MT"; text-align: left; color: #aaa; padding: 0px 0px 1px 42px; *padding: 0px 0px 0px 42px; } .title h2{padding: 1px 0px 0px 42px; *padding: 1px 0px 1px 42px; } .title h2 a{font: 17px "微軟正黑體"; color: #555; font-weight: bold; } .article-body{margin: 3px 0px; } .bookmark{text-align: right; margin: 10px 0px 10px 2px; } .article-content{margin: 25px 0px; line-height: 180%; font-size: 13px; } .article-content p{margin: 0px 0px 15px 0px; } .article-content a{text-decoration: underline; } .more{float: right; margin: 5px 0px; } .more a{text-decoration: none; } .article-footer{margin: 2px 0px; } .forward{padding: 2px 0px; text-align: left; font-size: 11px; } .author{padding: 2px 0px; text-align: left; font-size: 11px; } .refer{padding: 2px 0px; text-align: left; font-size: 11px; } .history{padding: 2px 0px; text-align: left; font-size: 11px; } .back-to-top{clear: both; text-align: right; padding: 0px; } #blog-main .history{display: none;} /*-------------- display --------------*/ #display{text-align: left; margin-bottom: 20px; } #display span{margin: 0px 5px; } #display a{} /*-------------- trackback --------------*/ #user-post{} #trackback-box{margin-bottom: 25px; } #trackback-title{} #trackback-text{margin: 5px; display: none; } #trackback-url{margin: 5px 0px 5px 20px; } #trackback-input{width: 420px!important; color: #999; } #trackback-url input{} #trackback-box .post-text{width: auto; float: none; } .user-post-text{margin: 5px; } /*-------------- comment --------------*/ .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: 5px auto; width: 270px; height: 85px; background: #fff url(http://p0.p.pixnet.net/albums/userpics/0/8/477908/49c86e66154a2.png) no-repeat; } .single-post{position: relative; width: 620px; margin: 60px auto; padding: 0px 0px 5px 0px; overflow: hidden; _overflow: none; _height: 1%; word-break: break-all; border-bottom: 1px dotted #ddd; } #comment-text .secret{display: none; } .post-info{float: right; width: 480px; padding: 4px 5px 4px 35px; color: #eee; background: url(http://p0.p.pixnet.net/albums/userpics/0/8/477908/normal_49a6becb79cda.png) no-repeat left center; font-size: 11px; *font-size: 10px; } .post-info a{color: #eee; } .post-info img{width: 10px; height: 10px; } .post-photo{float: left; width: 70px; margin: 5px; } .post-photo img{width: 60px; height: 60px; background: #fff; border: 2px solid #ddd; } .post-text p{color: #000; font-weight: bold; padding: 2px 5px; } .post-text{float: right; width: 510px; padding: 2px 5px; color: #999; line-height: 17px; } .reply-text{float: right; width: 455px; padding: 2px 5px 2px 60px; line-height: 17px; color: #1C1312; background: #fff url(http://p0.p.pixnet.net/albums/userpics/0/8/477908/49acd24de550d.png) no-repeat 0px 2px; } .reply-text p{text-align: right; padding-top: 10px; color: #999; font-size: 10px; } .reply-text p a{color: #999; } .reply-text p img{width: 10px; height: 10px; } .reply-text pre{color: #111; font: 11px "Arial"; line-height: 20px; } .reply-text textarea{display: block; border: 1px solid #eee; width: 99%; height: 50px; padding: 4px; line-height: 20px; font: 11px "Arial"; } /*-------------- #comment-table --------------*/ #comment-form{width: 616px; padding: 2px 2px 2px 2px; margin: 30px auto; border: none; background: none; } #comment-form p{display: none; } #comment-form table tr.comment-form-title{display: none; } #comment-form table td{padding: 2px; color: #000; vertical-align: top; border: none; line-height: 25px; } #comment-form table th{width: 90px; padding: 5px; color: #333; vertical-align: top; border: none; } #comment-form table th font{display: none; } #comment-form table{width: 616px; margin: 0px auto; border: none; } #comment-form input{border: none; border-bottom: 1px solid #ddd; background: none; height: 20px; font: 11px "Arial"; filter: alpha(opacity=70); opacity: 0.7; -moz-opacity: 0.7; } #comment-form textarea{width: 97%; height: 120px; padding: 5px; border: 1px solid #ddd; background: #fff; line-height: 18px; font: 11px "Arial"; filter: alpha(opacity=70); opacity: 0.7; -moz-opacity: 0.7; } #comment-form submit a{padding: 5px; color: #555; font: 11px "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: 235px; float: right; margin-right: 35px!important; margin-right: 17px; overflow: hidden; } #links a{color: #777; } #links a:hover{color: #eee; } /*-------------- 側欄box --------------*/ .box{margin-bottom: 20px; } .box-title{text-align: left; font: 13px "Verdana"; font-weight: bold; text-transform: uppercase; color: #333; padding: 3px 0px 3px 0px; } .box-text{padding: 8px 4px; text-align: left; color: #999A9F; line-height: 18px; } /*-------------- 側欄連結項目 --------------*/ #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: 1px 0px; *line-height: 19px; } /*-------------- latest comment & trackback --------------*/ #latest-comment span{font-size: 10px; color: #536281; } #latest-comment .box-text li{padding: 1px 0px 0px 0px; overflow: hidden; color: #999A9F; font-size: 11px; *font-size: 10px; } #latest-comment .box-text a{display: block; padding: 1px 0px; font: 11px "Arial"; } /*-------------- latest trackback --------------*/ #latest-trackback .box-text li{padding: 1px 0px 0px 0px; color: #999A9F; text-align: right; font-size: 11px; *font-size: 10px; } #latest-trackback .box-text a{display: block; padding: 1px 0px; text-align: left; font: 11px "Arial"; } /*-------------- subscription --------------*/ #subscription .box-text a{display: block; padding: 1px 0px; text-align: left; font: 11px "Arial"; } #subscription .box-text li{padding: 1px 0px; color: #999A9F; text-align: right; font-size: 11px; *font-size: 10px; } /*-------------- broadcast --------------*/ #broadcast ul{_height: 1%; overflow: hidden; _overflow: none; padding: 1px; } #broadcast .broadcast-photo{display: inline; float: left; padding-right: 5px; } #broadcast .broadcast-photo img{width: 35px; height: 35px; } #broadcast .box-text li.broadcast-time a{color: #999A9F; padding: 1px; } .broadcast-time{display: block; margin-left: 5px; font-size: 11px; *font-size: 10px; } .broadcast-text{height: 17px; overflow: hidden; padding: 1px; color: #888; margin-left: 5px; } /*-------------- headshot --------------*/ #headshot-img{width: 100px; height: 100px; float: left; text-align: center; margin: 0px 5px 0px 0px; } #headshot .box-text{_height: 1%; overflow: hidden; _overflow: none; } #headshot a{display: block; border: 0; padding: 0px 5px 5px 5px; } /*-------------- visitor & crumb --------------*/ #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: 31px; width: 31px; margin: 1px 3px; } #visitor .box-text li a:hover img, #crumb .box-text li a:hover img{} /*-------------- 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; color: #bbb; margin: 1px; background: #777; } #calendar td a:hover{display: block; background: #eee; color: #666; } /*-------------- mylink --------------*/ #mylink .box-text h6{padding: 1px 0px 1px 15px; background: url(http://p0.p.pixnet.net/albums/userpics/0/8/477908/1192433724.gif) no-repeat left center; } #mylink .box-text a{display: block; padding: 1px 0px 1px 0px; font-size: 11px; *font-size: 10px; } #mylink .box-text ul{border-bottom: 1px dashed #ddd; } /*-------------- category --------------*/ #category .box-text h6{padding: 1px 0px; color: #111; } #category .box-text a{display: block; padding: 1px 0px; } #category .box-more{text-align: right; display: none; } /*-------------- search --------------*/ input#search-target{text-align: left; width: 160px; height: 17px; color: #000; background: #fff; border: none; border: 1px solid #ddd; color: #888; padding: 1px; } input#search-submit{border: 1px solid #ddd; background: #444; padding: 2px; color: #fff; font: 10px "Arial"; } #search li{display: inline; text-align: center; } /*-------------- archive --------------*/ #archive .box-text select{width: 200px; } #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; } /*-------------- favorite --------------*/ #favorite .box-text select{width: 200px; } /*-------------- counter --------------*/ #counter .box-text li{} /*-------------- folder --------------*/ #box413397 .box-text{text-align: right; } #box361163 .box-text, #box362689 .box-text{line-height: 21px; } /*-------------- footer --------------*/ #footer{clear: both; text-align: left; padding: 30px 0px 0px 10px; color: #aaa; font-size: 11px; } #footer p, #bottom{text-align: left; padding: 0px 0px 5px 10px; color: #aaa; font-size: 11px; } /*-------------- 隱藏項目 --------------*/ #banner .skiplink, #blog-category, #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; }




 不喜歡雪人，想要改banner圖，請找#header{}裡的background

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

最後，謝謝大家^^