分享 | 痞客邦PIXNET部落格版面樣式CSS – 小清新 (三色)

每次幫版面取名都想好久，最後決定了 “小清新”，這次分享的圖文部落格與非圖文部落格都很適合喔！雖然版面非常簡單，但簡單的東西反而是最耐看的。採兩欄式版面，左方為部落格標題、公告區塊、側欄和頁尾，右方是文章區塊，點擊文章區塊即可進入該篇文章。

‌

版型

‌

使用規定

幫本站兩個粉絲團按讚，Dribs & Drabs / Dribs & Drabs Designs。
禁止刪除或修改版型的版權宣告。
禁止複製部分語法，套用至非本站分享的版面。
本站分享的部落格樣式，可自行修改美化，勿再次發佈與替其他部落格修改。
套用發生問題請先看過版面設定和Q&A。
勿當伸手牌，版主沒有時間處理這類的問題。
此版型不再維護，若想要更專業的版型請參考半客製化服務內容。

‌

CSS語法

對著文字框按右鍵可以全選，複製貼上至管理後台”自訂樣式”->”CSS原始碼編輯”

‌

嫩芽綠

/* CSS desinged by Wei @ Dribs & Drabs, http://dribs-drabs.com/ 色碼: #82ae46(綠)、#cee4ae(淺綠)、#726d40(咖啡) */ /* —————————————————————————————————————————— 清空 */ #comment-form table{ margin: 0 auto ; } #comment-form td , #comment-form th{ border: 0px solid #000 ; padding: 0px 0px; } #comment-form input#send-comment{ padding: 0px 0px ; } 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; } .main-container{padding-top: 0px !important;} .navbar{display:none !important;} /* —————————————————————————————————————————— 部落格前置設定 */ body{ font-size: 11pt ; font-family:”Arial” ; background: #cee4ae; min-width: 1100px; } a{ color:#000000; text-decoration:none ; } a:hover{ text-decoration:none ; } textarea{ font-size: 10pt; } /* —————————————————————————————————————————— 部落格資訊 */ #container{ width: 1000px; margin: 0 auto; position: relative; } #header{ width: 275px; } #header:after{ content: ” “; height: 60px; display: block; background: url(http://pic.pimg.tw/weilife/1417766263-147680851.png) center left repeat-x; } #banner{ padding-top: 20px; } #banner h1 a{ color: #82ae46; font-weight: bold; font-size: 15pt; } #banner h1{ line-height: 300%; } #banner h2{ line-height: 170%; font-size: 9pt; } #navigation{ position: fixed; top: 35px; left: 50%; margin-left: 530px; z-index: 10; } #navigation a{ font-size: 0px; display: block; color: #82ae46; transform-origin:left top; transform:rotate(90deg); } #navigation a:hover{ color: #726d40; } #navigation a:before{ font-size: 10pt; display: block; } #navigation #link-album a:before{ content: “*Album”; height: 60px; } #navigation #link-blog a:before{ content: “*Blog”; height: 53px; } #navigation #link-guestbook a:before{ content: “*Guestbook”; height: 90px; } #navigation #link-profile a:before{ content: “*Profile”; height: 60px; } .skiplink{display: none;} #blog-category{display: none;} /* —————————————————————————————————————————— 公告區塊 */ #spotlight{ width: 275px; } #spotlight:after{ content: ” “; height: 60px; display: block; } #spotlight h5{ color: #82ae46; font-weight: bold; font-size: 11pt; line-height: 300%; } #spotlight h5:before{ content: “▩”; padding-right: 10px; } #spotlight-text{ line-height: 170%; font-size: 9pt; } /* —————————————————————————————————————————— 文章內容 */ #article-area{ width: 700px; position: absolute; top: 0px; right: 0px; background: #ffffff; } .article{ position: relative; padding: 50px; border-bottom: 1px dotted #82ae46; } .article .article-head{ padding-bottom: 15px; position: relative; } .article .article-head .publish{ padding: 2px 8px; color: #ffffff; display: inline-block; text-align: center; line-height: 150%; vertical-align: top; margin-right: 7px; background: #82ae46; border-radius: 8px; } .article .article-head .publish .time{display: none;} .article .article-head .publish .day{display: none;} .article .article-head .publish .year{display: block;} .article .article-head .title{ display: inline-block; line-height: 130%; font-size: 11pt; position: absolute; top: 0px; left: 75px; height: 50px; } .article .article-head .title a{ font-weight: bold; } .article .article-body{ line-height: 200%; } .article .article-content a{ color: #82ae46; } .article .article-content img{ max-width: 100%; } .article .article-content .more a{ font-size: 0px; display: block; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; z-index: 11; } .article:hover .article-content .more:before{ letter-spacing: 2px; text-align: center; width: 120px; height: 30px; line-height: 30px; content: “Read more…”; color: #ffffff; background: #82ae46; font-size: 10pt; position: absolute; top: 50%; right: -120px; margin-top: -90px; transform-origin:left bottom; transform:rotate(90deg); border-top-left-radius: 5px; border-top-right-radius: 5px; } .bookmark{ position: absolute; top: 20px; right: 10px; } .article .article-footer{display: none;} .article .article-body .author{display: none;} .article .article-keyword{display: none;} .article .pix-related-post{display: none;} .article #pixblogad{display: none;} .page{ padding: 40px 0px; text-align: center; } .page a{ color: #82ae46; padding: 0px 3px; } .page a:hover{ color: #726d40; } .page span{ padding: 0px 3px; } /*————————————-*/ #article-main .article-content{ padding-bottom: 30px; } #article-main .author:before{ content: “▸”; color: #82ae46; padding-right: 5px; } #article-main .author{ display: block; position: relative; top: 25px; left: -50px; width: 600px; padding: 50px 50px 0px 50px; border-top: 1px dotted #82ae46; } #article-main .author a:hover{ color: #82ae46; } #article-main .article-footer{ display: block; line-height: 200%; } #article-main .article-footer a:hover{ color: #82ae46; } #article-main .article-footer li:before{ content: “▸”; color: #82ae46; padding-right: 5px; } #article-main .article-footer .back-to-top{ display: none; } /* —————————————————————————————————————————— 文章分類 */ .article-area-title{ padding: 20px 0px 5px 0px ; text-align: center; color: #82ae46; font-size: 13pt; font-weight: bold; } #display{ text-align: center; padding: 10px 0px 20px 0px; border-bottom: 1px #82ae46 dotted; } #display a:hover{ color: #82ae46; } .main-list{ padding: 50px 50px; } .main-list table{ width: 100%; } .main-list table tr{ border-bottom: 1px dotted #aaa; } .main-list table tr:hover{ background: #eee; } .main-list table th{ padding: 8px 5px; } .main-list table td{ padding: 8px 5px; } /* —————————————————————————————————————————— 側欄 */ #links{ width: 275px; } #links-row-1{display: none;} .box{ } .box:after{ content: ” “; height: 60px; display: block; /*background: url(http://pic.pimg.tw/weilife/1417766263-147680851.png) center left repeat-x;*/ } .box-title{ color: #82ae46; font-weight: bold; font-size: 11pt; line-height: 250%; } .box-title:before{ content: “▩”; padding-right: 10px; } .box-text{ line-height: 200%; padding-top: 10px; font-size: 9pt; } /*—————————————-文章分類*/ #category{ position: relative; } #category .box-more{ text-align: right; position: absolute; top: 10px; right: 10px; } #category h6 img{ padding-right: 10px; } #category .inner-box ul{ padding-left: 20px; } #category .inner-box ul li:before{ content: “├”; padding-right: 10px; color: #82ae46; display: inline-block; } /*—————————————-個人資訊*/ #user-info .box-text{ padding: 10px 0px 0px 0px; } #user-info .box-text .user-img{ padding-bottom: 15px; } /*—————————————-日曆*/ #calendar table{ width: 100%; } #calendar th, #calendar td{ text-align:center; } #calendar td a{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background:#82ae46; color:#ffffff; display:block; } #calendar td a:hover{ position: relative; top: 1px; left: 1px; } /*—————————————-近期文章與熱門文章有圖示時*/ .d_thum{ width: 60px !important; } .d_txt_link{ width: 190px !important; } /*—————————————-近期文章*/ #recent-article li{ line-height: 200%; padding-bottom: 2px; padding-left: 15px; position: relative; } #recent-article li:hover a{ color: #82ae46; } #recent-article li a:before{ position: absolute; top: 0px; left: 0px; content: “▸”; color: #82ae46; } /*—————————————-熱門文章*/ #hot-article li{ line-height: 200%; padding-bottom: 2px; padding-left: 15px; position: relative; } #hot-article li:hover a{ color: #82ae46; } #hot-article li a:before{ position: absolute; top: 0px; left: 0px; content: “▸”; color: #82ae46; } /*—————————————-最新留言*/ #latest-comment li{ line-height: 200%; padding-bottom: 2px; padding-left: 15px; position: relative; } #latest-comment li:before{ position: absolute; top: 0px; left: 0px; content: “▸”; color: #82ae46; } #latest-comment li a:hover{ color: #82ae46; } /*—————————————-自訂連結*/ #mylink li:before{ content: “▸”; color: #82ae46; padding-right: 10px; } #mylink li a:hover{ color: #82ae46; } /*—————————————-文章彙整*/ #archive .box-text select{ display: inline-block; } #archive .box-text .box-more{ display: inline-block; padding-left: 20px; } #archive .box-text .box-more:hover a{ color: #82ae46; } /*—————————————-文章搜尋*/ #search li{ display: inline-block; } #search #search-target{ width: 210px; border: 0px; } #search #search-submit{ background: transparent; border: 0px; padding-left: 10px; } #search #search-submit:hover{ color: #82ae46; } /*—————————————-我去誰家*/ #crumb li{ display: inline-block; padding: 1px; } #crumb li img{ border-radius: 5px; } #crumb .box-more{ text-align: center; } /*—————————————-誰來我家*/ #visitor li{ display: inline-block; padding: 1px; } #visitor li img{ border-radius: 5px; } #visitor .box-more{ text-align: center; } /* —————————————————————————————————————————— 頁尾 */ #footer{ background: url(http://pic.pimg.tw/weilife/1417766263-147680851.png) top left repeat-x; width: 275px; line-height: 200%; font-size: 9pt; padding: 30px 0px; } #footer #bottom:before{ display: block; content: “© CSS @ http://dribs-drabs.com/”; color: #82ae46; font-size: 9pt; padding-bottom: 10px; } #footer #bottom{ color: #82ae46; text-align: center; padding-top: 10px; } #footer #bottom a{ color: #82ae46; font-size: 9pt; padding-right: 5px; } #footer #bottom a:hover{ color: #726d40; } #footer #bottom a:nth-child(-n+3){display: none;} /* —————————————————————————————————————————— 留言區塊 */ #user-post{ width:600px; background: #ffffff; padding: 50px; } /* —————————————————————————————————————————— 留言區塊 */ /*–引用–*/ #trackback-box{} #trackback-box h3{display: none;} #trackback-url{display: none;} #trackback-text{display: none;} #comment-box{} #comment-box h3:before{ content: “”; } #comment-box h3{ margin: 0px; padding: 10px 0px; } .post-comment{ padding: 10px 0px; border-bottom: #bbb dotted 1px; } .post-comment a:before{ content: “► “; font-size: 10px; } .post-comment:hover a{ color: #777; } /*–單一留言–*/ /*–單一引用+單一回應–*/ .single-post{ padding: 20px; min-height: 55px; -webkit-transition: background 0.5s ease-out; -moz-transition: background 0.5s ease-out; -o-transition: background 0.5s ease-out; transition: background 0.5s ease-out; border-bottom: dotted #aaa 1px; position: relative; } .single-post:hover{ background: #f4f4f4; } .secret{ min-height: 0px; } .secret li:before{ content: “- “; padding-right: 5px; } .secret li:after{ content: “- “; padding-left: 5px; } .secret li{ padding: 0px; } .post-info{ font-weight: bold; height: 20px; } .post-info a:hover{ position: relative; top: 1px; left: 1px; } .post-info .floor{ display: block; width: 50px; position: absolute; top: 65px; right: 10px; text-align: center; font-size: 14px; font-weight: normal; } .post-photo{ text-align: right; position: absolute; top: 10px; right: 10px; } .post-photo img{ width: 50px; height: 50px; border-radius: 50%; } .post-text{ padding: 0px 80px 10px 0px; line-height: 150%; } .reply-text{ color: #888; padding: 0px 80px 0px 10px; line-height: 150%; border-left: #888 solid 5px; } .reply-text p{ padding-top: 10px; padding-bottom: 2px; } .reply-text a{ color: #888; } .reply-text a:hover{ position: relative; top: 1px; left: 1px; } /*——————–icon————–*/ .post-info .user-name a{ margin: 0 5px 0px 0px; } .post-info .user-name img{ display: none; } .post-info .homepage{ background: url(http://pic.pimg.tw/weilife/1381045870-1646743796.png) center center no-repeat; } .post-info .homepage img{ filter:alpha(opacity=0); -moz-opacity:0; opacity: 0; } .post-info .hide-message{ background: url(http://pic.pimg.tw/weilife/1381045870-893869105.png) center center no-repeat; } .post-info .hide-message img{ filter:alpha(opacity=0); -moz-opacity:0; opacity: 0; } .post-info .show-message{ background: url(http://pic.pimg.tw/weilife/1381045870-1392687776.png) center center no-repeat; } .post-info .show-message img{ filter:alpha(opacity=0); -moz-opacity:0; opacity: 0; } .post-info .delete-message{ background: url(http://pic.pimg.tw/weilife/1381045869-3234832763.png) center center no-repeat; } .post-info .delete-message img{ filter:alpha(opacity=0); -moz-opacity:0; opacity: 0; } .post-info .spam-message{ background: url(http://pic.pimg.tw/weilife/1381045869-3826508189.png) center center no-repeat; } .post-info .spam-message img{ filter:alpha(opacity=0); -moz-opacity:0; opacity: 0; } .post-info .reply-message{ background: url(http://pic.pimg.tw/weilife/1381045870-4208701959.png) center center no-repeat; } .post-info .reply-message img{ filter:alpha(opacity=0); -moz-opacity:0; opacity: 0; } .reply-text .comment-icon{ display: none; } /* —————————————————————留言撰寫 —————————————————————*/ #container #main #content #user-post #comment-box #comment-area { width: 600px; padding: 0px; } #container #main #content #user-post #comment-box #comment-area-2 { width: 560px; background: #eaeaea; padding: 20px; border: 0px; } #container #main #content #user-post #comment-box #comment-area iframe{ position: absolute ; top:20px; right: 20px; float:right; } #container #main #content #user-post #comment-box .comment-identity{ width: 100%; background:url(http://pic.pimg.tw/weilife/1368612429-2456652207.png) repeat-x bottom left; border: 0px; padding: 0px; padding-bottom: 5px; } #container #main #content #user-post #comment-box .identity-login img.photo{ border: 0px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #container #main #content #user-post #comment-box .comment-body{ border: 0px; padding: 0px; } #container #main #content #user-post #comment-box input.comment-name{ background: #F2F2F2; width: 100%; border: 0px; padding: 5px; margin: 0px; margin-bottom: 10px; } #container #main #content #user-post #comment-box .comment-textarea{ background: #f5f5f5; width: 100%; border: 0px; padding: 0px; padding-bottom: 2px; margin: 0px; margin-bottom: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #container #main #content #user-post #comment-box .comment-textarea textarea{ background: #f5f5f5; width: 98%; padding: 5px; margin-bottom:5px; } #container #main #content #user-post #comment-box .captcha{ background: #f5f5f5; width: 100%; border: 0px; padding: 0px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #container #main #content #user-post #comment-box .captcha div{ position: absolute; top:5px; left: 210px; } #container #main #content #user-post #comment-box .captcha input{ width: 100%; height: 25px; border: 0px; position: absolute; top:0px; left: 120px; } #container #main #content #user-post #comment-box a.reload-captcha{ position: absolute; top:22px; left:0px; background: url(http://pic.pimg.tw/weilife/1368619771-4138190912.png) no-repeat right 4px; } #container #main #content #user-post #comment-box a.reload-captcha:hover{ position: absolute; top:22px; left:0px; background:url(http://pic.pimg.tw/weilife/1368619770-3632605094.png) no-repeat right 4px; color: #000000 } #container #main #content #user-post #comment-box .comment-extra{ background:url(http://pic.pimg.tw/weilife/1368612429-2456652207.png) repeat-x top left; margin: 0px; margin-top: 10px; padding: 0px; padding-top: 10px; } #container #main #content #user-post #comment-box #comment-area button{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #f5f5f5; border: 0px; } #container #main #content #user-post #comment-box .extra{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #f5f5f5; padding: 0px; padding-top: 5px; padding-bottom: 5px; margin: 0px; margin-top: 10px; border: 0px; } #container #main #content #user-post #comment-box .extra input { width: 45%; background: #f5f5f5; border: 0px; } /*————————————————————————–*/ @media screen and (min-width: 1350px){ #container{ width: 1300px; } #article-area{ width: 1000px; } #navigation{ margin-left: 680px; } #user-post{ width: 900px; } #container #main #content #user-post #comment-box #comment-area{ width: 900px; } #container #main #content #user-post #comment-box #comment-area-2{ width: 860px; } }

櫻花粉

/* CSS desinged by Wei @ Dribs & Drabs, http://dribs-drabs.com/ 色碼: #e9546b(桃紅)、#f6bfbc(粉紅)、#726d40(咖啡) */ /* —————————————————————————————————————————— 清空 */ #comment-form table{ margin: 0 auto ; } #comment-form td , #comment-form th{ border: 0px solid #000 ; padding: 0px 0px; } #comment-form input#send-comment{ padding: 0px 0px ; } 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; } .main-container{padding-top: 0px !important;} .navbar{display:none !important;} /* —————————————————————————————————————————— 部落格前置設定 */ body{ font-size: 11pt ; font-family:”Arial” ; background: #f6bfbc; min-width: 1100px; } a{ color:#000000; text-decoration:none ; } a:hover{ text-decoration:none ; } textarea{ font-size: 10pt; } /* —————————————————————————————————————————— 部落格資訊 */ #container{ width: 1000px; margin: 0 auto; position: relative; } #header{ width: 275px; } #header:after{ content: ” “; height: 60px; display: block; background: url(http://pic.pimg.tw/weilife/1420961892-3089557808.png) center left repeat-x; } #banner{ padding-top: 20px; } #banner h1 a{ color: #e9546b; font-weight: bold; font-size: 15pt; } #banner h1{ line-height: 300%; } #banner h2{ line-height: 170%; font-size: 9pt; } #navigation{ position: fixed; top: 35px; left: 50%; margin-left: 530px; z-index: 10; } #navigation a{ font-size: 0px; display: block; color: #e9546b; transform-origin:left top; transform:rotate(90deg); } #navigation a:hover{ color: #726d40; } #navigation a:before{ font-size: 10pt; display: block; } #navigation #link-album a:before{ content: “*Album”; height: 60px; } #navigation #link-blog a:before{ content: “*Blog”; height: 53px; } #navigation #link-guestbook a:before{ content: “*Guestbook”; height: 90px; } #navigation #link-profile a:before{ content: “*Profile”; height: 60px; } .skiplink{display: none;} #blog-category{display: none;} /* —————————————————————————————————————————— 公告區塊 */ #spotlight{ width: 275px; } #spotlight:after{ content: ” “; height: 60px; display: block; } #spotlight h5{ color: #e9546b; font-weight: bold; font-size: 11pt; line-height: 300%; } #spotlight h5:before{ content: “▩”; padding-right: 10px; } #spotlight-text{ line-height: 170%; font-size: 9pt; } /* —————————————————————————————————————————— 文章內容 */ #article-area{ width: 700px; position: absolute; top: 0px; right: 0px; background: #ffffff; } .article{ position: relative; padding: 50px; border-bottom: 1px dotted #e9546b; } .article .article-head{ padding-bottom: 15px; position: relative; } .article .article-head .publish{ padding: 2px 8px; color: #ffffff; display: inline-block; text-align: center; line-height: 150%; vertical-align: top; margin-right: 7px; background: #e9546b; border-radius: 8px; } .article .article-head .publish .time{display: none;} .article .article-head .publish .day{display: none;} .article .article-head .publish .year{display: block;} .article .article-head .title{ display: inline-block; line-height: 130%; font-size: 11pt; position: absolute; top: 0px; left: 75px; height: 50px; } .article .article-head .title a{ font-weight: bold; } .article .article-body{ line-height: 200%; } .article .article-content a{ color: #e9546b; } .article .article-content img{ max-width: 100%; } .article .article-content .more a{ font-size: 0px; display: block; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; z-index: 11; } .article:hover .article-content .more:before{ letter-spacing: 2px; text-align: center; width: 120px; height: 30px; line-height: 30px; content: “Read more…”; color: #ffffff; background: #e9546b; font-size: 10pt; position: absolute; top: 50%; right: -120px; margin-top: -90px; transform-origin:left bottom; transform:rotate(90deg); border-top-left-radius: 5px; border-top-right-radius: 5px; } .bookmark{ position: absolute; top: 20px; right: 10px; } .article .article-footer{display: none;} .article .article-body .author{display: none;} .article .article-keyword{display: none;} .article .pix-related-post{display: none;} .article #pixblogad{display: none;} .page{ padding: 40px 0px; text-align: center; } .page a{ color: #e9546b; padding: 0px 3px; } .page a:hover{ color: #726d40; } .page span{ padding: 0px 3px; } /*————————————-*/ #article-main .article-content{ padding-bottom: 30px; } #article-main .author:before{ content: “▸”; color: #e9546b; padding-right: 5px; } #article-main .author{ display: block; position: relative; top: 25px; left: -50px; width: 600px; padding: 50px 50px 0px 50px; border-top: 1px dotted #e9546b; } #article-main .author a:hover{ color: #e9546b; } #article-main .article-footer{ display: block; line-height: 200%; } #article-main .article-footer a:hover{ color: #e9546b; } #article-main .article-footer li:before{ content: “▸”; color: #e9546b; padding-right: 5px; } #article-main .article-footer .back-to-top{ display: none; } /* —————————————————————————————————————————— 文章分類 */ .article-area-title{ padding: 20px 0px 5px 0px ; text-align: center; color: #e9546b; font-size: 13pt; font-weight: bold; } #display{ text-align: center; padding: 10px 0px 20px 0px; border-bottom: 1px #e9546b dotted; } #display a:hover{ color: #e9546b; } .main-list{ padding: 50px 50px; } .main-list table{ width: 100%; } .main-list table tr{ border-bottom: 1px dotted #aaa; } .main-list table tr:hover{ background: #eee; } .main-list table th{ padding: 8px 5px; } .main-list table td{ padding: 8px 5px; } /* —————————————————————————————————————————— 側欄 */ #links{ width: 275px; } #links-row-1{display: none;} .box{ } .box:after{ content: ” “; height: 60px; display: block; /*background: url(http://pic.pimg.tw/weilife/1420961892-3089557808.png) center left repeat-x;*/ } .box-title{ color: #e9546b; font-weight: bold; font-size: 11pt; line-height: 250%; } .box-title:before{ content: “▩”; padding-right: 10px; } .box-text{ line-height: 200%; padding-top: 10px; font-size: 9pt; } /*—————————————-文章分類*/ #category{ position: relative; } #category .box-more{ text-align: right; position: absolute; top: 10px; right: 10px; } #category h6 img{ padding-right: 10px; } #category .inner-box ul{ padding-left: 20px; } #category .inner-box ul li:before{ content: “├”; padding-right: 10px; color: #e9546b; display: inline-block; } /*—————————————-個人資訊*/ #user-info .box-text{ padding: 10px 0px 0px 0px; } #user-info .box-text .user-img{ padding-bottom: 15px; } /*—————————————-日曆*/ #calendar table{ width: 100%; } #calendar th, #calendar td{ text-align:center; } #calendar td a{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background:#e9546b; color:#ffffff; display:block; } #calendar td a:hover{ position: relative; top: 1px; left: 1px; } /*—————————————-近期文章與熱門文章有圖示時*/ .d_thum{ width: 60px !important; } .d_txt_link{ width: 190px !important; } /*—————————————-近期文章*/ #recent-article li{ line-height: 200%; padding-bottom: 2px; padding-left: 15px; position: relative; } #recent-article li:hover a{ color: #e9546b; } #recent-article li a:before{ position: absolute; top: 0px; left: 0px; content: “▸”; color: #e9546b; } /*—————————————-熱門文章*/ #hot-article li{ line-height: 200%; padding-bottom: 2px; padding-left: 15px; position: relative; } #hot-article li:hover a{ color: #e9546b; } #hot-article li a:before{ position: absolute; top: 0px; left: 0px; content: “▸”; color: #e9546b; } /*—————————————-最新留言*/ #latest-comment li{ line-height: 200%; padding-bottom: 2px; padding-left: 15px; position: relative; } #latest-comment li:before{ position: absolute; top: 0px; left: 0px; content: “▸”; color: #e9546b; } #latest-comment li a:hover{ color: #e9546b; } /*—————————————-自訂連結*/ #mylink li:before{ content: “▸”; color: #e9546b; padding-right: 10px; } #mylink li a:hover{ color: #e9546b; } /*—————————————-文章彙整*/ #archive .box-text select{ display: inline-block; } #archive .box-text .box-more{ display: inline-block; padding-left: 20px; } #archive .box-text .box-more:hover a{ color: #e9546b; } /*—————————————-文章搜尋*/ #search li{ display: inline-block; } #search #search-target{ width: 210px; border: 0px; } #search #search-submit{ background: transparent; border: 0px; padding-left: 10px; } #search #search-submit:hover{ color: #e9546b; } /*—————————————-我去誰家*/ #crumb li{ display: inline-block; padding: 1px; } #crumb li img{ border-radius: 5px; } #crumb .box-more{ text-align: center; } /*—————————————-誰來我家*/ #visitor li{ display: inline-block; padding: 1px; } #visitor li img{ border-radius: 5px; } #visitor .box-more{ text-align: center; } /* —————————————————————————————————————————— 頁尾 */ #footer{ background: url(http://pic.pimg.tw/weilife/1420961892-3089557808.png) top left repeat-x; width: 275px; line-height: 200%; font-size: 9pt; padding: 30px 0px; } #footer #bottom:before{ display: block; content: “© CSS @ http://dribs-drabs.com”; color: #e9546b; font-size: 9pt; padding-bottom: 10px; } #footer #bottom{ color: #e9546b; text-align: center; padding-top: 10px; } #footer #bottom a{ color: #e9546b; font-size: 9pt; padding-right: 5px; } #footer #bottom a:hover{ color: #726d40; } #footer #bottom a:nth-child(-n+3){display: none;} /* —————————————————————————————————————————— 留言區塊 */ #user-post{ width:600px; background: #ffffff; padding: 50px; } /* —————————————————————————————————————————— 留言區塊 */ /*–引用–*/ #trackback-box{} #trackback-box h3{display: none;} #trackback-url{display: none;} #trackback-text{display: none;} #comment-box{} #comment-box h3:before{ content: “”; } #comment-box h3{ margin: 0px; padding: 10px 0px; } .post-comment{ padding: 10px 0px; border-bottom: #bbb dotted 1px; } .post-comment a:before{ content: “► “; font-size: 10px; } .post-comment:hover a{ color: #777; } /*–單一留言–*/ /*–單一引用+單一回應–*/ .single-post{ padding: 20px; min-height: 55px; -webkit-transition: background 0.5s ease-out; -moz-transition: background 0.5s ease-out; -o-transition: background 0.5s ease-out; transition: background 0.5s ease-out; border-bottom: dotted #aaa 1px; position: relative; } .single-post:hover{ background: #f4f4f4; } .secret{ min-height: 0px; } .secret li:before{ content: “- “; padding-right: 5px; } .secret li:after{ content: “- “; padding-left: 5px; } .secret li{ padding: 0px; } .post-info{ font-weight: bold; height: 20px; } .post-info a:hover{ position: relative; top: 1px; left: 1px; } .post-info .floor{ display: block; width: 50px; position: absolute; top: 65px; right: 10px; text-align: center; font-size: 14px; font-weight: normal; } .post-photo{ text-align: right; position: absolute; top: 10px; right: 10px; } .post-photo img{ width: 50px; height: 50px; border-radius: 50%; } .post-text{ padding: 0px 80px 10px 0px; line-height: 150%; } .reply-text{ color: #888; padding: 0px 80px 0px 10px; line-height: 150%; border-left: #888 solid 5px; } .reply-text p{ padding-top: 10px; padding-bottom: 2px; } .reply-text a{ color: #888; } .reply-text a:hover{ position: relative; top: 1px; left: 1px; } /*——————–icon————–*/ .post-info .user-name a{ margin: 0 5px 0px 0px; } .post-info .user-name img{ display: none; } .post-info .homepage{ background: url(http://pic.pimg.tw/weilife/1381045870-1646743796.png) center center no-repeat; } .post-info .homepage img{ filter:alpha(opacity=0); -moz-opacity:0; opacity: 0; } .post-info .hide-message{ background: url(http://pic.pimg.tw/weilife/1381045870-893869105.png) center center no-repeat; } .post-info .hide-message img{ filter:alpha(opacity=0); -moz-opacity:0; opacity: 0; } .post-info .show-message{ background: url(http://pic.pimg.tw/weilife/1381045870-1392687776.png) center center no-repeat; } .post-info .show-message img{ filter:alpha(opacity=0); -moz-opacity:0; opacity: 0; } .post-info .delete-message{ background: url(http://pic.pimg.tw/weilife/1381045869-3234832763.png) center center no-repeat; } .post-info .delete-message img{ filter:alpha(opacity=0); -moz-opacity:0; opacity: 0; } .post-info .spam-message{ background: url(http://pic.pimg.tw/weilife/1381045869-3826508189.png) center center no-repeat; } .post-info .spam-message img{ filter:alpha(opacity=0); -moz-opacity:0; opacity: 0; } .post-info .reply-message{ background: url(http://pic.pimg.tw/weilife/1381045870-4208701959.png) center center no-repeat; } .post-info .reply-message img{ filter:alpha(opacity=0); -moz-opacity:0; opacity: 0; } .reply-text .comment-icon{ display: none; } /* —————————————————————留言撰寫 —————————————————————*/ #container #main #content #user-post #comment-box #comment-area { width: 600px; padding: 0px; } #container #main #content #user-post #comment-box #comment-area-2 { width: 560px; background: #eaeaea; padding: 20px; border: 0px; } #container #main #content #user-post #comment-box #comment-area iframe{ position: absolute ; top:20px; right: 20px; float:right; } #container #main #content #user-post #comment-box .comment-identity{ width: 100%; background:url(http://pic.pimg.tw/weilife/1368612429-2456652207.png) repeat-x bottom left; border: 0px; padding: 0px; padding-bottom: 5px; } #container #main #content #user-post #comment-box .identity-login img.photo{ border: 0px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #container #main #content #user-post #comment-box .comment-body{ border: 0px; padding: 0px; } #container #main #content #user-post #comment-box input.comment-name{ background: #F2F2F2; width: 100%; border: 0px; padding: 5px; margin: 0px; margin-bottom: 10px; } #container #main #content #user-post #comment-box .comment-textarea{ background: #f5f5f5; width: 100%; border: 0px; padding: 0px; padding-bottom: 2px; margin: 0px; margin-bottom: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #container #main #content #user-post #comment-box .comment-textarea textarea{ background: #f5f5f5; width: 98%; padding: 5px; margin-bottom:5px; } #container #main #content #user-post #comment-box .captcha{ background: #f5f5f5; width: 100%; border: 0px; padding: 0px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #container #main #content #user-post #comment-box .captcha div{ position: absolute; top:5px; left: 210px; } #container #main #content #user-post #comment-box .captcha input{ width: 100%; height: 25px; border: 0px; position: absolute; top:0px; left: 120px; } #container #main #content #user-post #comment-box a.reload-captcha{ position: absolute; top:22px; left:0px; background: url(http://pic.pimg.tw/weilife/1368619771-4138190912.png) no-repeat right 4px; } #container #main #content #user-post #comment-box a.reload-captcha:hover{ position: absolute; top:22px; left:0px; background:url(http://pic.pimg.tw/weilife/1368619770-3632605094.png) no-repeat right 4px; color: #000000 } #container #main #content #user-post #comment-box .comment-extra{ background:url(http://pic.pimg.tw/weilife/1368612429-2456652207.png) repeat-x top left; margin: 0px; margin-top: 10px; padding: 0px; padding-top: 10px; } #container #main #content #user-post #comment-box #comment-area button{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #f5f5f5; border: 0px; } #container #main #content #user-post #comment-box .extra{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #f5f5f5; padding: 0px; padding-top: 5px; padding-bottom: 5px; margin: 0px; margin-top: 10px; border: 0px; } #container #main #content #user-post #comment-box .extra input { width: 45%; background: #f5f5f5; border: 0px; } /*————————————————————————–*/ @media screen and (min-width: 1350px){ #container{ width: 1300px; } #article-area{ width: 1000px; } #navigation{ margin-left: 680px; } #user-post{ width: 900px; } #container #main #content #user-post #comment-box #comment-area{ width: 900px; } #container #main #content #user-post #comment-box #comment-area-2{ width: 860px; } }

薰衣紫

/* CSS desinged by Wei @ Dribs & Drabs, http://dribs-drabs.com/ 色碼: #907d93(薰衣草紫)、#dcd3dd(淺紫) */ /* —————————————————————————————————————————— 清空 */ #comment-form table{ margin: 0 auto ; } #comment-form td , #comment-form th{ border: 0px solid #000 ; padding: 0px 0px; } #comment-form input#send-comment{ padding: 0px 0px ; } 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; } .main-container{padding-top: 0px !important;} .navbar{display:none !important;} /* —————————————————————————————————————————— 部落格前置設定 */ body{ font-size: 11pt ; font-family:”Arial” ; background: #dcd3dd; min-width: 1100px; } a{ color:#000000; text-decoration:none ; } a:hover{ text-decoration:none ; } textarea{ font-size: 10pt; } /* —————————————————————————————————————————— 部落格資訊 */ #container{ width: 1000px; margin: 0 auto; position: relative; } #header{ width: 275px; } #header:after{ content: ” “; height: 60px; display: block; background: url(http://pic.pimg.tw/weilife/1421065682-4024988559.png) center left repeat-x; } #banner{ padding-top: 20px; } #banner h1 a{ color: #907d93; font-weight: bold; font-size: 15pt; } #banner h1{ line-height: 300%; } #banner h2{ line-height: 170%; font-size: 9pt; } #navigation{ position: fixed; top: 35px; left: 50%; margin-left: 530px; z-index: 10; } #navigation a{ font-size: 0px; display: block; color: #907d93; transform-origin:left top; transform:rotate(90deg); } #navigation a:hover{ color: #000; } #navigation a:before{ font-size: 10pt; display: block; } #navigation #link-album a:before{ content: “*Album”; height: 60px; } #navigation #link-blog a:before{ content: “*Blog”; height: 53px; } #navigation #link-guestbook a:before{ content: “*Guestbook”; height: 90px; } #navigation #link-profile a:before{ content: “*Profile”; height: 60px; } .skiplink{display: none;} #blog-category{display: none;} /* —————————————————————————————————————————— 公告區塊 */ #spotlight{ width: 275px; } #spotlight:after{ content: ” “; height: 60px; display: block; } #spotlight h5{ color: #907d93; font-weight: bold; font-size: 11pt; line-height: 300%; } #spotlight h5:before{ content: “▩”; padding-right: 10px; } #spotlight-text{ line-height: 170%; font-size: 9pt; } /* —————————————————————————————————————————— 文章內容 */ #article-area{ width: 700px; position: absolute; top: 0px; right: 0px; background: #ffffff; } .article{ position: relative; padding: 50px; border-bottom: 1px dotted #907d93; } .article .article-head{ padding-bottom: 15px; position: relative; } .article .article-head .publish{ padding: 2px 8px; color: #ffffff; display: inline-block; text-align: center; line-height: 150%; vertical-align: top; margin-right: 7px; background: #907d93; border-radius: 8px; } .article .article-head .publish .time{display: none;} .article .article-head .publish .day{display: none;} .article .article-head .publish .year{display: block;} .article .article-head .title{ display: inline-block; line-height: 130%; font-size: 11pt; position: absolute; top: 0px; left: 75px; height: 50px; } .article .article-head .title a{ font-weight: bold; } .article .article-body{ line-height: 200%; } .article .article-content a{ color: #907d93; } .article .article-content img{ max-width: 100%; } .article .article-content .more a{ font-size: 0px; display: block; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; z-index: 11; } .article:hover .article-content .more:before{ letter-spacing: 2px; text-align: center; width: 120px; height: 30px; line-height: 30px; content: “Read more…”; color: #ffffff; background: #907d93; font-size: 10pt; position: absolute; top: 50%; right: -120px; margin-top: -90px; transform-origin:left bottom; transform:rotate(90deg); border-top-left-radius: 5px; border-top-right-radius: 5px; } .bookmark{ position: absolute; top: 20px; right: 10px; } .article .article-footer{display: none;} .article .article-body .author{display: none;} .article .article-keyword{display: none;} .article .pix-related-post{display: none;} .article #pixblogad{display: none;} .page{ padding: 40px 0px; text-align: center; } .page a{ color: #907d93; padding: 0px 3px; } .page a:hover{ color: #000; } .page span{ padding: 0px 3px; } /*————————————-*/ #article-main .article-content{ padding-bottom: 30px; } #article-main .author:before{ content: “▸”; color: #907d93; padding-right: 5px; } #article-main .author{ display: block; position: relative; top: 25px; left: -50px; width: 600px; padding: 50px 50px 0px 50px; border-top: 1px dotted #907d93; } #article-main .author a:hover{ color: #907d93; } #article-main .article-footer{ display: block; line-height: 200%; } #article-main .article-footer a:hover{ color: #907d93; } #article-main .article-footer li:before{ content: “▸”; color: #907d93; padding-right: 5px; } #article-main .article-footer .back-to-top{ display: none; } /* —————————————————————————————————————————— 文章分類 */ .article-area-title{ padding: 20px 0px 5px 0px ; text-align: center; color: #907d93; font-size: 13pt; font-weight: bold; } #display{ text-align: center; padding: 10px 0px 20px 0px; border-bottom: 1px #907d93 dotted; } #display a:hover{ color: #907d93; } .main-list{ padding: 50px 50px; } .main-list table{ width: 100%; } .main-list table tr{ border-bottom: 1px dotted #aaa; } .main-list table tr:hover{ background: #eee; } .main-list table th{ padding: 8px 5px; } .main-list table td{ padding: 8px 5px; } /* —————————————————————————————————————————— 側欄 */ #links{ width: 275px; } #links-row-1{display: none;} .box{ } .box:after{ content: ” “; height: 60px; display: block; /*background: url(http://pic.pimg.tw/weilife/1421065682-4024988559.png) center left repeat-x;*/ } .box-title{ color: #907d93; font-weight: bold; font-size: 11pt; line-height: 250%; } .box-title:before{ content: “▩”; padding-right: 10px; } .box-text{ line-height: 200%; padding-top: 10px; font-size: 9pt; } /*—————————————-文章分類*/ #category{ position: relative; } #category .box-more{ text-align: right; position: absolute; top: 10px; right: 10px; } #category h6 img{ padding-right: 10px; } #category .inner-box ul{ padding-left: 20px; } #category .inner-box ul li:before{ content: “├”; padding-right: 10px; color: #907d93; display: inline-block; } /*—————————————-個人資訊*/ #user-info .box-text{ padding: 10px 0px 0px 0px; } #user-info .box-text .user-img{ padding-bottom: 15px; } /*—————————————-日曆*/ #calendar table{ width: 100%; } #calendar th, #calendar td{ text-align:center; } #calendar td a{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background:#907d93; color:#ffffff; display:block; } #calendar td a:hover{ position: relative; top: 1px; left: 1px; } /*—————————————-近期文章與熱門文章有圖示時*/ .d_thum{ width: 60px !important; } .d_txt_link{ width: 190px !important; } /*—————————————-近期文章*/ #recent-article li{ line-height: 200%; padding-bottom: 2px; padding-left: 15px; position: relative; } #recent-article li:hover a{ color: #907d93; } #recent-article li a:before{ position: absolute; top: 0px; left: 0px; content: “▸”; color: #907d93; } /*—————————————-熱門文章*/ #hot-article li{ line-height: 200%; padding-bottom: 2px; padding-left: 15px; position: relative; } #hot-article li:hover a{ color: #907d93; } #hot-article li a:before{ position: absolute; top: 0px; left: 0px; content: “▸”; color: #907d93; } /*—————————————-最新留言*/ #latest-comment li{ line-height: 200%; padding-bottom: 2px; padding-left: 15px; position: relative; } #latest-comment li:before{ position: absolute; top: 0px; left: 0px; content: “▸”; color: #907d93; } #latest-comment li a:hover{ color: #907d93; } /*—————————————-自訂連結*/ #mylink li:before{ content: “▸”; color: #907d93; padding-right: 10px; } #mylink li a:hover{ color: #907d93; } /*—————————————-文章彙整*/ #archive .box-text select{ display: inline-block; } #archive .box-text .box-more{ display: inline-block; padding-left: 20px; } #archive .box-text .box-more:hover a{ color: #907d93; } /*—————————————-文章搜尋*/ #search li{ display: inline-block; } #search #search-target{ width: 210px; border: 0px; } #search #search-submit{ background: transparent; border: 0px; padding-left: 10px; } #search #search-submit:hover{ color: #907d93; } /*—————————————-我去誰家*/ #crumb li{ display: inline-block; padding: 1px; } #crumb li img{ border-radius: 5px; } #crumb .box-more{ text-align: center; } /*—————————————-誰來我家*/ #visitor li{ display: inline-block; padding: 1px; } #visitor li img{ border-radius: 5px; } #visitor .box-more{ text-align: center; } /* —————————————————————————————————————————— 頁尾 */ #footer{ background: url(http://pic.pimg.tw/weilife/1421065682-4024988559.png) top left repeat-x; width: 275px; line-height: 200%; font-size: 9pt; padding: 30px 0px; } #footer #bottom:before{ display: block; content: “© CSS @ http://dribs-drabs.com/”; color: #907d93; font-size: 9pt; padding-bottom: 10px; } #footer #bottom{ color: #907d93; text-align: center; padding-top: 10px; } #footer #bottom a{ color: #907d93; font-size: 9pt; padding-right: 5px; } #footer #bottom a:hover{ color: #000; } #footer #bottom a:nth-child(-n+3){display: none;} /* —————————————————————————————————————————— 留言區塊 */ #user-post{ width:600px; background: #ffffff; padding: 50px; } /* —————————————————————————————————————————— 留言區塊 */ /*–引用–*/ #trackback-box{} #trackback-box h3{display: none;} #trackback-url{display: none;} #trackback-text{display: none;} #comment-box{} #comment-box h3:before{ content: “”; } #comment-box h3{ margin: 0px; padding: 10px 0px; } .post-comment{ padding: 10px 0px; border-bottom: #bbb dotted 1px; } .post-comment a:before{ content: “► “; font-size: 10px; } .post-comment:hover a{ color: #777; } /*–單一留言–*/ /*–單一引用+單一回應–*/ .single-post{ padding: 20px; min-height: 55px; -webkit-transition: background 0.5s ease-out; -moz-transition: background 0.5s ease-out; -o-transition: background 0.5s ease-out; transition: background 0.5s ease-out; border-bottom: dotted #aaa 1px; position: relative; } .single-post:hover{ background: #f4f4f4; } .secret{ min-height: 0px; } .secret li:before{ content: “- “; padding-right: 5px; } .secret li:after{ content: “- “; padding-left: 5px; } .secret li{ padding: 0px; } .post-info{ font-weight: bold; height: 20px; } .post-info a:hover{ position: relative; top: 1px; left: 1px; } .post-info .floor{ display: block; width: 50px; position: absolute; top: 65px; right: 10px; text-align: center; font-size: 14px; font-weight: normal; } .post-photo{ text-align: right; position: absolute; top: 10px; right: 10px; } .post-photo img{ width: 50px; height: 50px; border-radius: 50%; } .post-text{ padding: 0px 80px 10px 0px; line-height: 150%; } .reply-text{ color: #888; padding: 0px 80px 0px 10px; line-height: 150%; border-left: #888 solid 5px; } .reply-text p{ padding-top: 10px; padding-bottom: 2px; } .reply-text a{ color: #888; } .reply-text a:hover{ position: relative; top: 1px; left: 1px; } /*——————–icon————–*/ .post-info .user-name a{ margin: 0 5px 0px 0px; } .post-info .user-name img{ display: none; } .post-info .homepage{ background: url(http://pic.pimg.tw/weilife/1381045870-1646743796.png) center center no-repeat; } .post-info .homepage img{ filter:alpha(opacity=0); -moz-opacity:0; opacity: 0; } .post-info .hide-message{ background: url(http://pic.pimg.tw/weilife/1381045870-893869105.png) center center no-repeat; } .post-info .hide-message img{ filter:alpha(opacity=0); -moz-opacity:0; opacity: 0; } .post-info .show-message{ background: url(http://pic.pimg.tw/weilife/1381045870-1392687776.png) center center no-repeat; } .post-info .show-message img{ filter:alpha(opacity=0); -moz-opacity:0; opacity: 0; } .post-info .delete-message{ background: url(http://pic.pimg.tw/weilife/1381045869-3234832763.png) center center no-repeat; } .post-info .delete-message img{ filter:alpha(opacity=0); -moz-opacity:0; opacity: 0; } .post-info .spam-message{ background: url(http://pic.pimg.tw/weilife/1381045869-3826508189.png) center center no-repeat; } .post-info .spam-message img{ filter:alpha(opacity=0); -moz-opacity:0; opacity: 0; } .post-info .reply-message{ background: url(http://pic.pimg.tw/weilife/1381045870-4208701959.png) center center no-repeat; } .post-info .reply-message img{ filter:alpha(opacity=0); -moz-opacity:0; opacity: 0; } .reply-text .comment-icon{ display: none; } /* —————————————————————留言撰寫 —————————————————————*/ #container #main #content #user-post #comment-box #comment-area { width: 600px; padding: 0px; } #container #main #content #user-post #comment-box #comment-area-2 { width: 560px; background: #eaeaea; padding: 20px; border: 0px; } #container #main #content #user-post #comment-box #comment-area iframe{ position: absolute ; top:20px; right: 20px; float:right; } #container #main #content #user-post #comment-box .comment-identity{ width: 100%; background:url(http://pic.pimg.tw/weilife/1368612429-2456652207.png) repeat-x bottom left; border: 0px; padding: 0px; padding-bottom: 5px; } #container #main #content #user-post #comment-box .identity-login img.photo{ border: 0px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #container #main #content #user-post #comment-box .comment-body{ border: 0px; padding: 0px; } #container #main #content #user-post #comment-box input.comment-name{ background: #F2F2F2; width: 100%; border: 0px; padding: 5px; margin: 0px; margin-bottom: 10px; } #container #main #content #user-post #comment-box .comment-textarea{ background: #f5f5f5; width: 100%; border: 0px; padding: 0px; padding-bottom: 2px; margin: 0px; margin-bottom: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #container #main #content #user-post #comment-box .comment-textarea textarea{ background: #f5f5f5; width: 98%; padding: 5px; margin-bottom:5px; } #container #main #content #user-post #comment-box .captcha{ background: #f5f5f5; width: 100%; border: 0px; padding: 0px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #container #main #content #user-post #comment-box .captcha div{ position: absolute; top:5px; left: 210px; } #container #main #content #user-post #comment-box .captcha input{ width: 100%; height: 25px; border: 0px; position: absolute; top:0px; left: 120px; } #container #main #content #user-post #comment-box a.reload-captcha{ position: absolute; top:22px; left:0px; background: url(http://pic.pimg.tw/weilife/1368619771-4138190912.png) no-repeat right 4px; } #container #main #content #user-post #comment-box a.reload-captcha:hover{ position: absolute; top:22px; left:0px; background:url(http://pic.pimg.tw/weilife/1368619770-3632605094.png) no-repeat right 4px; color: #000000 } #container #main #content #user-post #comment-box .comment-extra{ background:url(http://pic.pimg.tw/weilife/1368612429-2456652207.png) repeat-x top left; margin: 0px; margin-top: 10px; padding: 0px; padding-top: 10px; } #container #main #content #user-post #comment-box #comment-area button{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #f5f5f5; border: 0px; } #container #main #content #user-post #comment-box .extra{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #f5f5f5; padding: 0px; padding-top: 5px; padding-bottom: 5px; margin: 0px; margin-top: 10px; border: 0px; } #container #main #content #user-post #comment-box .extra input { width: 45%; background: #f5f5f5; border: 0px; } /*————————————————————————–*/ @media screen and (min-width: 1350px){ #container{ width: 1300px; } #article-area{ width: 1000px; } #navigation{ margin-left: 680px; } #user-post{ width: 900px; } #container #main #content #user-post #comment-box #comment-area{ width: 900px; } #container #main #content #user-post #comment-box #comment-area-2{ width: 860px; } }

‌

版面設定

1 – 請至後台 > 側邊欄位設定，將所有有用到的元件移至側欄2

2 – 文章中，圖片最大寬度為900px

3 – 為了版面美觀，已將個人覺得礙眼的東西刪除，若需要的話請自行修改CSS

‌

更新

2014/12/16 解決滑鼠移至圖繪會縮放的問題

2015/01/13 新增兩種顏色 – 櫻花粉、薰衣紫

2015/12/15 更新版面

2018/08/02 刪除置頂快捷BAR、增加自適應功能讓版面隨瀏覽器大小縮放

‌