分享 | 痞客邦PIXNET部落格版面樣式CSS – 拍立得相本

本樣式第一個特點為每篇文章以拍立得的樣式顯示，讓瀏覽者觀看部落格一目了然。第二及第三個特點為部落格上方的下拉式側欄與左方的隱藏式側欄，收納側欄元件，讓版面乾乾淨淨好閱讀。常用相片或圖文寫文章的部落格，快來套用吧!! 

版型

使用規訂

CSS語法

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

/*<br /><br />CSS desinged by Wei @ Dribs & Drabs, https://www.dribs-drabs.com/blog<br /><br />主要色碼: #bce2e8(淺藍)、#007bbb(藍)<br /><br />*/<br /><br />/* —————————————————————————————————————————— 清空 */<br /><br />#comment-form table{<br /><br />margin: 0 auto ;<br /><br />}<br /><br />#comment-form td , #comment-form th{<br /><br />border: 0px solid #000 ;<br /><br />padding: 0px 0px;<br /><br />}<br /><br />#comment-form input#send-comment{<br /><br />padding: 0px 0px ;<br /><br />}<br /><br />body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {<br /><br />margin:0;<br /><br />padding:0;<br /><br />}<br /><br />table {<br /><br />border-collapse:collapse;<br /><br />border-spacing:0;<br /><br />}<br /><br />fieldset,img {<br /><br />border:0;<br /><br />}<br /><br />address,caption,cite,code,dfn,em,th,var {<br /><br />font-style:normal;<br /><br />font-weight:normal;<br /><br />}<br /><br />ol,ul {<br /><br />list-style:none;<br /><br />}<br /><br />caption,th {<br /><br />text-align:left;<br /><br />}<br /><br />h1,h2,h3,h4,h5,h6 {<br /><br />font-size:100%;<br /><br />font-weight:normal;<br /><br />}<br /><br />q:before,q:after {<br /><br />content:”;<br /><br />}<br /><br />abbr,acronym {<br /><br />border:0;<br /><br />}<br /><br />pre{<br /><br />font-size: 1em ;<br /><br />}<br /><br />.article-content{<br /><br />_height: 1% ;<br /><br />overflow: hidden ;<br /><br />_overflow: none;<br /><br />}<br /><br />/* —————————————————————————————————————————— 部落格前置設定 */<br /><br />body{<br /><br />font-size: 12px ;<br /><br />font-family:”Arial” ;<br /><br />min-width: 1200px;<br /><br />background: url(http://pic.pimg.tw/weilife/1394713740-3347444203.webp);<br /><br />}<br /><br />#container{<br /><br />width: 1100px;<br /><br />margin: 0 auto;<br /><br />}<br /><br />a{<br /><br />color:#000000;<br /><br />text-decoration:none ;<br /><br />}<br /><br />a:hover{<br /><br />text-decoration:none ;<br /><br />}<br /><br />textarea{<br /><br />font-size: 12px;<br /><br />}<br /><br />/* —————————————————————————————————————————— 快捷功能BAR */<br /><br />.topbar__logo{display: none;}<br /><br />.topbar__search{display: none;}<br /><br />.topbar__announce{display: none;}<br /><br />.topbar{<br /><br />width: 205px !important;<br /><br />min-width: 140px !important;<br /><br />z-index: 1 !important;<br /><br />box-shadow: none !important;<br /><br />background: transparent !important;<br /><br />left: 50% !important;<br /><br />margin-left: -540px;<br /><br />}<br /><br />.topbar__notification .topbar__dropdown-lists{<br /><br />left: -10px !important;<br /><br />}<br /><br />.topbar__notification .topbar__dropdown-lists:before{<br /><br />margin-left: -195px !important;<br /><br />}<br /><br />.topbar__notification .topbar__dropdown-lists:after{<br /><br />margin-left: -195px !important;<br /><br />}<br /><br />.topbar–fixed{<br /><br />position: absolute;<br /><br />}<br /><br />.topbar__lang .topbar__lang__switcher, .topbar__notification .topbar__notification__counter, .topbar__user .topbar__user__avator, .topbar__user .topbar__user__login{<br /><br />color: #bbb;<br /><br />}<br /><br />.topbar__search-container {display: none;}<br /><br />#blog-category{ /*白色的底*/<br /><br />width: 1080px;<br /><br />height: 60px;<br /><br />position: absolute;<br /><br />top: -60px;<br /><br />left: 10px;<br /><br />background: #ffffff;<br /><br />-webkit-border-radius: 10px;<br /><br />-moz-border-radius: 10px;<br /><br />border-radius: 10px;<br /><br />box-shadow: 2px 2px 5px -2px rgba(20%,20%,40%,0.7);<br /><br />font-size: 0px;<br /><br />}<br /><br />.topbar__related-article__cat-name{display: none !important;}<br /><br />/* —————————————————————————————————————————— 部落格資訊 */<br /><br />#header{<br /><br />width: 1110px;<br /><br />margin: 0 auto;<br /><br />padding: 45px 0px 45px 0px;<br /><br />position: relative;<br /><br />}<br /><br />#banner{<br /><br />text-align: center;<br /><br />}<br /><br />#banner h1{<br /><br />font-size: 40px;<br /><br />}<br /><br />#banner h2{<br /><br />color: #555;<br /><br />padding-top: 10px;<br /><br />line-height: 150%;<br /><br />}<br /><br />/*–跳到主文–*/<br /><br />#banner .skiplink{display: none;}<br /><br />/* —————————————————————————————————————————— 連結區塊 */<br /><br />#navigation{<br /><br />margin: 0 auto;<br /><br />width: 250px;<br /><br />border-top: 1px dotted #999;<br /><br />padding-top: 7px;<br /><br />margin-top: 7px;<br /><br />text-align: center;<br /><br />}<br /><br />/*–其他服務連結區塊內的所有連結–*/<br /><br />#navigation a:before{<br /><br />content: “● “;<br /><br />padding-left: 6px;<br /><br />}<br /><br />#navigation li{<br /><br />display: inline-block;<br /><br />padding-right: 6px;<br /><br />}<br /><br />#navigation a{<br /><br />color: #555;<br /><br />}<br /><br />#navigation a:hover{<br /><br />color: #007bbb;<br /><br />}<br /><br />/* —————————————————————————————————————————— 主要內文 */<br /><br />#main{clear: both;}<br /><br />/*–主要內容區–*/<br /><br />#content{<br /><br />width: 1110px;<br /><br />margin: 0 auto;<br /><br />}<br /><br />/*–公告區塊–*/<br /><br />#spotlight{<br /><br />margin: 0px 15px 30px 15px;<br /><br />padding: 15px;<br /><br />border-top: dotted #999 1px;<br /><br />border-bottom: dotted #999 1px;<br /><br />}<br /><br />/*–公告注目區標題–*/<br /><br />#spotlight h5{<br /><br />font-weight: bold;<br /><br />padding-bottom: 10px;<br /><br />}<br /><br />/* —————————————————————————————————————————— 首頁模式 */<br /><br />.article{<br /><br />float: left;<br /><br />width: 300px;<br /><br />height: 360px;<br /><br />padding: 20px;<br /><br />margin: 15px;<br /><br />-webkit-border-radius: 10px;<br /><br />-moz-border-radius: 10px;<br /><br />border-radius: 10px;<br /><br />box-shadow: 2px 2px 5px -2px rgba(20%,20%,40%,0.7);<br /><br />background: #ffffff;<br /><br />overflow : hidden;<br /><br />position: relative;<br /><br />}<br /><br />.article:hover{<br /><br />top: 1px;<br /><br />left: 1px;<br /><br />box-shadow: 1px 1px 5px -2px rgba(20%,20%,40%,0.7);<br /><br />}<br /><br />.article-head{<br /><br />padding-bottom: 5px;<br /><br />}<br /><br />/*–發表時間–*/<br /><br />.publish{<br /><br />font-weight: bold;<br /><br />width: 300px;<br /><br />text-align: center;<br /><br />padding-bottom: 2px;<br /><br />}<br /><br />/*–月份–*/<br /><br />.month{<br /><br />padding-right: 5px;<br /><br />}<br /><br />/*–日期–*/<br /><br />.date{<br /><br />font-size: 25px;<br /><br />font-weight: bold;<br /><br />}<br /><br />/*–星期–*/<br /><br />.day{display: none;}<br /><br />/*–年–*/<br /><br />.year{<br /><br />padding-left: 5px;<br /><br />}<br /><br />/*–時間–*/<br /><br />.time{display: none;}<br /><br />/*–文章標題–*/<br /><br />.title h2{<br /><br />width: 300px;<br /><br />white-space: nowrap;<br /><br />overflow:hidden;<br /><br />text-overflow:ellipsis;<br /><br />text-align: center;<br /><br />border-top: dotted #ccc 1px;<br /><br />padding: 10px 0px 10px 0px;<br /><br />}<br /><br />.title h2 a{<br /><br />font-weight: bold;<br /><br />}<br /><br />/*–文章標題前的密碼圖示/隱藏圖示/好友保護圖示–*/<br /><br />.title h2 img{<br /><br />display: none;<br /><br />}<br /><br />/*–文章內容–*/<br /><br />.article-content{<br /><br />color: #555;<br /><br />padding-top: 210px;<br /><br />line-height: 200%;<br /><br />}<br /><br />.article-content a{<br /><br />color: #007bbb;<br /><br />}<br /><br />.article-content a:hover{<br /><br />position: relative;<br /><br />top: 1px;<br /><br />left: 1px;<br /><br />}<br /><br />.article-content p{<br /><br />line-height: 200%;<br /><br />}<br /><br />.article-content p:nth-child(n+5){<br /><br />display: none;<br /><br />}<br /><br />#blog-main .article-content img{<br /><br />display: block;<br /><br />width: 300px;<br /><br />height: auto;<br /><br />position: absolute;<br /><br />top: 90px;<br /><br />left: 20px;<br /><br />clip:rect(0px,300px,200px,0px);<br /><br />}<br /><br />#category-main .article-content img{<br /><br />display: block;<br /><br />width: 300px;<br /><br />height: auto;<br /><br />position: absolute;<br /><br />top: 90px;<br /><br />left: 20px;<br /><br />clip:rect(0px,300px,200px,0px);<br /><br />}<br /><br />.more a{<br /><br />display: none;<br /><br />}<br /><br />.article:hover .more a{<br /><br />display: block;<br /><br />width: 100%;<br /><br />height: 100%;<br /><br />display: block;<br /><br />position: absolute;<br /><br />top: 0px;<br /><br />left: 0px;<br /><br />font-size: 0px;<br /><br />}<br /><br />/*–發表時間–*/<br /><br />.author{display:none;}<br /><br />/*–單一篇文章最下方–*/<br /><br />.article-footer{<br /><br />line-height: 170%;<br /><br />}<br /><br />/*–此篇文章分類 : 個人分類+全站分類–*/<br /><br />.refer{display:none}<br /><br />/*–歷史上的今天–*/<br /><br />.history{display:none;}<br /><br />/*–轉寄文章–*/<br /><br />.forward{display:none;}<br /><br />/*–回到頁首–*/<br /><br />.back-to-top{display:none;}<br /><br />.article-keyword{display:none;}<br /><br />/* —————————————————————————————————————————— 文章模式 */<br /><br />#article-main #content{<br /><br />width: 1080px;<br /><br />}<br /><br />#article-main .article{<br /><br />float: none;<br /><br />width: 900px;<br /><br />height: auto;<br /><br />padding: 50px 90px;<br /><br />margin: 15px 0px 0px 0px;<br /><br />}<br /><br />#article-main .article:hover{<br /><br />top: 0px;<br /><br />left: 0px;<br /><br />box-shadow: 2px 2px 5px -2px rgba(20%,20%,40%,0.7);<br /><br />}<br /><br />#article-main .publish{<br /><br />font-size: 16px;<br /><br />padding: 5px 0px;<br /><br />text-align: left;<br /><br />}<br /><br />#article-main .date{<br /><br />font-size: 16px;<br /><br />font-weight: bold;<br /><br />}<br /><br />#article-main .title h2{<br /><br />width: 100%;<br /><br />height: auto;<br /><br />font-size: 16px;<br /><br />padding: 5px 0px 15px 0px;<br /><br />white-space: normal;<br /><br />overflow: visible;<br /><br />text-overflow: clip;<br /><br />position: static;<br /><br />text-align: left;<br /><br />border: 0px;<br /><br />}<br /><br />#article-main .title h2 img{<br /><br />position: absolute;<br /><br />top: 80px;<br /><br />right: 112px;<br /><br />display: block;<br /><br />}<br /><br />#article-main .article-content{<br /><br />padding: 0px;<br /><br />border-bottom: dotted #999 1px;<br /><br />padding-bottom: 50px;<br /><br />margin-bottom: 50px;<br /><br />background: none;<br /><br />}<br /><br />#article-main .article-content p{<br /><br />white-space: normal;<br /><br />overflow: visible;<br /><br />text-overflow: clip;<br /><br />border-bottom: 0px;<br /><br />display: block;<br /><br />padding: 2px 0px;<br /><br />}<br /><br />#article-main .article-content img{<br /><br />max-width: 900px;<br /><br />}<br /><br />/*–發表時間–*/<br /><br />#article-main .author{display: block;}<br /><br />/*–單一篇文章最下方–*/<br /><br />#article-main .article-footer{}<br /><br />/*–此篇文章分類 : 個人分類+全站分類–*/<br /><br />#article-main .refer{display: block;}<br /><br />/*–歷史上的今天–*/<br /><br />#article-main .history{display: block;}<br /><br />/*–轉寄文章–*/<br /><br />#article-main .forward{display: block;}<br /><br />/*–回到頁首–*/<br /><br />#article-main .back-to-top{display: block;}<br /><br />#article-main .article-keyword{display: block;}<br /><br />/*–加入書籤–*/<br /><br />#article-main .bookmark{}<br /><br />/* —————————————————————————————————————————— 分類/列表模式 */<br /><br />h3{<br /><br />text-align: center;<br /><br />padding: 20px 0px 3px 0px;<br /><br />}<br /><br />#view-mode{<br /><br />text-align: center;<br /><br />padding: 3px 0px 20px 0px;<br /><br />}<br /><br />#view-mode a:hover{<br /><br />position: relative;<br /><br />top: 1px;<br /><br />left: 1px;<br /><br />}<br /><br />/*–列表–*/<br /><br />.main-list{<br /><br />background: #ffffff;<br /><br />margin: 20px 15px;<br /><br />padding: 90px;<br /><br />-webkit-border-radius: 10px;<br /><br />-moz-border-radius: 10px;<br /><br />border-radius: 10px;<br /><br />box-shadow: 2px 2px 6px -2px rgba(20%,20%,40%,0.7);<br /><br />}<br /><br />.main-list table{<br /><br />width: 100%;<br /><br />}<br /><br />.main-list td.list-date{<br /><br />width: 14%;<br /><br />}<br /><br />.main-list td.list-title{<br /><br />width: 70%;<br /><br />}<br /><br />.main-list td.list-visit{<br /><br />width: 8%;<br /><br />text-align: center;<br /><br />}<br /><br />.main-list th.list-visit{<br /><br />text-align: center;<br /><br />}<br /><br />.main-list td.list-comment{<br /><br />width: 8%;<br /><br />text-align: center;<br /><br />}<br /><br />.main-list th.list-comment{<br /><br />text-align: center;<br /><br />}<br /><br />.main-list tr:hover{<br /><br />background:#efefef;<br /><br />}<br /><br />.main-list th{<br /><br />color:#000000;<br /><br />padding:10px;<br /><br />border:0px;<br /><br />text-align: left;<br /><br />-moz-box-shadow: 0 2px 2px -2px #ccc;<br /><br />-webkit-box-shadow: 0 2px 2px -2px #ccc;<br /><br />border-bottom: dotted #bbb 1px;<br /><br />}<br /><br />.main-list td{<br /><br />border:0px;<br /><br />padding:10px;<br /><br />-moz-box-shadow: 0 2px 2px -2px #ccc;<br /><br />-webkit-box-shadow: 0 2px 2px -2px #ccc;<br /><br />border-bottom: dotted #aaa 1px;<br /><br />}<br /><br />/*–頁數–*/<br /><br />.page{<br /><br />clear: both;<br /><br />padding: 30px 0px 10px 0px;<br /><br />text-align: center;<br /><br />}<br /><br />.page a{<br /><br />padding: 0px 5px 0px 5px;<br /><br />}<br /><br />.page span{<br /><br />padding: 0px 5px 0px 5px;<br /><br />color: #777;<br /><br />}<br /><br />.page a:hover{<br /><br />position: relative;<br /><br />top: 1px;<br /><br />left: 1px;<br /><br />}<br /><br />/* —————————————————————————————————————————— 留言區塊 */<br /><br />/*–僅引用區塊–*/<br /><br />#trackback-box{display: none;}<br /><br />/*–引用及回應列表全部的大範圍–*/<br /><br />#user-post{<br /><br />width: 900px;<br /><br />padding: 50px 90px;<br /><br />background: #ffffff;<br /><br />margin-top: 50px;<br /><br />-webkit-border-radius: 10px;<br /><br />-moz-border-radius: 10px;<br /><br />border-radius: 10px;<br /><br />box-shadow: 2px 2px 6px -2px rgba(20%,20%,40%,0.7);<br /><br />}<br /><br />#comment-title{<br /><br />padding: 30px 0px 10px 50px;<br /><br />background: url(http://pic.pimg.tw/weilife/1390024476-1925841079.png) 20px 27px no-repeat;<br /><br />text-align: left;<br /><br />}<br /><br />.post-comment{<br /><br />padding: 2px 0px 20px 50px;<br /><br />background: url(http://pic.pimg.tw/weilife/1390024476-3525513496.png) 20px top no-repeat;<br /><br />border-bottom: dotted #aaa 1px;<br /><br />}<br /><br />/*–單一引用+單一回應–*/<br /><br />.single-post{<br /><br />padding: 20px;<br /><br />-webkit-transition: background 0.5s ease-out;<br /><br />-moz-transition: background 0.5s ease-out;<br /><br />-o-transition: background 0.5s ease-out;<br /><br />border-bottom: dotted #aaa 1px;<br /><br />position: static;<br /><br />}<br /><br />.single-post:hover{<br /><br />background: #efefef;<br /><br />}<br /><br />.secret{<br /><br />padding: 0px;<br /><br />}<br /><br />.secret li{<br /><br />font-size: 0px;<br /><br />padding: 27px;<br /><br />background: url(http://pic.pimg.tw/weilife/1395323895-307323769.png) 20px 27px no-repeat;<br /><br />-webkit-transition: none;<br /><br />-moz-transition: none;<br /><br />-o-transition: none;<br /><br />}<br /><br />.post-info{<br /><br />position: relative;<br /><br />top: 1px;<br /><br />left: 35px;<br /><br />font-weight: bold;<br /><br />z-index: 10;<br /><br />}<br /><br />.post-info a:hover{<br /><br />position: relative;<br /><br />top: 1px;<br /><br />left: 1px;<br /><br />}<br /><br />.post-photo{<br /><br />position: relative;<br /><br />top: -20px;<br /><br />}<br /><br />.post-photo img{<br /><br />width: 25px;<br /><br />height: 25px;<br /><br />}<br /><br />.post-text{<br /><br />padding: 0px 0px 0px 35px;<br /><br />position: relative;<br /><br />top: -10px;<br /><br />}<br /><br />.reply-text{<br /><br />color: #888;<br /><br />padding: 2px 0px 0px 35px;<br /><br />background: url(http://pic.pimg.tw/weilife/1381057934-3628601167.webp) 20px top repeat-y;<br /><br />}<br /><br />.reply-text p{<br /><br />padding-top: 10px;<br /><br />padding-bottom: 2px;<br /><br />}<br /><br />.reply-text a{<br /><br />color: #888;<br /><br />}<br /><br />.reply-text a:hover{<br /><br />position: relative;<br /><br />top: 1px;<br /><br />left: 1px;<br /><br />}<br /><br />/*——————–icon————–*/<br /><br />.floor{<br /><br />padding-right: 5px;<br /><br />}<br /><br />.user-name a{<br /><br />padding-left: 13px;<br /><br />margin: 0 10px 0 5px;<br /><br />background: url(http://pic.pimg.tw/weilife/1381045870-1786288759.png) top left no-repeat;<br /><br />}<br /><br />.user-name img{<br /><br />display: none;<br /><br />}<br /><br />.homepage{<br /><br />background: url(http://pic.pimg.tw/weilife/1381045870-1646743796.png) center center no-repeat;<br /><br />}<br /><br />.homepage img{<br /><br />filter:alpha(opacity=0);<br /><br />-moz-opacity:0;<br /><br />opacity: 0;<br /><br />}<br /><br />.hide-message{<br /><br />background: url(http://pic.pimg.tw/weilife/1381045870-893869105.png) center center no-repeat;<br /><br />}<br /><br />.hide-message img{<br /><br />filter:alpha(opacity=0);<br /><br />-moz-opacity:0;<br /><br />opacity: 0;<br /><br />}<br /><br />.show-message{<br /><br />background: url(http://pic.pimg.tw/weilife/1381045870-1392687776.png) center center no-repeat;<br /><br />}<br /><br />.show-message img{<br /><br />filter:alpha(opacity=0);<br /><br />-moz-opacity:0;<br /><br />opacity: 0;<br /><br />}<br /><br />.delete-message{<br /><br />background: url(http://pic.pimg.tw/weilife/1381045869-3234832763.png) center center no-repeat;<br /><br />}<br /><br />.delete-message img{<br /><br />filter:alpha(opacity=0);<br /><br />-moz-opacity:0;<br /><br />opacity: 0;<br /><br />}<br /><br />.spam-message{<br /><br />background: url(http://pic.pimg.tw/weilife/1381045869-3826508189.png) center center no-repeat;<br /><br />}<br /><br />.spam-message img{<br /><br />filter:alpha(opacity=0);<br /><br />-moz-opacity:0;<br /><br />opacity: 0;<br /><br />}<br /><br />.reply-message{<br /><br />background: url(http://pic.pimg.tw/weilife/1381045870-4208701959.png) center center no-repeat;<br /><br />}<br /><br />.reply-message img{<br /><br />filter:alpha(opacity=0);<br /><br />-moz-opacity:0;<br /><br />opacity: 0;<br /><br />}<br /><br />.reply-text .comment-icon{<br /><br />display: none;<br /><br />}<br /><br />/*撰寫留言區*/<br /><br />#container #main #content #user-post #comment-box #comment-area {<br /><br />width: 600px;<br /><br />padding: 0px;<br /><br />}<br /><br />#container #main #content #user-post #comment-box #comment-area-2 {<br /><br />width: 560px;<br /><br />background: #e6e6e6;<br /><br />padding: 20px;<br /><br />border: 0px;<br /><br />}<br /><br />#container #main #content #user-post #comment-box #comment-area iframe{<br /><br />position: absolute ;<br /><br />top:20px;<br /><br />right: 20px;<br /><br />float:right;<br /><br />}<br /><br />#container #main #content #user-post #comment-box .comment-identity{<br /><br />width: 560px;<br /><br />background:url(http://pic.pimg.tw/weilife/1368612429-2456652207.png) repeat-x bottom left;<br /><br />border: 0px;<br /><br />padding: 0px;<br /><br />padding-bottom: 5px;<br /><br />}<br /><br />#container #main #content #user-post #comment-box .identity-login img.photo{<br /><br />border: 0px;<br /><br />-webkit-border-radius: 5px;<br /><br />-moz-border-radius: 5px;<br /><br />border-radius: 5px;<br /><br />}<br /><br />#container #main #content #user-post #comment-box .comment-body{<br /><br />border: 0px;<br /><br />padding: 0px;<br /><br />}<br /><br />#container #main #content #user-post #comment-box input.comment-name{<br /><br />background: #F2F2F2;<br /><br />width: 550px;<br /><br />border: 0px;<br /><br />padding: 5px;<br /><br />margin: 0px;<br /><br />margin-bottom: 10px;<br /><br />}<br /><br />#container #main #content #user-post #comment-box .comment-textarea{<br /><br />background: #F2F2F2;<br /><br />width: 560px;<br /><br />border: 0px;<br /><br />padding: 0px;<br /><br />padding-bottom: 2px;<br /><br />margin: 0px;<br /><br />margin-bottom: 5px;<br /><br />-webkit-border-radius: 5px;<br /><br />-moz-border-radius: 5px;<br /><br />border-radius: 5px;<br /><br />}<br /><br />#container #main #content #user-post #comment-box .comment-textarea textarea{<br /><br />background: #F2F2F2;<br /><br />width: 550px;<br /><br />padding: 5px;<br /><br />margin-bottom:5px;<br /><br />}<br /><br />#container #main #content #user-post #comment-box .captcha{<br /><br />background: #F2F2F2;<br /><br />width: 560px;<br /><br />border: 0px;<br /><br />padding: 0px;<br /><br />-webkit-border-radius: 5px;<br /><br />-moz-border-radius: 5px;<br /><br />border-radius: 5px;<br /><br />}<br /><br />#container #main #content #user-post #comment-box .captcha div{<br /><br />position: absolute;<br /><br />top:5px;<br /><br />left: 210px;<br /><br />}<br /><br />#container #main #content #user-post #comment-box .captcha input{<br /><br />width: 200px;<br /><br />height: 25px;<br /><br />border: 0px;<br /><br />position: absolute;<br /><br />top:0px;<br /><br />left: 120px;<br /><br />}<br /><br />#container #main #content #user-post #comment-box a.reload-captcha{<br /><br />position: absolute;<br /><br />top:22px;<br /><br />left:0px;<br /><br />background: url(http://pic.pimg.tw/weilife/1368619771-4138190912.png) no-repeat right 4px;<br /><br />}<br /><br />#container #main #content #user-post #comment-box a.reload-captcha:hover{<br /><br />position: absolute;<br /><br />top:22px;<br /><br />left:0px;<br /><br />background:url(http://pic.pimg.tw/weilife/1368619770-3632605094.png) no-repeat right 4px;<br /><br />color: #000000<br /><br />}<br /><br />#container #main #content #user-post #comment-box .comment-extra{<br /><br />background:url(http://pic.pimg.tw/weilife/1368612429-2456652207.png) repeat-x top left;<br /><br />margin: 0px;<br /><br />margin-top: 10px;<br /><br />padding: 0px;<br /><br />padding-top: 10px;<br /><br />}<br /><br />#container #main #content #user-post #comment-box #comment-area button{<br /><br />-webkit-border-radius: 5px;<br /><br />-moz-border-radius: 5px;<br /><br />border-radius: 5px;<br /><br />background: #F2F2F2;<br /><br />border: 0px;<br /><br />}<br /><br />#container #main #content #user-post #comment-box .extra{<br /><br />-webkit-border-radius: 5px;<br /><br />-moz-border-radius: 5px;<br /><br />border-radius: 5px;<br /><br />background: #F2F2F2;<br /><br />padding: 0px;<br /><br />padding-top: 5px;<br /><br />padding-bottom: 5px;<br /><br />margin: 0px;<br /><br />margin-top: 10px;<br /><br />border: 0px;<br /><br />}<br /><br />#container #main #content #user-post #comment-box .extra input {<br /><br />width: 251px;<br /><br />background: #F2F2F2;<br /><br />border: 0px;<br /><br />}<br /><br />/* —————————————————————————————————————————— 側欄 */<br /><br />/*–側邊欄位區–*/<br /><br />#links{<br /><br />clear: both;<br /><br />}<br /><br />.box-text li{<br /><br />display: block;<br /><br />padding: 5px 0px;<br /><br />line-height: 150%;<br /><br />border-bottom: 1px dotted #ccc;<br /><br />}<br /><br />.box h6{<br /><br />padding: 5px 0px;<br /><br />border-bottom: 1px dotted #ccc;<br /><br />}<br /><br />.box-more{<br /><br />padding: 4px 0px 4px 0px;<br /><br />}<br /><br />.box a{<br /><br />color: #007bbb;<br /><br />}<br /><br />.box a:hover{<br /><br />position: relative;<br /><br />top: 1px;<br /><br />left: 1px;<br /><br />}<br /><br />/* —————————————————————————————————————————— 側欄1 > 左方伸縮欄位 */<br /><br />#links-row-1{<br /><br />position: absolute;<br /><br />top: 0px;<br /><br />left: -210px;<br /><br />background: #ffffff;<br /><br />width: 240px;<br /><br />-webkit-transition: left 0.5s ease-out;<br /><br />-moz-transition: left 0.5s ease-out;<br /><br />-o-transition: left 0.5s ease-out;<br /><br />transition: left 0.5s ease-out;<br /><br />z-index: 11;<br /><br />box-shadow: 1px 1px 6px -2px rgba(20%,20%,40%,0.7);<br /><br />padding-bottom: 30px;<br /><br />padding-left: 10px;<br /><br />-webkit-border-bottom-right-radius: 10px;<br /><br />-moz-border-bottom-right-radius: 10px;<br /><br />border-bottom-right-radius: 10px;<br /><br />}<br /><br />#links-row-1:hover{<br /><br />left: 0px;<br /><br />}<br /><br />#links-row-1 .box{<br /><br />width: 180px;<br /><br />padding: 10px;<br /><br />border-top: dotted #999 1px;<br /><br />}<br /><br />#links-row-1 .box-title:before{<br /><br />content: “● “;<br /><br />}<br /><br />#links-row-1 .box-title{<br /><br />font-weight: bold;<br /><br />padding: 0px 0px 10px 0px;<br /><br />}<br /><br />#links-row-1 .box:first-child{<br /><br />padding-right: 40px;<br /><br />background: url(http://pic.pimg.tw/weilife/1402317219-2254195646.png) right 10px no-repeat;<br /><br />border-top: none;<br /><br />}<br /><br />/* —————————————————————————————————————————— 側欄2 > 上方下拉式選單 */<br /><br />#links-row-2{<br /><br />position: absolute;<br /><br />top: 0px;<br /><br />width: 860px;<br /><br />padding-left: 220px;<br /><br />}<br /><br />#links-row-2 .box{<br /><br />display: inline-block;<br /><br />}<br /><br />#links-row-2 .box-title{<br /><br />padding: 18px 20px 15px 20px;<br /><br />color: #555;<br /><br />}<br /><br />#links-row-2 .box-title img{display: none;}<br /><br />#links-row-2 .box:hover .box-title{<br /><br />background: #bce2e8;<br /><br />}<br /><br />#links-row-2 .box-text{<br /><br />display: none;<br /><br />position: absolute;<br /><br />min-width: 200px;<br /><br />padding: 15px;<br /><br />background: #f3f3f2;<br /><br />border-top: 4px solid #bce2e8;<br /><br />box-shadow: 2px 2px 5px -2px rgba(20%,20%,40%,0.7);<br /><br />-webkit-border-bottom-right-radius: 10px;<br /><br />-moz-border-bottom-right-radius: 10px;<br /><br />border-bottom-right-radius: 10px;<br /><br />-webkit-border-bottom-left-radius: 10px;<br /><br />-moz-border-bottom-left-radius: 10px;<br /><br />border-bottom-left-radius: 10px;<br /><br />}<br /><br />#links-row-2 .box:hover .box-text{<br /><br />display: block;<br /><br />}<br /><br />/* —————————————————————————————————————————— 側欄元件定義 */<br /><br />/*-我去誰家-*/<br /><br />#crumb{}<br /><br />#crumb .box-text{}<br /><br />#crumb .box-text ul:after {<br /><br />content: ” “;<br /><br />display: block;<br /><br />height: 0px;<br /><br />clear: both;<br /><br />overflow: hidden;<br /><br />}<br /><br />#crumb .box-text li:before{display:none;}<br /><br />#crumb .box-text li {<br /><br />float: left;<br /><br />padding:5px;<br /><br />background: none;<br /><br />border: 0px;<br /><br />}<br /><br />#crumb .box-text img{<br /><br />-webkit-border-radius: 5px;<br /><br />-moz-border-radius: 5px;<br /><br />border-radius: 5px;<br /><br />width: 40px;<br /><br />height: 40px;<br /><br />}<br /><br />/*-好友列表-*/<br /><br />#friendbox{}<br /><br />#friendbox.box-text{}<br /><br />#friendbox .box-text ul:after {<br /><br />content: ” “;<br /><br />display: block;<br /><br />height: 0px;<br /><br />clear: both;<br /><br />overflow: hidden;<br /><br />}<br /><br />#friendbox .box-text li:before{display:none;}<br /><br />#friendbox .box-text li {<br /><br />float: left;<br /><br />padding:5px;<br /><br />background: none;<br /><br />border: 0px;<br /><br />}<br /><br />#friendbox .box-text img{<br /><br />-webkit-border-radius: 5px;<br /><br />-moz-border-radius: 5px;<br /><br />border-radius: 5px;<br /><br />width: 40px;<br /><br />height: 40px;<br /><br />border: 0px;<br /><br />}<br /><br />#friendbox .box-text a{<br /><br />border: 0px;<br /><br />}<br /><br />/*-訪客列表-*/<br /><br />#visitor{}<br /><br />#visitor .box-text{}<br /><br />#visitor .box-text ul:after {<br /><br />content: ” “;<br /><br />display: block;<br /><br />height: 0px;<br /><br />clear: both;<br /><br />overflow: hidden;<br /><br />}<br /><br />#visitor .box-text li:before{display:none;}<br /><br />#visitor .box-text li {<br /><br />float: left;<br /><br />padding:5px;<br /><br />background: none;<br /><br />border: 0px;<br /><br />}<br /><br />#visitor .box-text img{<br /><br />-webkit-border-radius: 5px;<br /><br />-moz-border-radius: 5px;<br /><br />border-radius: 5px;<br /><br />width: 40px;<br /><br />height: 40px;<br /><br />}<br /><br />*-個人資訊-*/<br /><br />#user-info .box-title{}<br /><br />#user-info .box-text {}<br /><br />#user-info{}<br /><br />#user-info dt{}<br /><br />#user-info dl dd {}<br /><br />#user-info .user-img {<br /><br />margin-bottom:5px;<br /><br />width: 95px;<br /><br />}<br /><br />#user-info .user-img img{<br /><br />-webkit-border-radius: 5px;<br /><br />-moz-border-radius: 5px;<br /><br />border-radius: 5px;<br /><br />padding:0px;<br /><br />border:0px;<br /><br />margin-bottom:5px;<br /><br />}<br /><br />/*-日曆-*/<br /><br />#calendar .box-title{}<br /><br />#calendar .box-text {}<br /><br />#calendar{}<br /><br />#calendar table{<br /><br />width:100%;<br /><br />}<br /><br />#calendar th,<br /><br />#calendar td{<br /><br />text-align:center;<br /><br />padding:1px;<br /><br />}<br /><br />#calendar td a{<br /><br />-webkit-border-radius: 5px;<br /><br />-moz-border-radius: 5px;<br /><br />border-radius: 5px;<br /><br />background:#007bbb;<br /><br />color: #ffffff;<br /><br />display:block;<br /><br />}<br /><br />/*-計數器-*/<br /><br />#counter .box-text li{<br /><br />border: 0px;<br /><br />}<br /><br />/* —————————————————————————————————————————— 頁尾 */<br /><br />#footer{<br /><br />line-height: 200%;<br /><br />clear: both;<br /><br />padding: 30px 0px 30px 0px;<br /><br />}<br /><br />/*–頁尾-自訂聲明–*/<br /><br />#footer p{<br /><br />text-align: center;<br /><br />padding: 5px 0px 5px 0px;<br /><br />}<br /><br />/*–頁尾-pixnet連結–*/<br /><br />#footer #bottom{<br /><br />text-align: center;<br /><br />}<br /><br />#footer #bottom:before{<br /><br />display: block;<br /><br />content: “Copyright © CSS designed by Wei @ Dribs & Drabs, https://www.dribs-drabs.com/blog”;<br /><br />}<br /><br />

版面設定

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

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

3 – 至後台 > 基本/進階設定 > 文章顯示相關設定 > 每頁顯示文章數，調成3的倍數

4 – 若文章內文圖片寬度超過900px，會自動將圖片縮放成寬度900px

5 – 撰寫完章時，請插入”繼續閱讀”，繼續閱讀前的最後一張照片為文章的代表圖示，建議繼續閱讀前放入一張照片即可

6 – 承 5，該張照片長高最佳比例為3:2的橫式照片，若為直式或方形照片在首頁顯示時會被裁切

Q&A

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

更新

2014/06/09  解決痞客邦新增快捷功能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跑位問題