[分享]痞客邦免費CSS版型樣式—旅行紀錄

▲最近在練CSS，這是我第一個做出來的版型，就這裡分享給大家使用

首頁的最上面背景圖片特別加大，下方的文章區取文章第一行的圖片當作封面圖，同時沒有文章簡介

點擊文章區塊就可以進入該篇文章

大家都知道痞客邦的測攔有兩個，這個版型把一個側欄去掉，留一個側欄改放在頂端，會跟著網頁滑動而移動

滑鼠移動到上方欄位會自動跳出該欄位的資訊

點進去文章之後，上方的大圖片是沒有的，比較方便閱讀

同時右邊側欄則會出現

～～～萌萌噠的分割線醬～～～

使用說明（必看）

● 幫本站的粉絲團按讚分享，星際文明的黑科技

●首頁顯示的文章數量請調成４的倍數，這樣才會整齊

●首頁的大圖可以到ＣＳＳ中的＃banner項目修改，按下Ｃｔｒｌ＋Ｆ會出現搜尋框，在搜尋框中輸入banner，把圖片網址改成你要的圖片網址就ＯＫ了

●首頁的大圖是１６６８Ｘ７５０像素的大小，要改圖片記得要用符合大小的圖片，要不然網頁會自動壓縮放大圖片，你的圖片就會變得很醜喔

●後台的側欄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; }<br /> table { border-collapse: collapse; border-spacing: 0; width: 100%; }<br /> fieldset,img { border:0; }<br /> address,caption,cite,code,dfn,th,var { font-style: normal; font-weight: normal; }<br /> caption,th { text-align: left; }<br /> h1,h2,h3,h4,h5,h6 { font-size: 100%; font-weight: normal; }<br /> q:before,q:after { content:”; }<br /> abbr,acronym { border:0; }<br /> pre { font-size: 1em ; }<br /> ol,ul { margin-left: 2em; padding: 0; }<br /> ol li { list-style: decimal outside; }<br /> ul li { list-style: disc outside; }<br /> /*input{ overflow: visible; }*/<br /> .article-content { overflow: hidden ; }<br /> .article-content p{ margin-bottom: 1em; }<br /> .article-content ul, .article-content ol, .author { clear: both; }<br /> .article-head, .article-head li,<br /> .recommended-posts ul, .recommended-posts li,<br /> .article-footer ul, .article-footer li,<br /> .user-post-text ul, .user-post-text li,<br /> .box-text ul, .box-text li { list-style: none; padding: 0; margin: 0; }<br /> #toolbar-box ul, #toolbar-box li { list-style: none; margin: 0; }<br /> /*reset-over*/<br /> html {}<br /> body {<br /> color: #666;<br /> font-size: 13px;<br /> font-family: Helvetica, Arial, “LiHei Pro”, PMingLiU, sans-serif;<br /> line-height: 154%;<br /> background: url(https://pic.pimg.tw/pixnetvisual/8cd8de234be5e001a19dad1ee5aae534.jpg);<br /> margin: 0;<br /> }<br /> a { color: #000; text-decoration: none; }<br /> a:hover { text-decoration: underline; }<br /> input, textarea {<br /> vertical-align: middle;<br /> font-family: Helvetica, Arial, “LiHei Pro”, PMingLiU, sans-serif;<br /> font-size: 1.0em;<br /> color: #000;<br /> border: 1px solid #ddd;<br /> background: #f5f5f5;<br /> padding: 2px 5px;<br /> -webkit-border-radius: 4px;<br /> -moz-border-radius: 4px;<br /> border-radius: 4px;<br /> }<br /> select {<br /> font-family: Helvetica, Arial, “LiHei Pro”, PMingLiU, sans-serif;<br /> font-size: 1.0em;<br /> color: #333;<br /> border: 1px solid #ddd;<br /> background: #f5f5f5;<br /> padding: 2px;<br /> }<br /> #body-div {}<br /> #authority {<br /> width: 950px;<br /> text-align: center;<br /> font-size: 12px;<br /> background: #ddd;<br /> padding: 8px 0;<br /> margin: 0 auto;<br /> -webkit-border-bottom-right-radius: 8px;<br /> -webkit-border-bottom-left-radius: 8px;<br /> -moz-border-radius-bottomright: 8px;<br /> -moz-border-radius-bottomleft: 8px;<br /> border-bottom-right-radius: 8px;<br /> border-bottom-left-radius: 8px;<br /> -moz-box-shadow: 1px 1px 2px #aaa; /* FF3.5+ */<br /> -webkit-box-shadow: 1px 1px 2px #aaa; /* Saf3.0+, Chrome */<br /> box-shadow: 1px 1px 2px #aaa; /* Opera 10.5, IE 9 */<br /> }<br /> #authority a {<br /> color: #999;<br /> background: #f5f5f5;<br /> padding: 2px 5px;<br /> margin: 0 2px;<br /> -webkit-border-radius: 3px;<br /> -moz-border-radius: 3px;<br /> border-radius: 3px;<br /> }<br /> #container {}<br /> #container2 {}<br /> #container3 {<br /> overflow: hidden;<br /> position: relative;<br /> width: 100%;<br /> padding: 0 0 10px;<br /> background:#FFFFFF;<br /> padding: 0px 0 10px;<br /> margin: 15px auto 30px;<br /> -webkit-border-radius: 8px;<br /> -moz-border-radius: 8px;<br /> border-radius: 8px;<br /> -moz-box-shadow: 1px 1px 2px #aaa; /* FF3.5+ */<br /> -webkit-box-shadow: 1px 1px 2px #aaa; /* Saf3.0+, Chrome */<br /> box-shadow: 1px 1px 2px #aaa; /* Opera 10.5, IE 9 */<br /> }<br /> #header {<br /> position: relative;<br /> height: 850px;<br /> padding: 0px 0 0;<br /> }<br /> #login-bar {<br /> color: #aaa;<br /> position: absolute;<br /> top: -20px;<br /> right: 1px;<br /> text-align: right;<br /> width: 928px;<br /> font-size: 11px;<br /> border-bottom: 1px dotted #ccc;<br /> padding: 0 10px;<br /> }<br /> #login-bar a { color: #999; }<br /> #login-bar a:hover { color: #000; }<br /> #banner {<br /> height: 750px;<br /> background: url(https://pic.pimg.tw/typhooooon/1602228015-3284521483-g_n.jpg) no-repeat;<br /> background-size: cover;<br /> background-position: center;<br /> }<br /> #banner h1 {<br /> position: absolute;<br /> top: 780px;<br /> left: 40%;<br /> width: 310px;<br /> text-align: center;<br /> line-height: 30px;<br /> height: 30px;<br /> overflow: hidden;<br /> font-size: 30px;<br /> padding: 0 20px;<br /> }<br /> #banner h1 a{<br /> color: #000000;<br /> }<br /> #banner h1 a:hover{<br /> color: #fc3a63;<br /> }<br /> #banner h2 {<br /> position: absolute;<br /> top: 820px;<br /> left: 29%;<br /> width: 670px;<br /> height: 60px;<br /> line-height: 30px;<br /> font-size: 15px;<br /> overflow: hidden;<br /> color:#000000;<br /> text-align:center;<br /> }<br /> #banner p.skiplink{ display: none !important;}<br /> .skiplink {<br /> display: none !important;<br /> }<br /> .skiplink a { display: none !important;}<br /> #blog-category {<br /> position: absolute;<br /> top: -20px;<br /> left: 65px;<br /> font-size: 11px;<br /> color: #aaa;<br /> display: none !important;<br /> }<br /> #blog-category a {display: none !important;}<br /> #navigation {<br /> display:none;<br /> position: absolute;<br /> top: 265px;<br /> right: 40px;<br /> width: 270px;<br /> height: 35px;<br /> background: #fff url(https://pic.pimg.tw/pixnetvisual/7b50563db8d70081580c27a1f139cdc8.gif);<br /> padding: 0 0 0 10px;<br /> margin: 0;<br /> -webkit-border-top-left-radius: 5px;<br /> -webkit-border-top-right-radius: 5px;<br /> -moz-border-radius-topleft: 5px;<br /> -moz-border-radius-topright: 5px;<br /> border-top-left-radius: 5px;<br /> border-top-right-radius: 5px;<br /> }<br /> #article-main #banner{background: #fff;<br /> height:100px;}<br /> #article-main #header{height:100px;}<br /> #article-main #banner h1 {<br /> top:30px;<br /> }<br /> #article-main #banner h2 {<br /> top:65px;<br /> }<br /> #navigation li {<br /> float: left;<br /> list-style: none;<br /> margin: 0;<br /> }<br /> #navigation li a {<br /> display: block;<br /> width: 100%;<br /> height: 35px;<br /> font-size: 0;<br /> text-indent: -5000px;<br /> }<br /> #navigation li#link-album { width: 60px; }<br /> #navigation li#link-blog { width: 50px; }<br /> #navigation li#link-guestbook { width: 85px; }<br /> #navigation li#link-profile { width: 65px; }<br /> #main {<br /> overflow: hidden;<br /> padding: 15px;<br /> width: 2280px;<br /> }<br /> #content {<br /> float: left;<br /> width: 50%;<br /> }<br /> #blog-main #content{width: 67%;}<br /> #category-main #content{width: 67%;}<br /> #spotlight {<br /> position: relative;<br /> z-index: 500;<br /> width: 490px;<br /> margin: 0 auto 20px;<br /> }<br /> #spotlight h5 {<br /> color: #000;<br /> font-size: 15px;<br /> border-bottom: 1px dashed #bbb;<br /> padding: 5px;<br /> }<br /> #spotlight-text {<br /> padding: 5px;<br /> }<br /> .article-head {<br /> text-align:left;<br /> overflow: hidden;<br /> height: 32px;<br /> line-height: 35px;<br /> padding: 0 0 3px 10px;<br /> z-index: 99;<br /> }<br /> #blog-main .article-head{<br /> position: relative;<br /> height: 32px;<br /> top:-20px;<br /> }<br /> #category-main .article-head{<br /> position: relative;<br /> height: 32px;<br /> top:-20px;<br /> }<br /> .publish {<br /> float: left;<br /> width: 115px;<br /> text-align: right;<br /> font-size: 11px;<br /> }<br /> .time { display: none; }<br /> .date { font-size: 13px; }<br /> .title {<br /> float: left;<br /> width: 190px;<br /> font-size: 15px;<br /> }<br /> .title a {<br /> white-space: nowrap;<br /> text-overflow: ellipsis;<br /> -o-text-overflow: ellipsis;<br /> overflow: hidden;<br /> display: block;<br /> }<br /> .title img { vertical-align: middle; }<br /> .title img[alt=”置頂”],<br /> .title img[alt=”隱藏”],<br /> .title img[alt=”密碼文章”],<br /> .title img[alt=”共同作者”],<br /> .title img[alt=”好友文章”] {<br /> position: absolute;<br /> left: 0;<br /> }<br /> .article-body {<br /> padding: 10px 5px 0;<br /> }<br /> .bookmark {<br /> font-size: 11px;<br /> color: #aaa;<br /> margin: 5px auto;<br /> }<br /> .bookmark span {}<br /> #content .recommended-posts1 { margin: 1em 0 1em 1.5em; }<br /> #content .recommended-posts3 { margin: 1em 0 1em 2.5em; }<br /> #content .recommended-posts1 h5 span ,<br /> #content .recommended-posts3 h5 span { font-size: 1.1em; font-weight: normal; margin-top: 10px; }<br /> #content .recommended-posts1 .recommended-post-image { border: 1px solid #ccc; }<br /> #content .recommended-posts1 ul { top: 35px; }<br /> #content .recommended-posts3 ul { border: none; border-left: 1px solid #ddd; }<br /> #content .recommended-posts3 ul li { border: 0; border-right: 1px solid #ddd; }<br /> #content .recommended-posts1 ul li a ,<br /> #content .recommended-posts3 ul li a { color: #999; text-decoration: none; }<br /> #content .recommended-posts3 ul li a:hover { color: #333; background: #f5f5f5; }<br /> #content .recommended-posts1 ul li a.selected { background: none; }<br /> #content .recommended-posts3 ul li a img { border-color: #ccc; }<br /> #content .recommended-posts3 ul li a:hover img { background: #fff; }<br /> .author, .forward {<br /> font-size: 11px;<br /> color: #999;<br /> }<br /> .author a, .forward a { color: #666; }<br /> .forward img { vertical-align: middle; }<br /> .article-footer {<br /> font-size: 11px;<br /> color: #999;<br /> border-top: 1px dashed #bbb;<br /> padding: 5px 5px;<br /> margin: 10px 0 0;<br /> }<br /> .article-footer a { color: #666; }<br /> .refer, .history {<br /> float: left;<br /> width: 50%;<br /> }<br /> .back-to-top {<br /> clear: both;<br /> text-align: right;<br /> }<br /> .back-to-top a {<br /> color: #aaa;<br /> text-decoration: underline;<br /> }<br /> .user-post-title {<br /> height: 25px;<br /> line-height: 25px;<br /> background: url(https://pic.pimg.tw/pixnetvisual/92032e3d3dcabdb7bc9d6a769184f8a4.jpg?v=1288345368) no-repeat 15px 0;<br /> }<br /> .user-post-title span { display: none; }<br /> .user-post-title img { margin: 7px 0 0; }<br /> #comment-title { background-position: 15px -25px; }<br /> #trackback-url { margin: 10px auto; }<br /> #trackback-url input { margin-right: 3px; }<br /> #trackback-url input#trackback-input { width: 50%; }<br /> .post-comment { text-align: right; }<br /> .post-comment a {<br /> border-right: 1px solid #bbb;<br /> border-bottom: 1px solid #bbb;<br /> background: #eee;<br /> padding: 5px 10px;<br /> -webkit-border-radius: 3px;<br /> -moz-border-radius: 3px;<br /> border-radius: 3px;<br /> }<br /> .post-comment a:hover {<br /> color: #fff;<br /> border: 1px solid #ccc;<br /> background: #ccc;<br /> text-decoration: none;<br /> }<br /> ul.single-post {<br /> position: relative;<br /> min-height: 90px;<br /> _height: 90px;<br /> line-height: 20px;<br /> background: #eee;<br /> padding: 10px 10px 10px 110px;<br /> margin: 20px auto;<br /> -webkit-border-radius: 5px;<br /> -moz-border-radius: 5px;<br /> border-radius: 5px;<br /> }<br /> #trackback-text ul.single-post {<br /> min-height: auto;<br /> _height: auto;<br /> padding: 10px;<br /> }<br /> ul.secret {<br /> min-height: 20px;<br /> _height: 20px;<br /> padding: 10px;<br /> }<br /> li.post-photo {<br /> position: absolute;<br /> top: 10px;<br /> left: 10px;<br /> }<br /> li.post-photo img {<br /> width: 80px;<br /> height: 80px;<br /> border: 1px solid #fff;<br /> border-right: 1px solid #ccc;<br /> border-bottom: 1px solid #ccc;<br /> background: #fff;<br /> padding: 4px;<br /> }<br /> li.post-info {<br /> height: 20px;<br /> overflow: hidden;<br /> font-size: 11px;<br /> color: #999;<br /> padding-right: 30px;<br /> }<br /> .floor {<br /> position: absolute;<br /> top: 10px;<br /> right: 10px;<br /> width: auto;<br /> display: block;<br /> font-size: 1.4em;<br /> color: #ccc;<br /> }<br /> .post-info a {}<br /> li.post-text {<br /> border-bottom: 1px solid #ddd;<br /> padding: 5px;<br /> }<br /> li.post-text p, li.post-text a { color: #aaa; font-weight: bold; }<br /> li.post-text img { vertical-align: middle; }<br /> li.reply-text {<br /> color: #000;<br /> border-top: 1px solid #fff;<br /> padding: 5px;<br /> }<br /> li.reply-text textarea {<br /> display: block;<br /> margin: 0 0 3px;<br /> }<br /> li.reply-text p {<br /> text-align: right;<br /> font-size: 11px;<br /> color: #aaa;<br /> }<br /> li.reply-text p a { color: #999; text-decoration: underline; }<br /> .article-area-title,<br /> #view-mode {<br /> float: left;<br /> width: 58%;<br /> height: 20px;<br /> overflow: hidden;<br /> font-size: 12px;<br /> color: #999;<br /> border-bottom: 1px solid #ddd;<br /> padding: 0 1% 5px;<br /> margin: 0 0 15px;<br /> }<br /> #view-mode {<br /> width: 38%;<br /> text-align: right;<br /> font-size: 11px;<br /> }<br /> #view-mode a {<br /> background: #e5e5e5;<br /> padding: 1px 4px;<br /> margin: 0 2px;<br /> -webkit-border-radius: 3px;<br /> -moz-border-radius: 3px;<br /> border-radius: 3px;<br /> }<br /> .main-list { clear: both; }<br /> .main-list th,<br /> .main-list td {<br /> background: #e5e5e5;<br /> padding: 7px 10px;<br /> }<br /> .main-list td {<br /> border-bottom: 1px dashed #bbb;<br /> background: none;<br /> }<br /> td.list-date { width: 18%; font-size: 11px; }<br /> .list-visit,<br /> .list-comment { text-align: center; }<br /> td.list-visit,<br /> td.list-comment { width: 10%; font-size: 11px; color: #aaa; }<br /> .page {<br /> font-size: 11px;<br /> text-align: center;<br /> padding: 5px 0;<br /> margin: 20px auto;<br /> }<br /> .page a, .page span {<br /> color: #999;<br /> padding: 1px 5px;<br /> margin: 0 3px 0 0;<br /> -webkit-border-radius: 3px;<br /> -moz-border-radius: 3px;<br /> border-radius: 3px;<br /> }<br /> .page a:hover { background: #f5f5f5; }<br /> .page span {<br /> color: #000;<br /> background: #e5e5e5;<br /> }<br /> #links {<br /> float: right;<br /> width: 50%;<br /> position: relative;<br /> left: -40%;<br /> overflow: hidden;<br /> }<br /> #blog-main #links-row-1 {<br /> display: none;<br /> }<br /> #category-main #links-row-1 {<br /> display: none;<br /> }<br /> #links-row-2 {<br /> top:0px;<br /> display: inline-block;<br /> position:fixed;<br /> height:30px;<br /> width:100%;<br /> z-index:9999;<br /> background-color:#FFC78E;<br /> left:0px;<br /> float:left;<br /> }<br /> #links-row-1 {<br /> float: right;<br /> font-size: 16px;<br /> }<br /> .box {<br /> margin: 0 auto 10px;<br /> }<br /> #links-row-1 .box-title {<br /> background-color:#FFD1A4;<br /> color:#FFFFFF;<br /> text-align:center;<br /> font-weight:bold;<br /> }<br /> .box-title {<br /> height: 32px;<br /> line-height: 32px;<br /> overflow: hidden;<br /> padding: 0 10px 3px 30px;<br /> }<br /> .box-text {<br /> color: #999;<br /> font-size: 14px;<br /> padding: 10px;<br /> }<br /> .box-text a { color: #777; }<br /> .box-text a:hover { color: #444; }<br /> .box-text audio,<br /> .box-text iframe,<br /> .box-text object,<br /> .box-text embed {<br /> position: relative;<br /> display: block;<br /> width: 100%;<br /> max-width: 100%;<br /> }<br /> .inner-box {}<br /> .inner-box ul {<br /> margin: 0 0 0 1.3em;<br /> }<br /> .box-more {<br /> text-align: center;<br /> margin: 5px auto;<br /> }<br /> .box-more a {<br /> font-size: 11px;<br /> color: #999;<br /> background: #eee;<br /> border: 1px solid #fff;<br /> padding: 1px 4px;<br /> -webkit-border-radius: 3px;<br /> -moz-border-radius: 3px;<br /> border-radius: 3px;<br /> }<br /> .box-more a:hover {<br /> color: #444;<br /> text-decoration: none;<br /> background: #f5f5f5;<br /> border: 1px solid #ccc;<br /> }<br /> #friendbox .friends-all a,<br /> body #newsfeed a.show-all-newsfeed,<br /> body #followed-murmurs a.show-all-murmurs { font-size: 11px; color: #999; }<br /> #friendbox ul.friendlist li img { width: 36px; height: 36px; }<br /> #user-info {}<br /> #user-info .box-text { padding: 10px; }<br /> #user-info dl {<br /> padding: 10px 0 0;<br /> margin: 10px 0 0;<br /> }<br /> #user-info dl dd { margin: 0; }<br /> #recent-article {}<br /> #recent-article li img { vertical-align: middle; }<br /> #search .box-text { text-align: center; }<br /> #search li { display: inline; }<br /> #search input#search-target { width: 110px; }<br /> #latest-comment {}<br /> #latest-comment li {}<br /> #latest-comment li span {<br /> color: #bbb;<br /> font-size: 0.9em;<br /> border-right: 1px solid #ddd;<br /> padding: 0 5px 0 0;<br /> margin: 0 5px 0 0;<br /> }<br /> #latest-comment li a {<br /> display: block;<br /> height: 20px;<br /> overflow: hidden;<br /> }<br /> #newsfeed {}<br /> body #newsfeed ul li,<br /> body #followed-murmurs ul li {<br /> font-family: Helvetica, Arial, “LiHei Pro”, PMingLiU, sans-serif;<br /> border-bottom: 1px dashed #bbb;<br /> }<br /> body #newsfeed ul li .newsfeed-photo a,<br /> body #followed-murmurs ul li .murmurs-photo a { color: #ccc; }<br /> body #followed-murmurs .murmurs-photo img {<br /> height:30px;<br /> width:30px;<br /> border:1px solid;<br /> background:none repeat scroll 0 0 white;<br /> padding:1px;<br /> }<br /> body #newsfeed ul li .newsfeed-content .newsfeed-author a,<br /> body #followed-murmurs .murmurs-content a.murmurs-author { color: #444; font-weight: normal; }<br /> body #followed-murmurs .murmurs-content { text-align: left; }<br /> #friendbox ul.friendlist li a { color: #ccc; }<br /> #visitor ul,<br /> #crumb ul {<br /> overflow: hidden;<br /> }<br /> #visitor ul li,<br /> #crumb ul li {<br /> float: left;<br /> margin: 0 5px 5px 0;<br /> }<br /> #visitor ul li a,<br /> #crumb ul li a { color: #ccc; }<br /> #visitor ul li a img,<br /> #crumb ul li a img {<br /> width: 36px;<br /> height: 36px;<br /> background: white;<br /> border: 1px solid;<br /> padding: 1px;<br /> vertical-align: top;<br /> }<br /> #calendar {}<br /> .weekday { display: none; }<br /> #calendar table {}<br /> #calendar th,<br /> #calendar td {<br /> text-align: center;<br /> font-size: 11px;<br /> line-height: 24px;<br /> border: 1px solid #eee;<br /> }<br /> #calendar th a {<br /> display: block;<br /> text-decoration: underline;<br /> }<br /> #calendar td a {<br /> display: block;<br /> color: #444;<br /> background: #eee;<br /> }<br /> #footer {<br /> text-align: center;<br /> font-size: 11px;<br /> color: #999;<br /> background: #eee;<br /> padding: 5px;<br /> margin: 0 10px;<br /> -webkit-border-bottom-right-radius: 6px;<br /> -webkit-border-bottom-left-radius: 6px;<br /> -moz-border-radius-bottomright: 6px;<br /> -moz-border-radius-bottomleft: 6px;<br /> border-bottom-right-radius: 6px;<br /> border-bottom-left-radius: 6px;<br /> }<br /> #footer a { color: #666; }<br /> #comment-form td, #comment-form th { vertical-align: top; padding: 2px; }<br /> #comment-form th { width: 100px; text-align: right; }<br /> #comment-form input { width: 98%; }<br /> #comment-form input.radio { width: auto; background: none; border: none; }<br /> input#blogcommenttext_name { width: 50%; }<br /> input#send-comment { width: 10%; }<br /> #comment-form textarea { width: 98%; }<br /> body{background-image: url(https://pic.pimg.tw/pixnetvisual/8cd8de234be5e001a19dad1ee5aae534.jpg)}<br /> .pixnavbar__top-bar {display:none !important}/*–刪除上方bar–*/<br /> .main-container {padding-top: 0px !important;}<br /> body { background-color: #FFFFFF; }<br /> body { background-image: none; }<br /> #header { background-image: none; }<br /> /* CSS for Blocking Pixnet AD */<br /> #links #links-row-1 div[class*=”-mib-“], /* 側欄廣告 */<br /> #links #links-row-1 div[class*=”-border-“],<br /> #links #links-row-1 div.hslice.box[class*=”-ad-sidebar-“],<br /> #links #links-row-1 div.hslice.box[id*=”-mib-“],<br /> #links #links-row-1 div.hslice.box[id*=”-ad-“],<br /> #pix-mib-unfold-ad, /* 右側浮動廣告 */<br /> #pixblogad-banner2,<br /> #idle-pop, /* 閒置廣告 */<br /> #ad-full-page, /* 蓋版廣告 */<br /> #comment-text > div, /* 留言中廣告 */<br /> .article-content-inner .article-inread-ad /* 內文廣告 */<br /> {<br /> display:none!important;<br /> height:0!important<br /> }<br /> /* 移除推薦文章中的廣告, 並調整顯示樣式 */<br /> #content ul.demo { padding:0; display:flex; flex-flow:row; justify-content:start; overflow-x:auto }<br /> #content ul.demo,<br /> #content ul.demo li a { width:100%; border-left:none }<br /> #content ul.demo li a { display:flex; flex-flow:column; justify-content:center; align-items:center; text-align:center }<br /> #content ul.demo li { border-right:1px solid #ccc; list-style: none; width:32% !important }<br /> #content ul.demo li img { max-width:100px; mex-height:100px }<br /> #content ul.demo li:nth-child(1) { border-left:1px solid #ccc }<br /> #content ul.demo li[data-source^=”ad_pc_”] { display:none !important }<br /> /* 移除 Pixnet 領航員 Happix (狐狸頭) */<br /> #pilot div.pixnet-happix-pilot__launcher-bubble { display:none }<br /> /* 移除 全站熱搜 */<br /> .tag-container-parent .tag-container.global-keyword { display:none !important }<br /> #links-row-2 .box-text{<br /> position: absolute;<br /> padding: 15px 15px 20px 15px;<br /> min-width: 200px;<br /> background:#84C1FF;<br /> border-top: 3px solid #84C1FF;<br /> color: #FFFFFF;<br /> display: none;<br /> }<br /> #links-row-2 .box:hover .box-text{<br /> display: block;<br /> }<br /> #links-row-2 .box-text:hover{<br /> width: 150px;<br /> height: 150px;<br /> }<br /> #links-row-2 .box-title{<br /> display:inline-block;<br /> width:70px;<br /> margin:0px;<br /> color:#FFFFFF;<br /> }<br /> #links-row-2 .box{<br /> display:inline-block;<br /> margin:0px auto;<br /> }<br /> #links-row-2 .inner-box{<br /> display: inline-block;<br /> padding-right: 10px;<br /> }<br /> #links-row-2 .box-text>ul{<br /> display: inline-block;<br /> }<br /> #links-row-2 .box-text>ul>li{<br /> display: inline-block;}<br /> #article-area{<br /> width: 968px;<br /> margin: 0 auto;<br /> overflow : hidden;<br /> }<br /> .article{<br /> float: left;<br /> width: 190px;<br /> height: 190px;<br /> padding: 10px;<br /> background: #ffffff;<br /> box-shadow: 0px 0px 1px 1px #ddd;<br /> -moz-box-shadow: 0px 0px 1px 1px #ddd;<br /> -webkit-box-shadow: 0px 0px 1px 1px #ddd;<br /> margin: 15px 15px 40px 15px;<br /> }<br /> .article:hover{<br /> box-shadow: 0px 0px 1px 1px #bbb;<br /> -moz-box-shadow: 0px 0px 1px 1px #bbb;<br /> -webkit-box-shadow: 0px 0px 1px 1px #bbb;<br /> background: #f7f7f7;<br /> }<br /> .publish{display: none;}<br /> .title h2{<br /> top: 0px;<br /> float: left;<br /> margin:0 0 20px 0;<br /> height: 40px;<br /> overflow: hidden;<br /> position: relative;<br /> text-align: center;<br /> }<br /> .title h2 a{<br /> color: #999;<br /> height: 40px;<br /> }<br /> .article:hover .title h2 a{<br /> color: #444;<br /> }<br /> .article-content{<br /> top: -40px;<br /> height: 170px;<br /> padding: 10px;<br /> text-align: left;<br /> position: relative;<br /> line-height: 200%;<br /> }<br /> #blog-main .article-content img{<br /> width: auto;<br /> height: 190px;<br /> position: absolute;<br /> top: 10px;<br /> left: 0px;<br /> }<br /> #category-main .article-content img{<br /> width: auto;<br /> height: 190px;<br /> position: absolute;<br /> top: 10px;<br /> left: 0px;<br /> }<br /> .article .more a{<br /> font-size: 0px;<br /> display: block;<br /> position: absolute;<br /> top: 0px;<br /> left: 0px;<br /> width: 190px;<br /> height: 190px;<br /> z-index: 10;<br /> }<br /> .author{display: none;}<br /> .forward{display: none;}<br /> .article-footer{display: none;}<br /> .refer{display: none;}<br /> .history{display: none;}<br /> .back-to-top{display: none;}<br /> .article-keyword{display: none;}<br /> #article-main .article{<br /> width: 940px;<br /> height: auto;<br /> padding: 10px 0px 30px 0px;<br /> background: none;<br /> float: none;<br /> margin: 0 auto;<br /> box-shadow: none;<br /> -moz-box-shadow: none;<br /> -webkit-box-shadow: none;<br /> border-bottom: 3px solid #000;<br /> }<br /> #article-main .publish{<br /> display: block;<br /> font-size: 14px;<br /> font-weight: bold;<br /> padding: 0px 10px 15px 15px;<br /> }<br /> #article-main .article-content{<br /> height: auto;<br /> font-size: 12px;<br /> position: static;<br /> text-align: left;<br /> padding: 0px;<br /> margin-bottom: 20px;<br /> background: none;<br /> }<br /> #article-main .article-content img{<br /> max-width: 940px;<br /> }<br /> #article-main .article-content a{<br /> color: #fc3a63;<br /> }<br /> .bookmark{<br /> padding-bottom: 15px;<br /> }<br /> #article-main .article-keyword{<br /> display: block;<br /> }<br /> #article-main .author{<br /> display: block;<br /> padding: 0px 0px 5px 15px;<br /> background: url(http://pic.pimg.tw/weilife/1381045870-1786288759.png) left 2px no-repeat;<br /> }<br /> #article-main .article-footer{<br /> display: block;<br /> }<br /> #article-main .refer{<br /> display: block;<br /> }<br /> #article-main .refer li{<br /> padding: 0px 0px 5px 15px;<br /> background: url(http://pic.pimg.tw/weilife/1381045870-1786288759.png) left 2px no-repeat;<br /> }<br /> #article-main .history{<br /> display: block;<br /> padding: 0px 0px 5px 15px;<br /> background: url(http://pic.pimg.tw/weilife/1381045870-1786288759.png) left 2px no-repeat;<br /> }<br /> #article-main .back-to-top{<br /> display: block;<br /> padding: 0px 0px 5px 15px;<br /> background: url(http://pic.pimg.tw/weilife/1381045870-1786288759.png) left 2px no-repeat;<br /> }<br /> #pixblogad{display:none;}<br /> .article-area-title{<br /> width: 940px;<br /> margin: 0 auto;<br /> padding: 15px 0px 5px 0px;<br /> font-weight: bold;<br /> }<br /> #display{<br /> width: 940px;<br /> margin: 0 auto;<br /> padding: 5px 0px 15px 0px;<br /> font-weight: bold;<br /> }<br /> #display a{<br /> padding: 0px 10px 0px 15px;<br /> background: url(http://pic.pimg.tw/weilife/1381045870-1786288759.png) top left no-repeat;<br /> }<br /> .main-list table{<br /> width: 940px;<br /> margin: 0 auto;<br /> }<br /> .main-list td.list-date{<br /> width: 100px;<br /> }<br /> .main-list td.list-title{<br /> width: 680px;<br /> }<br /> .main-list td.list-visit{<br /> width: 80px;<br /> text-align: center;<br /> }<br /> .main-list th.list-visit{<br /> text-align: center;<br /> }<br /> .main-list td.list-comment{<br /> width: 80px;<br /> text-align: center;<br /> }<br /> .main-list th.list-comment{<br /> text-align: center;<br /> }<br /> .main-list tr:hover{<br /> background:#eee;<br /> }<br /> .main-list th{<br /> color:#000000;<br /> padding:10px 0;<br /> border:0px;<br /> text-align: left;<br /> border-bottom: 1px dotted #aaa;<br /> }<br /> .main-list td{<br /> border:0px;<br /> padding:10px 0;<br /> border-bottom: 1px dotted #aaa;<br /> }<br /> ————-<br />

在上面框框中按下Alt+a，即可全選程式碼，然後再把程式碼複製到你的部落格中就行