非學不可

css樣式痞客版型分享 【zen】木質生活。css樣式痞客版型分享css樣式痞客版型分享css樣式痞客版型分享css樣式痞客版型分享css樣式痞客版型分享

(↑預覽圖)

已上架於痞客樣式選擇的"其它"分類第一個，可以直接去後台套用!!!

歡迎打包版型套用，也可以任意修改自己使用，但請勿二次修改後分享謝謝。

這個版型很適合以文章為主的部落格，不會有大量的圖片搶走文字的焦點。

<<css語法>>

複製後進入樣式設計精靈編輯css原始碼中，全部貼上就可以了。

/* -- reset.css -------------------------------------- */ 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; } .article-content p {margin-bottom: 1em; } br{letter-spacing: normal;} a{text-decoration: none;color:#8e5134;} a:hover{color:#ffffff;} body{ font-size:12px; font-family: arial; background:url(http://pic.pimg.tw/sophieyjl/4b5717e395707.jpg); letter-spacing:0.05em; color:#8e5134; line-height:150%; } #body-div{ } #authority{ line-height: 12px; text-align: center; background:none; border:0px ; } #authority a{margin: 0px 5px; color:#fff;} #authority a:hover{color:#3366ff;} #container{ width: 75%; background:url(http://pic.pimg.tw/sophieyjl/4b5717e50b06f.jpg) ; } #container2{ width: 850px; border-left:1px solid #8e5134; border-right:1px solid #8e5134; margin: 0 auto; position:relative; } /*------------------------------------------------------------header*/ #header{ background: url(images/top.png) left top no-repeat; height: 150px; margin-bottom: 10px; margin-top: 30px; position:relative; } #login-bar{ position: absolute; right:0; top: -30px; color:#fff; font-size:12px; } #login-bar a{color:#fff;} #login-bar a:hover{color:#333;} #banner{ height: 20px; overflow: hidden; padding-top: 80px; } #banner h1{ position:absolute; left:20px; top:38px; font-size: 28px; font-family: Simhei; letter-spacing: -2px; } #banner h1 a{color:#fff;} #banner h1 a:hover{color:#8e5134;} #banner h2{ position:absolute; left:22px; font-size: 12px; color:#7e2323; line-height: 0px; } #banner p{ display: none; } #navigation{ background:url(http://pic.pimg.tw/sophieyjl/4b57cc972101b.jpg?v=1264045207) left top ; position:absolute; top:0px; height: 20px; width: 850px; } #navigation li{ position:absolute; top:0; height: 20px; } #navigation li a{ display:block; width:100%; height:100%; font-size:0; text-indent: -5000px; } #navigation #link-blog{width: 98px;} #navigation #link-album{left: 98px;width: 53px;} #navigation #link-guestbook{left: 151px;width: 70px;} #navigation #link-profile{left: 221px;width: 60px;} #navigation li a:hover{ filter:alpha(opacity=40);opacity: 0.4; } #content{ float: left; width: 595px; padding: 10px 15px; overflow:hidden; background:none; } /*------------------------------------------------------------spotlight*/ #spotlight{ position:absolute; top:90px; margin: 10px 0; padding: 10px; border-top: 1px solid #8e5134; border-bottom: 1px solid #8e5134; _height:1%; } #spotlight h5{ font-weight: bold; font-size:12px; letter-spacing: 0; color:#8e5134; } .article-area-title, #display{} /*------------------------------------------------------------article*/ #article-box{ } .article{ margin: 20px 0; } .article-head{ padding:5px; height:38px; margin-bottom: 10px; border-left:15px solid #8e5134; overflow: hidden; _overflow: none; _height:1%; } .publish{ float: left; width: 120px; color:#fff; text-transform: uppercase; font: 10px Century Gothic; background: none; text-align: center; letter-spacing:0; line-height:12px; height: 20px; padding-top: 3px; } .title{ float: right; width: 570px; line-height: 10px; } .title a{ font-size:18px; font-family: Simhei; color:#8e5134; letter-spacing:-1px; } .title a:hover{color:#FFFFFF;} .title img{display:none;} .article-body{ margin: 10px 0; line-height: 20px; padding-bottom: 10px; border-bottom:1px dashed #8e5134; } .bookmark, .author{color:#666;} .author a{color:#8e5134;} .forward{ text-align: right; font-size:11px; *font-size:10px; line-height: 18px; } .forward a{ color:#8e5134;} .bookmark img{ width: 12px; height: 12px; } .article-footer{ margin: 10px 0 10px 0px; line-height: 18px; color:#666; } .article-footer a{color:#8e5134;} .article-footer a:hover{color:#fff;} .back-to-top{ text-align: right; text-transform: uppercase; font: 9px Tahoma; } .back-to-top a{border:1px solid #eee;} .back-to-top a:hover{border:1px solid #ccc;} /*------------------------------------------------------------list table*/ .main-list{} .main-list table{ width: 100%; margin-bottom: 20px; } .main-list table th{ color:#fff; background:#aac5cb; padding-left:5px; border-right: 1px solid #fff; line-height: 23px; } .main-list table .list-num{display: none;} .main-list table .list-date{width: 100px;} #murmur-list .list-date{width: 130px;} .main-list table td{ border-bottom: 1px solid #eee; font-size:11px; *font-size:10px; color:#aaa; padding: 2px 0 2px 5px; letter-spacing:0; line-height: 23px; } .main-list table td a{color:#666;} .main-list table td a:hover{color:#999;} /*------------------------------------------------------------post*/ .post-comment{ width: 170px; height: 30px; margin: 10px 0 20px 370px; font-size:0; text-indent: -5000px; } .post-comment a{ display: block; width: 100%; height: 100%; } .post-comment a:hover{ background:#fff; filter:alpha(opacity=30);opacity: 0.3; } /*------------------------------------------------------------comment*/ .user-post-title{ height: 24px; font-size: 15px; line-height: 24px; padding-left: 10px; margin: 10px 0px 10px 0px; font-weight: bold; color:#ffffff; background:#8e5134; *padding-top: 5px; } .user-post-box{ width: 585px; margin:10px auto; } .single-post{ margin-bottom: 10px; overflow: hidden; _overflow: none; _height: 1%; line-height: 18px; letter-spacing:0; width:585px; background:#ddd; font-size:11px; *font-size: 10px; } .single-post a{color:#41aac0;} .post-info{ color:#41aac0; padding-top:10px; padding-left: 95px; } .post-photo{ float: left; width: 80px; text-align:right; position:relative; top:-15px; } .post-photo img{ width: 60px; height: 60px; padding:2px; border: 1px solid #ccc; background:#fff; } .post-text{ float: right; width: 480px; color:#555; padding: 5px 10px 5px 10px; } .reply-text{ clear:both; padding: 5px 10px 5px 10px; margin-top: 10px; border-top: 1px dashed #fff; background:#eee; _height:1%; } .reply-text p{display: none;} .secret{ background:#aaa; padding:0; } .secret .post-text{ float: none; color:#fff; } /*------------------------------------------------------------trackback*/ #trackback-box #trackback-url{ margin: 15px 0; } #trackback-box #trackback-url input{ background:#fafafa; border: 1px solid #ccc; margin-right: 5px; width: 80px; color:#aaa; padding: 3px; *padding: 2px 3px 0; } #trackback-box #trackback-url input#trackback-input{ width: 350px !important; padding: 5px 5px; font: 9px Tahoma; letter-spacing: 1px; color:#666; } #trackback-box .single-post .post-info, #trackback-box .single-post .post-text{ float: none !important; padding-left:10px; } #trackback-box .single-post .post-text p a{ color:#333;} /*------------------------------------------------------------comment form*/ #comment-form{ margin: 10px 0px; border: 1px solid #8e5134;border-left: 10px solid #8e5134;} #comment-form p{ margin:0px 10px 10px 10px; padding: 10px 0px; color:#666; text-align: right;} #comment-form table{ border: 0; width: 95%; } #comment-form td , #comment-form th{ border: 0; padding: 3px 5px;} #comment-form th{ width: 70px; vertical-align: top; text-align: right; color:#666; } #comment-form th font, .comment-form-title{ display: none;} #comment-form input { padding: 1px 5px; font-family: arial; font-size: 11px; *font-size: 10px; color: #666; border: none; width: 90%; background: none; border-bottom: 1px solid #ddd; } #comment-form input.radio { border: none; width: auto; background: none;margin:0; padding:0; } input#blogcommenttext_name{ width: 86.5%; *width:85.5%; } #comment-form td textarea{ width: 90%; height: 100px; border: 1px solid #ccc; padding: 5px; color:#666; height: 100px; font: 11px arial; *font: 10px arial; } input#send-comment { font-family: Arial; font-size: 11px; *font-size: 10px; color: #fff; background: #999; border: 0; width: 50px !important; height: 20px; line-height: 20px; margin: 10px 0; } /*------------------------------------------------------------pages*/ .page{ margin: 10px 20px; font-size:11px; font-family: Arial; } .page a{ margin: 0 5px; color:#333; } .page span{ background:#eee; padding: 0 3px } /*------------------------------------------------------------links*/ #links{ width: 200px; float: right; } .box{ width: 180px; overflow:hidden; margin:0px auto 20px; } .box-title{ font-family: Simsun; font-size:14px; letter-spacing:-1px; line-height:30px; color:#FFFFFF; background:url(http://pic.pimg.tw/sophieyjl/4b5718382c448.jpg); padding:0 13px; margin-bottom: 5px; } .box-text{ line-height: 18px; color:#8e5134; } .box-text a{color:#000;} .box-text a:hover{color:#eee;} .box-more{ text-align: right; margin: 5px 0; } .box-more a{ text-align: right; background:#fefbc5; border-right:1px solid #c4b06c; border-bottom: 1px solid #c4b06c; padding: 2px 5px; color:#84690c; } /*------------------------------------------------------------ 以下為links各欄位設定 ---------------------------------------------------------------*/ #visitor ul,#crumb ul{ overflow: hidden; _overflow: none; _height: 1%; } #visitor li,#crumb li{ float: left; line-height:0; margin: 0 2px 2px 0; } #visitor li img,#crumb li img{ width: 50px; height: 50px; } #broadcast ul{ overflow: hidden; _overflow: none; _height: 1%; margin-bottom: 5px; } .broadcast-photo{ float: left; } .broadcast-time, .broadcast-text{ float: right; width: 165px; color:#b5d9e1; } .broadcast-time{font-size:11px;} .broadcast-time a{color:#fff;} #latest-comment li, #subscription li, #latest-trackback li{ margin-bottom:3px; color:#8e5134; } #latest-comment li a, #subscription li a, #latest-trackback li a{ display: block; } #headshot ul{ overflow:hidden; _overflow:none; _height:1%; } #headshot li{ float: right; width: 120px; } #headshot li#headshot-img{ float: left; width: 90px; } #search input{ width: 200px; margin-bottom:2px; border: 1px solid #ccc; padding: 2px; } #search-submit{ width:206px!important; background:#eee; color:#666; border-right:1px solid #ccc; border-bottom:1px solid #ccc; } #calendar table{ width: 90%; margin: 10px auto; } #calendar table th{ text-align: center; } #calendar table td{ text-align: center; font: 10px arial; line-height: 20px; border: 1px solid #8e5134; color:#333; } #calendar table td a{ color:#fff; display: block; background:#8e5134; font-weight: bold; font-size:11px; } /*------------------------------------------------------------footer*/ #footer{ background:#8e5134; text-align:center; clear: both; padding: 0px 0; _height: 1%; } #footer a{color:#ccc;} #footer a:hover{color:#fff;}</p>

如果套用版型後有任何問題，請留言告訴我謝謝^^  我會盡量修改完整

這個只有痞客邦能用唷，無法套用到其它的部落格當中。

ps.支援IE8、火狐FIREFOX和google的瀏覽器，用ie8以下的版本和Maxthon會有不可預期的位移。

套用版型的格友們~也留個言讓我知道唷^^