Dribs & Drabs 點點 滴滴

這個版本是從"拍立得圖文集"修改來的，讓不是圖文的部落格也能使用，當然文章中要放入照片也是OK的唷 :D

本樣式的特點為部落格上方的下拉式側欄與左方的隱藏式側欄，讓版面乾乾淨淨好閱讀!

不會修改CSS的朋友，比較適合套用這個版本，應該不會出現甚麼大問題 

使用規定 <<<<<< 必看

CSS語法

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

/* CSS desinged by Wei @ Dribs & Drabs, http://www.dribs-drabs.com/blog 主要色碼: #e9546b(桃紅)、#f2a0a1(淺粉) */ /* ------------------------------------------------------------------------------------------------------------------------------ 清空 */ #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; } /* ------------------------------------------------------------------------------------------------------------------------------ 部落格前置設定 */ body{ font-size: 11pt; font-family:"Arial" ; min-width: 1000px; background: url(http://pic.pimg.tw/weilife/1394713740-3347444203.jpg); } #container{ width: 900px; margin: 0 auto; } a{ color:#000000; text-decoration:none ; } a:hover{ text-decoration:none ; } textarea{ font-size: 12px; } /* ------------------------------------------------------------------------------------------------------------------------------ 快捷功能BAR */ .topbar--fixed{ position: absolute; } .topbar__logo{display: none;} .topbar__search{display: none;} .topbar__announce{display: none;} .topbar{ width: 205px !important; min-width: 140px !important; z-index: 1 !important; box-shadow: none !important; background: transparent !important; left: 50% !important; margin-left: -450px; } .topbar__notification .topbar__dropdown-lists{ left: -10px !important; } .topbar__notification .topbar__dropdown-lists:before{ margin-left: -195px !important; } .topbar__notification .topbar__dropdown-lists:after{ margin-left: -195px !important; } .topbar__lang .topbar__lang__switcher, .topbar__notification .topbar__notification__counter, .topbar__user .topbar__user__avator, .topbar__user .topbar__user__login{ color: #bbb; } .topbar__search-container{display: none;} .topbar__related-article__cat-name{display: none !important;} #blog-category{ /*白色的底*/ width: 900px; height: 60px; position: absolute; top: -60px; left: 0px; background: #ffffff; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; box-shadow: 2px 2px 5px -2px rgba(20%,20%,40%,0.7); font-size: 0px; } /* ------------------------------------------------------------------------------------------------------------------------------ 部落格資訊 */ #header{ width: 900px; margin: 0 auto; padding: 45px 0px 45px 0px; position: relative; } #banner{ text-align: center; } #banner h1{ font-size: 40px; } #banner h2{ color: #555; padding-top: 10px; line-height: 150%; } /*--跳到主文--*/ #banner .skiplink{display: none;} /* ------------------------------------------------------------------------------------------------------------------------------ 連結區塊 */ #navigation{ margin: 0 auto; width: 250px; border-top: 1px dotted #999; padding-top: 7px; margin-top: 7px; text-align: center; } /*--其他服務連結區塊內的所有連結--*/ #navigation a:before{ content: "● "; padding-left: 6px; } #navigation li{ display: inline-block; } #navigation a{ color: #555; padding-right: 6px; } #navigation a:hover{ color: #e9546b; } /* ------------------------------------------------------------------------------------------------------------------------------ 主要內文 */ #main{clear: both;} #content{ margin: 0 auto; width: 800px; padding: 50px 50px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; box-shadow: 2px 2px 5px -2px rgba(20%,20%,40%,0.7); background: #ffffff; } /*--公告注目區--*/ #spotlight{ border-bottom: #aaa dotted 1px; padding-bottom: 20px; line-height: 200%; } #spotlight h5:before{ content: "► "; } #spotlight h5{ font-size: 16px; font-weight: bold; padding-bottom: 10px; } #spotlight-text{ color: #777; } /* ------------------------------------------------------------------------------------------------------------------------------ 文章區塊 */ .article{ padding: 20px 0px; border-bottom: dotted #aaa 1px; } .publish:before{ content: "► "; } .publish{ font-size: 16px; font-weight: bold; padding: 5px 0px; text-align: left; } .title h2:before{ content: "► "; } .title h2{ width: 100%; height: auto; font-size: 16px; font-weight: bold; padding: 5px 0px 15px 0px; } .article-content{ line-height: 200%; color: #777; } .article-content img{ max-width: 800px; } /*--繼續閱讀--*/ .article-content .more a:before{ content: "♥ "; } .article-content .more a{ padding: 10px 0px 10px 0px; color: #f2a0a1; font-weight: bold; display: block; } /*--發表時間--*/ .author:before{ content: "♥ "; color: #f2a0a1; } .author{ display: block; padding: 20px 0px 0px 0px; } /*--單一篇文章最下方--*/ .article-footer{display: none;} #article-main .article-footer{ display: block; border-top: dotted 1px #aaa; padding-top: 15px; line-height: 170%; } #article-main .article-footer a{ color: #777; } #article-main .article-footer a:hover{ position: relative; top: 1px; left: 1px; } .article-keyword{ display: none;} #article-main .article-keyword{ display: block; padding: 3px 0px 3px 0px; } /*--此篇文章分類 : 個人分類+全站分類--*/ .refer li:before{ content: "♥ "; color: #f2a0a1; } .refer li{ padding: 3px 0px; } /*--歷史上的今天--*/ .history h6:before{ content: "♥ "; color: #f2a0a1; } .history h6{ padding: 3px 0px; } /*--轉寄文章--*/ .forward{ display: none; } /*--回到頁首--*/ .back-to-top{ display: block; padding: 3px 0px 3px 0px; } /*--加入書籤--*/ .bookmark{ padding: 10px 0px 10px 0px; } /* ------------------------------------------------------------------------------------------------------------------------------ 分類/列表模式 */ #article-box h3:before{ content: "♥ "; color: #f2a0a1; } #article-box h3{ padding: 20px 0px 3px 0px; } #view-mode #display:before{ content: "♥ "; color: #f2a0a1; } #view-mode{ padding: 3px 0px 20px 0px; border-bottom: dotted #aaa 1px; } #view-mode a:hover{ position: relative; top: 1px; left: 1px; } /*--列表--*/ .main-list{ background: #ffffff; margin: 20px 15px; } .main-list table{ width: 100%; } .main-list td.list-date{ width: 14%; } .main-list td.list-title{ width: 70%; } .main-list td.list-visit{ width: 8%; text-align: center; } .main-list th.list-visit{ text-align: center; } .main-list td.list-comment{ width: 8%; text-align: center; } .main-list th.list-comment{ text-align: center; } .main-list tr:hover{ background:#efefef; } .main-list th{ color:#000000; padding:10px; border:0px; text-align: left; -moz-box-shadow: 0 2px 2px -2px #ccc; -webkit-box-shadow: 0 2px 2px -2px #ccc; border-bottom: dotted #bbb 1px; } .main-list td{ border:0px; padding:10px; -moz-box-shadow: 0 2px 2px -2px #ccc; -webkit-box-shadow: 0 2px 2px -2px #ccc; border-bottom: dotted #aaa 1px; } /*--頁數--*/ .page{ clear: both; padding: 30px 0px 10px 0px; text-align: center; } .page a{ padding: 0px 5px 0px 5px; } .page span{ padding: 0px 5px 0px 5px; color: #777; } .page a:hover{ position: relative; top: 1px; left: 1px; } /* ------------------------------------------------------------------------------------------------------------------------------ 留言區塊 */ /*--僅引用區塊--*/ #trackback-box{display: none;} /*--引用列表標題--*/ #trackback-title{} /*--引用內容區塊--*/ #trackback-text{} /*--單一引用--*/ #trackback-box .single-post{} /*--引用及回應列表全部的大範圍--*/ #user-post{ margin-top: 3px; border-top: dotted #aaa 1px; } #comment-title{ padding: 30px 0px 10px 50px; background: url(http://pic.pimg.tw/weilife/1390024476-1925841079.png) 20px 27px no-repeat; text-align: left; } .post-comment{ padding: 2px 0px 20px 50px; background: url(http://pic.pimg.tw/weilife/1390024476-3525513496.png) 20px top no-repeat; border-bottom: dotted #aaa 1px; } /*--單一引用+單一回應--*/ .single-post{ padding: 20px; -webkit-transition: background 0.5s ease-out; -moz-transition: background 0.5s ease-out; -o-transition: background 0.5s ease-out; border-bottom: dotted #aaa 1px; position: static; } .single-post:hover{ background: #efefef; } .secret{ padding: 0px; } .secret li{ font-size: 0px; padding: 27px; background: url(http://pic.pimg.tw/weilife/1395323895-307323769.png) 20px 27px no-repeat; -webkit-transition: none; -moz-transition: none; -o-transition: none; } .post-info{ position: relative; top: 1px; left: 35px; font-weight: bold; z-index: 10; } .post-info a:hover{ position: relative; top: 1px; left: 1px; } .post-photo{ position: relative; top: -20px; } .post-photo img{ width: 25px; height: 25px; } .post-text{ padding: 0px 0px 0px 35px; position: relative; top: -10px; } .reply-text{ color: #888; padding: 2px 0px 0px 35px; background: url(http://pic.pimg.tw/weilife/1381057934-3628601167.jpg) 20px top repeat-y; } .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--------------*/ .floor{ padding-right: 5px; } .user-name a{ padding-left: 13px; margin: 0 10px 0 5px; background: url(http://pic.pimg.tw/weilife/1381045870-1786288759.png) top left no-repeat; } .user-name img{ display: none; } .homepage{ background: url(http://pic.pimg.tw/weilife/1381045870-1646743796.png) center center no-repeat; } .homepage img{ filter:alpha(opacity=0); -moz-opacity:0; opacity: 0; } .hide-message{ background: url(http://pic.pimg.tw/weilife/1381045870-893869105.png) center center no-repeat; } .hide-message img{ filter:alpha(opacity=0); -moz-opacity:0; opacity: 0; } .show-message{ background: url(http://pic.pimg.tw/weilife/1381045870-1392687776.png) center center no-repeat; } .show-message img{ filter:alpha(opacity=0); -moz-opacity:0; opacity: 0; } .delete-message{ background: url(http://pic.pimg.tw/weilife/1381045869-3234832763.png) center center no-repeat; } .delete-message img{ filter:alpha(opacity=0); -moz-opacity:0; opacity: 0; } .spam-message{ background: url(http://pic.pimg.tw/weilife/1381045869-3826508189.png) center center no-repeat; } .spam-message img{ filter:alpha(opacity=0); -moz-opacity:0; opacity: 0; } .reply-message{ background: url(http://pic.pimg.tw/weilife/1381045870-4208701959.png) center center no-repeat; } .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: 800px; padding: 0px; } #container #main #content #user-post #comment-box #comment-area-2 { width: 760px; background: #e6e6e6; 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: 760px; 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: 750px; border: 0px; padding: 5px; margin: 0px; margin-bottom: 10px; } #container #main #content #user-post #comment-box .comment-textarea{ background: #F2F2F2; width: 760px; 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: #F2F2F2; width: 750px; padding: 5px; margin-bottom:5px; } #container #main #content #user-post #comment-box .captcha{ background: #F2F2F2; width: 760px; 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: 200px; 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: #F2F2F2; border: 0px; } #container #main #content #user-post #comment-box .extra{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #F2F2F2; 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: 351px; background: #F2F2F2; border: 0px; } /* ------------------------------------------------------------------------------------------------------------------------------ 側欄 */ /*--側邊欄位區--*/ #links{ clear: both; } .box-text li{ display: block; padding: 5px 0px; line-height: 150%; border-bottom: 1px dotted #ccc; } .box h6{ padding: 5px 0px; border-bottom: 1px dotted #ccc; } .box-more{ padding: 4px 0px 4px 0px; } .box a{ color: #e9546b; } .box a:hover{ position: relative; top: 1px; left: 1px; } /* ------------------------------------------------------------------------------------------------------------------------------ 側欄1 > 左方伸縮欄位 */ #links-row-1{ position: absolute; top: 0px; left: -210px; background: #ffffff; width: 240px; -webkit-transition: left 0.5s ease-out; -moz-transition: left 0.5s ease-out; -o-transition: left 0.5s ease-out; transition: left 0.5s ease-out; z-index: 11; box-shadow: 1px 1px 6px -2px rgba(20%,20%,40%,0.7); padding-bottom: 30px; padding-left: 10px; -webkit-border-bottom-right-radius: 10px; -moz-border-bottom-right-radius: 10px; border-bottom-right-radius: 10px; } #links-row-1:hover{ left: 0px; } #links-row-1 .box{ width: 180px; padding: 10px; border-top: dotted #999 1px; } #links-row-1 .box-title:before{ content: "● "; } #links-row-1 .box-title{ font-weight: bold; padding: 0px 0px 10px 0px; } #links-row-1 .box:first-child{ padding-right: 40px; background: url(http://pic.pimg.tw/weilife/1402317219-2254195646.png) right 10px no-repeat; border-top: none; } /* ------------------------------------------------------------------------------------------------------------------------------ 側欄2 > 上方下拉式選單 */ #links-row-2{ position: absolute; top: 0px; width: 690px; padding-left: 210px; } #links-row-2 .box{ display: inline-block; } #links-row-2 .box-title{ padding: 19px 20px 11px 20px; color: #555; } #links-row-2 .box-title img{display: none;} #links-row-2 .box:hover .box-title{ color: #ffffff; background: #f2a0a1; } #links-row-2 .box-text{ display: none; position: absolute; min-width: 200px; padding: 15px; background: #f3f3f2; border-top: 4px solid #f2a0a1; box-shadow: 2px 2px 5px -2px rgba(20%,20%,40%,0.7); -webkit-border-bottom-right-radius: 10px; -moz-border-bottom-right-radius: 10px; border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-bottom-left-radius: 10px; border-bottom-left-radius: 10px; } #links-row-2 .box:hover .box-text{ display: block; } /* ------------------------------------------------------------------------------------------------------------------------------ 側欄元件定義 */ /*-我去誰家-*/ #crumb{} #crumb .box-text{} #crumb .box-text ul:after { content: " "; display: block; height: 0px; clear: both; overflow: hidden; } #crumb .box-text li:before{display:none;} #crumb .box-text li { float: left; padding:5px; background: none; border: 0px; } #crumb .box-text img{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; width: 40px; height: 40px; } /*-好友列表-*/ #friendbox{} #friendbox.box-text{} #friendbox .box-text ul:after { content: " "; display: block; height: 0px; clear: both; overflow: hidden; } #friendbox .box-text li:before{display:none;} #friendbox .box-text li { float: left; padding:5px; background: none; border: 0px; } #friendbox .box-text img{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; width: 40px; height: 40px; border: 0px; } #friendbox .box-text a{ border: 0px; } /*-訪客列表-*/ #visitor{} #visitor .box-text{} #visitor .box-text ul:after { content: " "; display: block; height: 0px; clear: both; overflow: hidden; } #visitor .box-text li:before{display:none;} #visitor .box-text li { float: left; padding:5px; background: none; border: 0px; } #visitor .box-text img{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; width: 40px; height: 40px; } *-個人資訊-*/ #user-info .box-title{} #user-info .box-text {} #user-info{} #user-info dt{} #user-info dl dd {} #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; padding:0px; border:0px; margin-bottom:5px; } /*-日曆-*/ #calendar .box-title{} #calendar .box-text {} #calendar{} #calendar table{ width:100%; } #calendar th, #calendar td{ text-align:center; padding:1px; } #calendar td a{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background:#fc8d8f; color: #ffffff; display:block; } /*-計數器-*/ #counter .box-text li{ border: 0px; } /* ------------------------------------------------------------------------------------------------------------------------------ 頁尾 */ #footer{ line-height: 200%; clear: both; padding: 30px 0px 30px 0px; } /*--頁尾-自訂聲明--*/ #footer p{ text-align: center; padding: 5px 0px 5px 0px; } /*--頁尾-pixnet連結--*/ #footer #bottom{ text-align: center; } #footer #bottom:before{ display: block; content: "Copyright © CSS designed by Wei @ Dribs & Drabs, http://www.dribs-drabs.com/blog"; }

版面設定

1 - 關於側欄1的元件，放置在版面左方的隱藏式欄位裡

2 - 關於側欄2的元件，放置在文章正上方的下拉式選單

3 - 若文章內文圖片寬度超過800px，會自動將圖片縮放成寬度800px

Q&A

*   如果上述沒有你的問題，可參考另一篇 Q&A問答集

更新

2014/06/10  解決痞客邦新增快捷功能BAR造成破壞版面的問題

2014/06/24  解決側欄2元件名稱長度的限制

2014/07/21  解決痞客邦快捷功能BAR小改版導致版面錯位

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

2015/02/23  解決通知訊息超出頁面的問題

2015/03/10  解決快捷功能BAR錯位的問題

2015/12/14  解決在手機上版面錯位的問題

2016/07/23  解決新增快捷功能BAR跑位問題

2016/10/22  解決新增快捷功能BAR跑位問題

♥ 更多部落格版面分享: http://www.dribs-drabs.com/blog/post/434454491

♥ 部落格CSS語法教學: http://www.dribs-drabs.com/blog/post/437150992