我手寫我口2

樣式分享 | 晴朗好天氣

-

這年頭不曉得還有沒有人在經營痞客邦，
更不曉得有沒有人還在意布置痞客邦的版面。



新年要到了，心血來潮地更新了一下版面與樣式，
這一次走灰藍色的清爽淺色主題。

你喜歡嗎？

-

預覽畫面如下




喜歡的話，下面語法歡迎帶走。
也可以自行修改。

body,div,dl,dt,dd,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; width:100%; } address,caption,cite,code,dfn,th,var { font-style:normal; font-weight:normal; } h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; } q:before,q:after { content:''; } pre { font-size:1em; } ol,ul { margin-left:2em; padding:0; } ol li { list-style:decimal outside; } ul li { list-style:disc outside; } /*文章內文 寬度*/ .article-content { width:780px; overflow:hidden; line-height:200%; padding:0 0 20px; } .article-content p { margin-bottom:1em; } .article-head,.article-head li,.recommended-posts ul,.recommended-posts li,.article-footer ul,.article-footer li,.user-post-text ul,.user-post-text li,.box-text ul,.box-text li { list-style:none; margin:0; padding:0; } #toolbar-box ul,#toolbar-box li { list-style:none; margin:0; } /*更改英文字體*/ body { color:#333; font-size:13px; font-family: Dubai, "LiHei Pro", PMingLiU, sans-serif; line-height:154%; /*最底層底色*/ background-color:#FFF; margin:0; } a { color:#262626; text-decoration:none; } input,textarea { vertical-align:middle; font-family: Dubai, "LiHei Pro", PMingLiU, sans-serif; LETTER-SPACING:1.5pt; font-size:12px; color:#262626; border:1px solid #ddd; background:#f5f5f5; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; padding:2px 5px; } select { font-family:Helvetica, Arial, "LiHei Pro", PMingLiU, sans-serif; font-size:1em; color:#333; border:1px solid #ddd; background:#f5f5f5; padding:2px; } #authority { width:950px; text-align:center; font-size:12px; background:#ddd; -webkit-border-bottom-right-radius:8px; -webkit-border-bottom-left-radius:8px; -moz-border-radius-bottomright:8px; -moz-border-radius-bottomleft:8px; border-bottom-right-radius:8px; border-bottom-left-radius:8px; -moz-box-shadow:1px 1px 2px #aaa; -webkit-box-shadow:1px 1px 2px #aaa; box-shadow:1px 1px 2px #aaa; margin:0 auto; padding:8px 0; } #authority a { color:#333; background:#f5f5f5; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; margin:0 2px; padding:2px 5px; } /*整體上層版面*/ #container3 { overflow:hidden; position:relative; width:1100px; background:#fff; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; margin:15px auto 30px; padding:10px 0 10px; } /*部落格最上面的頁眉，Padding上方空間*/ #header { position:relative; height:300px; padding:0px 0 0; } #login-bar { color:#aaa; position:absolute; top:-20px; right:1px; text-align:right; width:928px; font-size:11px; border-bottom:1px dotted #ccc; padding:0 10px; } #login-bar a:hover { color:#262626; } #banner { height:300px; background:url(https://i.imgur.com/INloZDD.png); } /*部落格名稱*/ #banner h1 { position:absolute; top:50px; left:0px; width:200px; text-align:center; line-height:30px; height:30px; overflow:hidden; font-size:15px; padding:0 20px; } /*部落格簡介、描述*/ #banner h2 { position:absolute; top:90px; left:85px; width:670px; height:40px; line-height:20px; overflow:hidden; font-size:12px; /*左側裝飾性直線*/ border-left:1px solid #000; padding:0 12px; } /*跳到主文*/ .skiplink { position:absolute; top:-20px; left:10px; font-size:11px; } /*隱藏跳到主文*/ .skiplink { display: none; } /*部落格分類*/ #blog-category { position:absolute; top:-20px; left:65px; font-size:11px; color:#aaa; } /*隱藏部落格分類*/ #blog-category { display: none; } /*英文選單 相簿 部落格*/ #navigation { display: none;} #navigation li { float:left; list-style:none; margin:0; } #navigation li a { display:block; width:100%; height:35px; font-size:0; text-indent:-5000px; } #navigation li#link-album { width:60px; } #navigation li#link-blog { width:50px; } #navigation li#link-guestbook { width:85px; } #navigation li#link-profile { width:65px; } /*封面下風的內容主區塊*/ #main { _height:1%; overflow:hidden; _overflow:none; padding:20px 25px 25px 25px; } /*文章內容版面區塊*/ #content { float:right; width:790px; } #spotlight { margin:0 auto 20px; } /*公告版位*/ #spotlight h5 { color:#262626; font-size:12px; padding:0px; } #spotlight-text { padding:0px 0px 0px 10px; } .article { clear:both; _height:1%; position:relative; margin:0 auto 20px; } .article-head { overflow:hidden; height:32px; line-height:32px; background:url(https://pic.pimg.tw/w08232003/1368102354-3149964249.jpg); padding:0 0 3px 10px; } /*文章發表時間*/ .publish { float:left; height:26px; width:130px; line-height:28px; text-align:center; font-size:10px; color:#333; background-color:#F2F2F2; border-radius:7.5px 0px 0px 7.5px; } /*文章標題區塊*/ .title { float:left; height:26px; width:650px; line-height:27px; font-size:12px; background-color:#f2f2f2; border-radius:0px 7.5px 7.5px 0px; } .article-body { padding:10px 10px 0; } .bookmark { font-size:11px; color:#aaa; margin:5px auto; } #content .recommended-posts1 { margin:1em 0 1em 1.5em; } #content .recommended-posts3 { margin:1em 0 1em 2em; } #content .recommended-posts1 h5 span,#content .recommended-posts3 h5 span { font-size:1.1em; font-weight:normal; margin-top:10px; } #content .recommended-posts1 .recommended-post-image { border:1px solid #ccc; } #content .recommended-posts1 ul { top:35px; } #content .recommended-posts3 ul { border:none; border-left:1px solid #ddd; } #content .recommended-posts3 ul li { border:0; border-right:1px solid #ddd; } #content .recommended-posts1 ul li a,#content .recommended-posts3 ul li a { color:#333; text-decoration:none; } #content .recommended-posts3 ul li a:hover { color:#333; background:#f5f5f5; } #content .recommended-posts1 ul li a.selected { background:none; } #content .recommended-posts3 ul li a img { border-color:#ccc; } #content .recommended-posts3 ul li a:hover img { background:#fff; } .article-footer { font-size:11px; color:#333; border-top:1px dashed #bbb; margin:10px 0 0; padding:5px 10px; } .refer,.history { float:left; width:50%; } .back-to-top { clear:both; text-align:right; } .back-to-top a { color:#aaa; text-decoration:underline; } .user-post-title { height:25px; line-height:25px; background:url(https://pic.pimg.tw/pixnetvisual/92032e3d3dcabdb7bc9d6a769184f8a4.jpg?v=1288345368) no-repeat 15px 0; } .user-post-title img { margin:7px 0 0; } #comment-title { background-position:15px -25px; } #trackback-url { margin:10px auto; } #trackback-url input { margin-right:3px; } .post-comment { text-align:right; } .post-comment a { border-right:1px solid #bbb; border-bottom:1px solid #bbb; background:#eee; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; padding:5px 10px; } .post-comment a:hover { color:#fff; border:1px solid #ccc; background:#ccc; text-decoration:none; } ul.single-post { position:relative; min-height:90px; _height:90px; line-height:20px; background:#eee; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; margin:20px auto; padding:10px 10px 10px 110px; } #trackback-text ul.single-post { min-height:auto; _height:auto; padding:10px; } ul.secret { min-height:20px; _height:20px; padding:10px; } li.post-photo { position:absolute; top:10px; left:10px; } li.post-photo img { width:80px; height:80px; border:1px solid #fff; border-right:1px solid #ccc; border-bottom:1px solid #ccc; background:#fff; padding:4px; } li.post-info { height:20px; overflow:hidden; font-size:11px; color:#333; padding-right:30px; } .floor { position:absolute; top:10px; right:10px; width:auto; display:block; font-size:1.4em; color:#ccc; } li.post-text { border-bottom:1px solid #ddd; padding:5px; } li.post-text p,li.post-text a { color:#aaa; font-weight:bold; } li.reply-text { color:#262626; border-top:1px solid #fff; padding:5px; } li.reply-text textarea { display:block; margin:0 0 3px; } li.reply-text p { text-align:right; font-size:11px; color:#aaa; } li.reply-text p a { color:#333; text-decoration:underline; } .article-area-title,#view-mode { float:left; width:68%; height:20px; overflow:hidden; font-size:12px; color:#333; border-bottom:1px solid #ddd; margin:0 0 15px; padding:0 1% 5px; } #view-mode { width:28%; text-align:right; font-size:11px; } #view-mode a { background:#e5e5e5; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; margin:0 2px; padding:1px 4px; } .main-list th,.main-list td { background:#e5e5e5; padding:7px 10px; } .main-list td { border-bottom:1px dashed #bbb; background:none; } td.list-date { width:15%; font-size:11px; } td.list-visit,td.list-comment { width:10%; font-size:11px; color:#aaa; } .page { font-size:11px; text-align:center; margin:20px auto; padding:5px 0; } .page a,.page span { color:#333; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; margin:0 3px 0 0; padding:1px 5px; } .page a:hover { background:#f5f5f5; } .page span { color:#262626; background:#e5e5e5; } /*側欄寬度*/ #links { float:left; width:250px; overflow:hidden; } .box { margin:0 auto 10px; } /*側欄標題*/ .box-title { height:26px; line-height:27px; overflow:hidden; color:#333; background-color:#f2f2f2; /*圓角設定*/ border-radius:6.5px; font-size:12px; text-align:center; } /*左側欄位內文設定*/ .box-text { color:#333; font-size:12px; padding: 10px 0px 0px 0px; line-height:200%; } /*左側欄位連結型態*/ .box-text a { color:#333; padding: 0px 0px 0px 5px; } /*左側連結們不含個人檔案連結設定*/ #category .box-text a, #recent-article .box-text a, #latest-comment .box-text li a, #latest-trackback .box-text li a, #hot-article .box-text a{ display: block; } /*左側連結們滑鼠連結上變色填滿底色測試*/ #category .box-text a:hover, #recent-article .box-text a:hover, #latest-comment .box-text li a:hover, #latest-trackback .box-text li a:hover, #hot-article .box-text a:hover{background: #F7F7F7; color: #58a8cf; /*圓角設定*/ border-radius:7.5px; padding: 0px 0px 0px 8px } .inner-box ul { margin:0 0 0 1.3em; } .box-more { text-align:center; margin:5px auto; } .box-more a { font-size:11px; color:#333; background:#eee; border:1px solid #fff; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; padding:1px 4px; } .box-more a:hover { color:#444; text-decoration:none; background:#f5f5f5; border:1px solid #ccc; } #friendbox ul.friendlist li img { width:36px; height:36px; } #user-info .box-text { padding:10px; } #user-info dl { margin:10px 0 0; padding:10px 0 0; } #user-info dl dd { margin:0; } #search li { display:inline; } #search input#search-target { width:110px; } #latest-comment li span { color:#bbb; font-size:.9em; border-right:1px solid #ddd; margin:0 5px 0 0; padding:0 5px 0 0; } #latest-comment li a { display:block; height:20px; overflow:hidden; } body #newsfeed ul li,body #followed-murmurs ul li { font-family:Helvetica, Arial, "LiHei Pro", PMingLiU, sans-serif; border-bottom:1px dashed #bbb; } body #followed-murmurs .murmurs-photo img { height:30px; width:30px; border:1px solid; background:none repeat scroll 0 0 #FFF; padding:1px; } body #newsfeed ul li .newsfeed-content .newsfeed-author a,body #followed-murmurs .murmurs-content a.murmurs-author { color:#444; font-weight:normal; } #visitor ul,#crumb ul { _height:1%; overflow:hidden; _overflow:none; } #visitor ul li,#crumb ul li { float:left; margin:0 5px 5px 0; } #visitor ul li a img,#crumb ul li a img { width:36px; height:36px; background:#FFF; border:1px solid; vertical-align:top; padding:1px; } #calendar th,#calendar td { text-align:center; font-size:11px; line-height:24px; border:1px solid #eee; } #calendar th a { display:block; text-decoration:underline; } #calendar td a { display:block; color:#444; background:#eee; } #footer { text-align:center; font-size:11px; color:#333; background:#eee; -webkit-border-bottom-right-radius:6px; -webkit-border-bottom-left-radius:6px; -moz-border-radius-bottomright:6px; -moz-border-radius-bottomleft:6px; border-bottom-right-radius:6px; border-bottom-left-radius:6px; margin:0 10px; padding:5px; } #comment-form td,#comment-form th { vertical-align:top; padding:2px; } #comment-form th { width:100px; text-align:right; } #comment-form input.radio { width:auto; background:none; border:none; } input#send-comment { width:10%; } fieldset,img,abbr,acronym { border:0; } caption,th,body #followed-murmurs .murmurs-content { text-align:left; } .article-content ul,.article-content ol,.author,.main-list { clear:both; } a:hover,.article-content a { text-decoration:underline; } #login-bar a,.skiplink a,#blog-category a { color:#333; } .time,.user-post-title span,.weekday { display:none; } .title img,.forward img,li.post-text img,#recent-article li img { vertical-align:middle; } .author,.forward,#friendbox .friends-all a,body #newsfeed a.show-all-newsfeed,body #followed-murmurs a.show-all-murmurs { font-size:11px; color:#333; } .author a,.forward a,.article-footer a,#footer a { color:#333; } #trackback-url input#trackback-input,input#blogcommenttext_name { width:50%; } .list-visit,.list-comment,#search .box-text { text-align:center; } body #newsfeed ul li .newsfeed-photo a,body #followed-murmurs ul li .murmurs-photo a,#friendbox ul.friendlist li a,#visitor ul li a,#crumb ul li a { color:#ccc; } #comment-form input,#comment-form textarea { width:98%; } #content .recommended-posts3 {display:none;} body { background-attachment: fixed; } body { background-image: url(url("https://i.imgur.com/zvTWNJZ.jpg"));; } #header { background-image: none; } a:hover, a:visited, a:link, a:active { text-decoration: none; } #content.recommended-posts { display: none; } /*繼續閱讀文字大小*/ .more a { font-size:12px; } /*繼續閱讀滑鼠在連結上*/ .more a:hover { color:#000; padding: 0px 0px 0px 8px; } /*文章內容內滑鼠在連結上*/ .article-content a:hover { color:#58a8cf; } /*文章標題*/ .title h2 a { color:#333; } /*文章標題滑鼠在連結上*/ .title h2 a:hover { color:#58a8cf; } /*部落格標題 滑鼠在連結上*/ #banner h1 a:hover { color:#58a8cf; } /*整個頁面*/ #body-div a:hover { color:#58a8cf; } /*整個頁面字距*/ #body-div { LETTER-SPACING:1.5pt } /*上方痞客邦橫幅換顏色*/ .pixnavbar {background-color: #71b3d7 !important;} /*文章內文*/ .article-content { font-size:12px; } /*移除你可能有興趣的文章-無用*/ #content .recommended-posts{display:none;} /*隱藏文章末尾廣告-無用*/ #pixblogad {display:none;} /*隱藏彈出式廣告*/ .trv-poster, .media-video, .trvdfloater, .trv-close, .avp-p-gui, .avp-p-gui-poster, .one-multiply-one-ad, #aniBox {display:none !important;visibility:hidden;} /*字體-無作用*/ .pixnavbar { FONT-FAMILY: "Century Gothic"; -webkit-font-smoothing: antialiased; } FONT-FAMILY: "Century Gothic"