分享 | 痞客邦PIXNET部落格版面樣式CSS - GIFT @ Dribs & Drabs 點點滴滴

小清新風格，特地設計給非圖文式部落格使用

此版型將側欄固定在部部落格上方，並設計成下拉式選單方便使用者選取

首頁模式，點擊文章區塊任一處都可進入文章模式閱讀該篇文章，滑鼠移至文章處會變色

版面右方有三張圓形圖片，可自行替換，黑色框線與圖片是分開設計，所以不用擔心換圖還需要後製

詳細替換方式請看下方 " 版面設定 - 3 "

文章模式，按圖可放大

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

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

CSS語法

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

/* Copyright © CSS designed by Wei @ Dribs & Drabs, http://www.dribs-drabs.com/blog 主要色碼: #8fbeee(天藍) */ /* ------------------------------------------------------------------------------------------------------------------------------ 三個圈圈圖片設定 */ /*左圖，寬度150px*/ #banner .skiplink{background: url(http://pic.pimg.tw/weilife/1409060104-3433313852.png) top left;} /*中間，寬度210px*/ #blog-category{background: url(http://pic.pimg.tw/weilife/1409060104-3433313852.png) top right;} /*右圖，寬度180px*/ #navigation #link-blog{background: url(http://pic.pimg.tw/weilife/1409060104-3433313852.png) bottom right;} /* ------------------------------------------------------------------------------------------------------------------------------ 清空 */ #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 ; } .article-content p{ margin-bottom:1em; } 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; } a{ color:#000000; text-decoration:none ; } a:hover{ text-decoration:none ; } /* ------------------------------------------------------------------------------------------------------------------------------ 部落格前置設定 */ body{ font-size: 11pt ; font-family: "Times New Roman" ; min-width: 820px; position: relative; } #container{ width: 820px; margin: 0px auto; } /* ------------------------------------------------------------------------------------------------------------------------------ 快捷功能BAR */ .topbar__logo{display: none;} .topbar__search{display: none;} .topbar__announce{display: none;} .topbar, .topbar__lang__switcher, .topbar__nav, .topbar__notification__counter, .topbar__user__avator, .topbar__user__login{ background-image: none !important; } .topbar{ width: 200px !important; min-width: 200px !important; background-color: transparent !important; box-shadow: none; -webkit-box-shadow: none; position: absolute; top:70px; left: 50%; margin-left: -410px; } .topbar__nav{ left: 0px ; } .topbar__announce{ position: absolute !important; top: 5px !important; left: 0px !important; } .topbar__notification__counter:after{ top: 0px !important; width: 40px !important; height: 40px !important; line-height: 40px !important; left: 2px; box-shadow: 1px 1px 2px #888; } .topbar__notification .topbar__dropdown-lists:before{ margin-left: -205px !important; } .topbar__notification .topbar__dropdown-lists:after{ margin-left: -205px !important; } .topbar__notification__lists{ position: absolute !important; top: 55px !important; left: 0px !important; } .topbar__user{ border-left: 0px !important; border-right: 0px !important; position: absolute !important; top: 0px !important; left: 115px !important; } .topbar__user__avator__img{ box-shadow: 1px 1px 2px #888; } .topbar__user:hover .topbar__user__avator__img { box-shadow: 1px 1px 2px #888 !important; } .topbar__lang{ text-align: center !important; width: 40px; height: 40px; background: #ccc; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; position: absolute !important; top: 0px !important; left: 70px !important; box-shadow: 1px 1px 2px #888; } .topbar__lang:hover{ background: #8fbeee; } .topbar__lang a{ color: #ffffff !important; } .topbar__lang__lists a{ color: #000 !important; } .topbar__search-container{display:none;} .topbar__related-article__cat-name{display: none !important;} .topbar__lang__switcher{ line-height: 40px !important; } .topbar__user__avator__img{ width: 36px !important; height: 36px !important; margin-top: 0px !important; } .topbar__user::before{ border-left: 0px; } .topbar__user::after{ border-right: 0px; } /* ------------------------------------------------------------------------------------------------------------------------------ 部落格資訊 */ #header{ margin-top: 10px; position: relative; height: 390px; width: 100%; } #banner{} #banner h1 a{ position: absolute; bottom: 0px; left: 0px; font-size: 45px; color: #666; z-index: 10; letter-spacing: 2px; } #banner h1 a:hover{ color: #8fbeee; } #banner h2{ padding-left: 5px; position: absolute; bottom: 60px; color: #888; z-index: 10; } /*--四個連結: 部落格、相簿、名片、留言--*/ #navigation{ z-index: 9; width: 800px; height: 390px; position: absolute; top: -7px; right: 20px; font-size: 10pt; background: url(http://pic.pimg.tw/weilife/1409060105-1708640635.png) top right no-repeat; } #navigation li{ margin: 70px 10px 10px 10px; float: left; display: block; width: 40px; height: 40px; line-height: 40px; text-align: center; background: #ccc; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; box-shadow: 1px 1px 2px #888; text-align: center; } #navigation li a{ color: #ffffff; } #navigation li:hover{ background: #8fbeee; } /*--圈圈&圖--*/ #banner .skiplink{ display: block; position: absolute; top: 133px; left: 310px; width: 150px; height: 150px; border: 4px solid #000; box-shadow: 1px 1px 2px #888; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; } #banner .skiplink a{display: none;} #blog-category{ display: block; position: absolute; top: 33px; left: 460px; width: 210px; height: 210px; font-size: 0px; border: 4px solid #000; box-shadow: 1px 1px 2px #888; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; } #blog-category a{display: none;} #navigation #link-blog{ margin: 0px; display: block; position: absolute; top: 173px; left: 600px; width: 180px; height: 180px; font-size: 0px; border: 4px solid #000; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; } /* ------------------------------------------------------------------------------------------------------------------------------ 主要內文 */ #spotlight{ z-index: 10; line-height: 200%; padding-bottom: 20px; border-bottom: #aaa dotted 1px; } #spotlight h5{ display: none; } #spotlight #spotlight-text{ color: #888; padding-left: 5px; } .article{ position: relative; padding: 20px 0px 10px 0px; border-bottom: #aaa dotted 1px; } .article:hover{ background: #f4f4f4; } .article-head{ min-height: 81px; font-size: 18px; font-weight: bold; line-height: 180%; padding: 0px 0px 10px 90px; background: url(http://pic.pimg.tw/weilife/1409060105-828853587.png) 10px 0px no-repeat; } .article-head .title h2{ font-weight: bold; } .article-content{ color: #888; line-height: 200%; padding: 0px 10px; } .article-content img{ max-width: 800px; } .article .more a{ position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; display: block; font-size: 0px; } .article-keyword{display: none;} .author{display: none;} .article-footer{display: none;} .page{ padding: 15px; text-align: center; border-bottom: #aaa dotted 1px; } .page a{ display: inline-block; text-align: center; line-height: 25px; width: 25px; height: 25px; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; margin: 0px 10px; background: #eee; box-shadow: 1px 1px 2px #888; } .page a:hover{ position: relative; top: 1px; left: 1px; } .page span{ display: inline-block; text-align: center; line-height: 25px; width: 25px; height: 25px; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; margin: 0px 10px; background: #eee; color: #999; box-shadow: 1px 1px 2px #888; } /* ------------------------------------------------------------------------------------------------------------------------------ 主要內文-文章模式 */ #article-main .article{ padding-bottom: 0px; } #article-main .article:hover{ background: none; } #article-main .bookmark{ padding: 0px 0px 10px 10px; } #article-main .article-keyword{ display: block; line-height: 250%; } #article-main .author{ display: block; line-height: 200%; padding: 0px 10px; } #article-main .article-footer{ display: block; line-height: 200%; padding: 10px; background: #f4f4f4; border-top: dotted 1px #aaa; } .back-to-top{ text-align: right; font-size: 16px; } .refer>li:before{ content: "►"; padding-right: 5px; } .history h6:before{ content: "►"; padding-right: 5px; } .history li:before{ content: "●"; padding-left: 15px; padding-right: 5px; } /* ------------------------------------------------------------------------------------------------------------------------------ 文章區塊 */ #pixblogad{display:none;} /* ------------------------------------------------------------------------------------------------------------------------------ 分類/列表模式 */ .main-list table{ width: 800px; } .main-list tr{ border-bottom: 1px dotted #aaa; } .main-list tr:hover{ background: #f4f4f4; } .main-list th,td{ padding: 7px; } .article-area-title{ padding: 10px; border-bottom: 1px dotted #aaa; } .article-area-title:before{ content: "►"; padding-right: 5px; } #view-mode{ padding: 10px; border-bottom: 1px dotted #aaa; } #view-mode a{ color: #8fbeee; } #view-mode #display:before{ content: "►"; padding-right: 5px; } /* ------------------------------------------------------------------------------------------------------------------------------ 留言區塊 */ /*--僅引用區塊--*/ #trackback-box{display: none;} /*--引用列表標題--*/ #trackback-title{} /*--引用內容區塊--*/ #trackback-text{} /*--單一引用--*/ #trackback-box .single-post{} /*--引用及回應列表全部的大範圍--*/ #user-post{ margin-top: 15px; } #comment-title{ padding: 10px 0px 10px 35px; background: url(http://pic.pimg.tw/weilife/1390024476-1925841079.png) 10px 6px no-repeat; text-align: left; } .post-comment{ padding: 2px 0px 20px 35px; background: url(http://pic.pimg.tw/weilife/1390024476-3525513496.png) 10px top no-repeat; border-bottom: dotted #aaa 1px; } /*--單一引用+單一回應--*/ .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; } /*--------------------.post-info 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: 820px; padding: 0px; } #container #main #content #user-post #comment-box #comment-area-2 { width: 780px; 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; } /* ------------------------------------------------------------------------------------------------------------------------------ 側欄 */ #links{} .box-title img{display: none;} /* ------------------------------------------------------------------------------------------------------------------------------ 側欄1 */ #links-row-1{ display: none; } /* ------------------------------------------------------------------------------------------------------------------------------ 側欄2 */ #links-row-2{ z-index: 99999999; width: 100%; position: fixed; background: #000; top: 0px; left: 0px; text-align: center; } #links-row-2 .box{ text-align: left; display: inline-block; } #links-row-2 .box-title{ color: #ffffff; padding: 18px; position: relative; } #links-row-2 .box:hover .box-title:after{ font-size: 16px; content: "▲"; color: #eee; position: absolute; bottom: -5px; left: 50%; margin-left: -6px; } #links-row-2 .box-text{ display: none; padding: 10px; min-width: 200px; position: absolute; background: #eee; border-bottom: 4px solid #000; line-height: 180%; color: #777; z-index: 99; } #links-row-2 .box:hover .box-text{ display: block; } /* ------------------------------------------------------------------------------------------------------------------------------ 側欄元件定義 */ #hot-article li{padding: 3px; border-bottom: dotted 1px #aaa;} #recent-article li{padding: 3px; border-bottom: dotted 1px #aaa;} #mylink li{padding: 3px; border-bottom: dotted 1px #aaa;} #latest-comment li{padding: 3px; border-bottom: dotted 1px #aaa;} #latest-trackback li{padding: 3px; border-bottom: dotted 1px #aaa;} /*--文章分類--*/ #category h6{ padding: 5px 0px; } #category h6 img{ padding-right: 5px; } #category li{ padding: 3px 3px 3px 18px; border-bottom: dotted 1px #aaa; } /*--搜尋--*/ #search li{ background: none !important; padding: 5px !important; border: 0px !important; } #search-target{ width: 100%; border: 0px; background: #ffffff; } #search-submit{ width: 100%; text-align: center; border: 0px; background: transparent; } /*-日曆-*/ #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:#8fbeee; color: #ffffff; display:block; } /*--文章彙整--*/ #archive {} #archive .box-title{} #archive .box-text{} #archive .box-text select{} #archive .box-more{ padding-top: 10px; } /*-個人資訊-*/ #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; } /*-訪客列表-*/ #visitor{} #visitor .box-text{} #visitor .box-text ul:after { content: " "; display: block; height: 0px; clear: both; overflow: hidden; } #visitor .box-text li { display: inline-block; padding:5px; } #visitor .box-text img{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; width: 40px; height: 40px; } /*-我去誰家-*/ #crumb{} #crumb .box-text{} #crumb .box-text li { display: inline-block; padding:5px; } #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 { display: inline-block; padding:5px; } #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; } /* ------------------------------------------------------------------------------------------------------------------------------ 頁尾 */ #footer{ clear: both; line-height: 200%; padding: 20px 0px; 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 - 版面最大寬度限制800px

3 - 首頁圖片替換方法，在CSS語法裡版權宣告下方有個"三張圓形圖片設定"，將網址替換掉即可

4 - 建議將"公告版位"開啟，版面會比較漂亮

5 - 套用若後發現上方的圓形變成方形，請升級你的IE! 或是改用其他瀏覽器

Q&A

1 - 為什麼三個圓形圖片都是設定同個網址，卻不同圖案？

我將三張照片並在同一個圖檔裡，利用設定圖檔的位置秀出不同的照片，原始圖檔是以下這張

Blog_02