星兒的收藏

  RWD 版型分享 

左二欄位版型

 
本樣式特點為 : 首頁摘要文章以 馬賽克磚牆模式顯示，讓瀏覽者觀看部落格一目了然。

 Felx 回應式網頁設計，以百分比的方式、以及彈性的畫面設計，在不同解析度下可改變網頁頁面的佈局排版，讓不同的螢幕解析度下都可以正常瀏覽。

套用本樣式，你可能需要重新編排摘要 與設定首頁文章顯示方式。

喜歡的格友，快來套用吧!!

CSS語法

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

/*-- 大漠黃沙駝鈴響 ---*/ * { 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 ;} textarea{ font-size: 13px;} :root { --box-line: #EA872D; --comment-bg: #FFF4DE; --bb-color:#FFD5AB; --sec-color: #FFEFCF; } /*-------------------- 部落格資訊 -------*/ #header{ height:400px; /* <<<<*/ position: relative; border-bottom: 1px dotted var(--bb-color); text-shadow: 1px 1px white, -1px -1px #aaa; /* << 文字特效 */ /*--- 背景圖片、第一張 vvvv 位置大小固定不變。*/ background: url(https://pic.pimg.tw/hoyu0528/1564384514-1983535964.png) top left 5px no-repeat, /*＜＜注意這個符號不一樣 */ url(https://i.imgur.com/to28rsf.jpg) center; /*＜＜背景圖片、第2張" 置中對齊 --*/ background-size: auto, cover; /* -- 第一張原來大小不變，第2張自動填滿 --*/ } #banner{ padding:20px 0px 0px 130px; } /* -- 部落格描述位置 --*/ #banner h1{font-size: 20px; font-weight: bold; padding-bottom: 5px;} #banner h1 a:hover{position: relative; top: 1px; left: 1px;} #banner h2{color: #000000; line-height: 160%;} #banner .skiplink, #blog-category{ display: none;} /*--------------------- 連結區塊 -------*/ #navigation{width: 350px; position: absolute; right: 0px; top: 10px; padding: 5px 5px 5px 15px;} /*--其他服務連結區塊內的所有連結--*/ #navigation a:before{content: "● "; color: #ff3; padding-left: 6px; padding-right: 2px;} #navigation a{ float: right; color: #000000; display: block; padding: 2px 10px 2px 0px;} #navigation a:hover{color: #efe;} /*---------------------- 主框架 -----*/ body{font-size: 16px ; font-family:"Arial" ; background: var(--box-line) url(https://pic.pimg.tw/lamkwanfai/1565783768-2502559437.gif); /* 底色 */ overflow-x: hidden; } #container{ min-width: 810px;} @media all and (max-width: 800px) { #container{ min-width: 700px;} } #main{position: relative;} #content{ margin-left: 270px; min-width: 510px;} /*------ 側邊欄位 --*/ #links{overflow : hidden; position: absolute; padding: 0px 0px 7px 5px; top: 0px; /* <<<<<<< */ left: 0px; border-right: 2px ridge var(--box-line); box-shadow: 1px 2px 6px 2px rgba(30, 30, 30, 0.2); background: #FFBFEF url(https://pic.pimg.tw/lamkwanfai/1565783853-4226298353.gif); /*＜＜背景 --*/ width: 265px; /* ＜＜寬度 --*/} #links A:hover{color: #FFA347; } /* ＜＜超連結 --*/ #links-row-1, #links-row-2 { width: 255px; padding: 10px 10px 0px 15px; display: inline-block; margin: -2px 0px;} #links-row-1 div:first-child {width:0px; height:0px; margin-left: -2000px; display:none !important;} /* ＜＜廣告區塊 --*/ /*-------- Box -------------------*/ .box{width: 240px; padding: 0px; margin-bottom: 20px;} .box-title{ font-weight: bold; text-shadow: -1px -1px white, 1px 1px #777; border-bottom: 2px groove #EA872D; color: #EA5A00; padding-left: 15px; padding-bottom: 4px; margin-bottom: 5px;} .box-text {padding: 0px 0px 10px 0px; /* 側欄、文字顏色 ~ >> color: #000; */ color: #CC6600;} .box-text a{ color: #A05000; /* ＜＜＜　側欄、文字顏色－－ */ } .box-text a:hover{ color:#e6d; position: relative; top: 0px; left: 0px;} .box-more{margin:5px; text-align:center;} .box-more a{font-size:11px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 2px 10px;} .box-more a:hover{} /*--公告區--*/ #spotlight{margin: 0 20px; padding: 10px 0px; line-height: 180%; overflow : hidden; border-bottom: 1px var(--bb-color) dotted; display:none; /*---- 隱藏~公告區塊 ++ 只有在首頁才會出現，若不要這功能，將此行移除 --- */} #spotlight h5{ float: left; width: 28px; font-size: 17px; /* << 放大字體 ---*/ color: yellow; /* << 文字顏色 ---------*/ text-shadow: -1px -2px #FF0000, 1px 1px orange, 0px 1px 8px black; /* << 增加文字陰影特效 */ letter-spacing: 2px; padding: 5px 10px; background: var(--bb-color); text-align: center; color: var(--sec-color); margin: 0px 7px;} #spotlight-text{color: #000000; padding: 5px 8px;} #blog-main #spotlight{display:block;} /*-- 在首頁會顯示公告區 --*/ /* ------------ 首頁模式 ----*/ #article-area{padding: 15px; margin: 0 auto; overflow : hidden; clear: both;} #blog-main #article-box{ display:flex; flex-flow: row wrap;} .article:nth-child(3n+1){flex: 2 1 320px;} /* ＜＜＜＜＜＜＜＜＜＜＜＜不規則的磚牆模式＜＜＜＜＜＜*/ .article{margin: 8px; flex: 1 0 280px; background: var(--sec-color); overflow: hidden; padding: 12px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; box-shadow: 1px 1px 3px -1px rgba(20%,20%,40%,0.7), 0px 3px 8px 2px rgba(50,50,60,0.4); color: #000000;} .article, .article A{-webkit-transition:.6s; -moz-transition:.6s; -o-transition:.6s; transition:.6s;} .article a:hover {padding:5px; color:#f03060; box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.2), 0px 2px 13px rgba(0, 0, 0, 0.3);} #blog-main .article:hover{ background: #FFE9D3; /*<<<<<< <<<滑鼠進入時、底色變淡 */ position: relative; color: var(--box-line); top: 1px; left: 1px;} .article-head{padding-bottom: 5px; margin-bottom: 5px;} .article-head .publish{font-weight: bold; color: #FFC183; text-shadow: black 1px 1px 3px; /* << 文字特效 */ font-size:20px; text-align: center; padding-right: 5px; line-height: 150%;} .article-head .publish .day{display: none;} .article-head .publish .time{display: none;} .article-head .title{ border-bottom: #D07828 1px dotted; line-height: 150%;} .article-head .title a{ color: #000000;} #blog-main .article-content img {top:0; left:0; margin-right: 10px !important; width:120px; height:120px; display:block; position: absolute; border:2px solid #FFA347;} #blog-main .article-content:before { content: " "; width: 130px; line-height: 120px; height: 130px; float: left;} #blog-main .article-keyword{display: none;} .article-content {position: relative; line-height: 150%; min-height:135px; padding: 5px 0px;} .author, .article-footer{display: none;} .article-content .more a{ width: 100%; height: 100%; position: absolute; top: 0px; z-index:100; font-size: 0px; display: block;} /*--頁數 --*/ .page {padding: 30px 0px 10px; text-align:center; clear:both;} .page a,.page SPAN {padding:1px 7px; line-height:120%; margin:1px 3px; border:1px solid var(--box-line); color: #FFA347; font-size:18px; background:url(https://pic.pimg.tw/pixnetvisual/4bf6015b4a652.jpg) left top no-repeat;} .page SPAN { background: #FFE9D0; } .page A:hover { background: #FFE9D0; border-color: #FFB76F; } /*---------------- 文章模式 ------------*/ #article-main .article{ padding: 20px 25px 10px; float: none;} #article-main .article:hover{top: 0px; left: 0px;} #article-main .publish{width:200px;} #article-main .publish .month:after{ content: '- '; padding: 0px 2px 0px 2px;} #article-main .publish .date:after{content: '- '; padding: 0px 2px 0px 2px;} #article-main .title{ line-height: 110%;} #article-main .article-content{height: auto;} #article-main .article-content img{ height: auto; max-width:100%; border:0;} .bookmark{padding: 10px 0px;} #article-main .author{display: block; padding-top: 20px; border-top: var(--bb-color) 1px dotted;} #article-main .article-footer{font-size: 15px ; display: block; line-height: 200%;} .back-to-top{text-align: right;} #pixblogad{display:none;} /*------------------- 分類、列表模式 -----------*/ #category-main .article-content img{float:left; position: absolute; width: 120px; height:120px; top: 0px; left: 0px;} #category-main .article-keyword{display: none;} #category-main .article-content {max-height:200px; min-height:130px; padding-left:130px; flex:1 0 400px;} #category-main .more a{left:-1px;} #category-main #article-box{ display:flex; flex-flow: row wrap;} #category-main .article{ flex:1 0 380px;} .article-area-title:before{display: inline-block; width: 48px; height: 15px; margin: 0px 15px 0px 5px; content: ">>>>";} .article-area-title{color: #000000; width:100%; margin: -10px 10px 0 10px; padding: 10px 0px 5px 0px;} #view-mode{width:100%;} #view-mode #display:before{ display: inline-block; width: 48px; height: 15px; margin: 0px 15px 0px 5px; content: ">>>>";} #view-mode #display{margin: 0px 10px 10px 10px; padding: 5px 10px 15px 0px; color: #000000; border-bottom: 1px var(--bb-color) dotted;} #view-mode a{color: #000000;} #view-mode a:hover{position: relative; top: 1px; left: 1px;} .main-list{padding: 0px 10px;} .main-list table{width: 100%;} .main-list table tr{border-bottom: var(--bb-color) 1px dotted;} .main-list table tr:hover{ background: #ddd;} .main-list table th,td{padding: 7px;} /*--- 類別 ----*/ #category{} #category .box-title{} #category .box-text {} #category li{padding-left:30px; border-bottom: 1px dashed var(--box-line); height: 28px; padding-top: 3px; background:url(https://pic.pimg.tw/hoyu0528/1564405793-121647000.png) no-repeat top 5px left 10px;} #category h6{height: 25px; padding-top: 5px; padding-left: 15px;} #category h6:hover{color: var(--sec-color);} #category .box-text h6 img{display: none;} #category .box-more{display:none;} /*-- 最近，文章 --*/ #recent-article{} #recent-article .box-title{} #recent-article .box-text {} #recent-article .box-text a{display: block; width: 215px; background: url(https://pic.pimg.tw/hoyu0528/1564406063-4105488869.png) no-repeat top left; padding-left:15px; line-height:1.5;} #recent-article li{border-bottom: 1px dashed var(--box-line); padding-top:4px; padding-bottom:4px;} /*-- 熱門文章 --*/ #hot-article{} #hot-article .box-title{} #hot-article .box-text {} #hot-article .box-text a{ display: block; width: 215px; background:url(https://pic.pimg.tw/hoyu0528/1564405792-549985242.png) no-repeat top 5px left; padding-left:15px; line-height:1.5;} #hot-article li{ border-bottom: 1px dashed var(--box-line); paddinurlg-top:4px; padding-bottom:4px;} /*-- 我的鏈接 --*/ #mylink{} #mylink .box-title{} #mylink .box-text {} #mylink .box-text a{ display: block; width: 215px; background:url(https://pic.pimg.tw/hoyu0528/1564405792-1764932715.png) no-repeat top left; padding-left:15px; line-height:1.5;} #mylink li{border-bottom: 1px dashed var(--box-line); padding-top:4px; padding-bottom:4px;} /*-- 參觀人氣 --*/ #counter{} #counter .box-title{} #counter .box-text {} #counter li{ border-bottom: 1px dashed var(--box-line); padding-top:5px; padding-bottom:7px; padding-left:15px;} /*-- 最新註釋 --*/ #latest-comment{} #latest-comment .box-title{} #latest-comment .box-text {} #latest-comment li{ border-bottom: 1px dashed var(--box-line); padding-top:5px; padding-bottom:7px; padding-left:15px;} /*--- 好友 ---*/ #friendbox ul.friendlist{height: auto !important;} #friendbox.box-text{} #friendbox .box-text ul:after { content: " "; display: block; height: 0px; clear: both; overflow: hidden;} #friendbox .box-text li {float: left; padding-right:8px; padding-bottom:7px;} #friendbox .box-text img{-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; width: 49px; height: 49px;} #friendbox .box-text img:hover{position: relative; top: 1px; left: 1px;} /*-- 訪客 --*/ #visitor{} #visitor .box-text{} #visitor .box-text ul:after {content: " "; display: block; height: 0px; clear: both; overflow: hidden;} #visitor .box-text li {float: left; padding-right:8px; padding-bottom:7px;} #visitor .box-text img{-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; width: 49px; height: 49px;} #visitor .box-text img:hover{position: relative; top: 1px; left: 1px;} /*-- crumb --*/ #crumb{} #crumb .box-text{} #crumb .box-text ul:after {content: " "; display: block; height: 0px; clear: both; overflow: hidden;} #crumb .box-text li {float: left; padding-right:8px; padding-bottom:7px;} #crumb .box-text img{-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; width: 49px; height: 49px;} #crumb .box-text img:hover{ position: relative; top: 1px; left: 1px;} /*-- 搜尋 --*/ #search-target{ margin: 10px 0px; padding: 2px 0px; width: 100%; border: 0px; color: var(--sec-color); background: #000000;} #search-submit{width:100%; border: 0px; color: #000; background: transparent;} /*-- archive --*/ #archive select{width:230px; border: 0px; color: var(--sec-color);} /*-- 日曆 --*/ #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: var(--bb-color); color: #FFA347; display:block;} #calendar td a:hover{position: relative; top: 1px; left: 1px;} /*-- user-info --*/ #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; background:#ccc; padding:0px; border:0px solid #666; margin-bottom:5px;} /* ----------------------- 留言區塊----- */ #user-post{ background: var(--sec-color); margin: 30px 10px 0px 10px; padding: 40px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; box-shadow: 1px 1px 3px -1px rgba(20%,20%,40%,0.5);} #comment-box{width:100%;} #comment-box h3:before{content: "";} #comment-box h3{ margin: 0px; padding: 10px 0px;} .post-comment{padding: 10px 0px; border-bottom: #bbb dotted 1px;} .post-comment a:before{content: "► "; font-size: 10px;} .post-comment:hover a{ color: #000000;} /*-- 單一留言+回應 --*/ .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: 80px; height: 80px; border-radius: 50%; -moz-transition:.6s; -o-transition:.6s; transition:.6s;} .post-photo img:hover {border-radius: 0%;} .post-text{padding: 0px 80px 10px 0px; line-height: 150%; border-bottom: 2px groove #FFA347;} .reply-text{color: #D07828; padding: 0px 80px 0px 10px; line-height: 150%; border-left: #FFB76F solid 4px;} .reply-text p{padding-top: 10px; padding-bottom: 2px;} .reply-text a{color: #FFA347;} .reply-text a:hover{ position: relative; top: 1px; left: 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 var(--bb-color) 1px; position: relative;} .single-post:hover{ background: #FFEAC0;} .secret{min-height: 0px;} .secret li:before{content: "- "; padding-right: 5px;} .secret li:after{ content: "- "; padding-left: 5px;} .secret li{ padding: 0px;} .post-info .user-name a{ margin: 0 5px 0px 0px;} .post-info .user-name img, .reply-text .comment-icon{ display: none;} /* -------------留言撰寫 --------------------*/ #container #main #content #user-post #comment-box #comment-area { width: 95%; padding: 0px; box-shadow: 1px 2px 6px 2px rgba(30, 30, 30, 0.3);} #container #main #content #user-post #comment-box #comment-area-2 { width: 95%; background: #FFEAC0; 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%; border: 0px; padding: 0px; padding-bottom: 5px; background: none; } #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:var(--comment-bg); 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:var(--comment-bg); width: 98%; padding: 5px; margin-bottom:5px; min-height:150px ; resize: vertical;} #container #main #content #user-post #comment-box .captcha{ background: var(--comment-bg); 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; } #container #main #content #user-post #comment-box a.reload-captcha:hover{ position: absolute; top:22px; left:0px; color: #000000;} #container #main #content #user-post #comment-box .comment-extra{ 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: var(--comment-bg); border: 0px;} #container #main #content #user-post #comment-box .extra{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: var(--comment-bg); 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: var(--comment-bg); border: 0px;} li.reply-text > form > textarea {background:#f9ecdf;} /* <<<---------------------------------??? */ /*--------------------- 頁尾 */ #footer{width: 1000px; padding: 30px; line-height: 200%;} #footer a:hover{position: relative; top: 1px; left: 1px;} #footer #bottom{padding: 10px 0px; text-align: center;} /*-------------------------------- 上下文章連結 */ #pix_article_switch{width: 1000px !important; margin-left: -660px !important;} /*-- 隱藏 ~ 不需要的元件 --*/ /*--歷史上的今天 ++ 轉寄文章 --*/ .history, .forward{display:none;} #ad-full-page, #pixblogad,#idle-pop,#pixblogad-banner2,.author-profile, * [id*="sas_"]{display:none !important;} .article-body > div:last-child {width:0px; height:0px; margin-left: -2000px; } #bottom, * [class*="ppiiad-dt"]{display:none !important;} #content .recommended-posts3, .article-inread-ad, #comment-text > div {display:none} #comment-text ul li.post-info > span.user-name img{display:none;} .pixnet-happix-pilot__launcher-bubble__btn_happix_ufo{display:none;} .pixnet-happix-pilot__launcher-bubble,#pix-mib-unfold-ad { left:3000px; display:none;} /* ------------Google瀏覽器的捲軸設定 ------------ */ ::-webkit-scrollbar{ /*捲軸的底色*/ background-color: var(--bb-color);} ::-webkit-scrollbar-thumb{ /*捲軸主體的顏色*/ background-color: #FFC183; -webkit-border-radius: 6px ;} ::-webkit-scrollbar-button:vertical:decrement{ /* 捲軸上方的箭頭 */ background-image: url("https://s1.gifyu.com/images/L0001X01.png"); background-repeat: no-repeat;} ::-webkit-scrollbar-button:vertical:increment { /* 捲軸下方的箭頭 */ background-image: url("https://s1.gifyu.com/images/L0001X02.png") ; background-repeat: no-repeat;}

版面設定 <<< 必看

1 - 首頁文章顯示、最好不要設定、由系統決定顯示幾行摘要。 >>>

2 - 撰寫完文章時，請插入"繼續閱讀"，建議在繼續閱讀前放入一張照片即可。

3 - 側邊欄位，兩邊都可以隨便放，不用硬放在一邊。

4 - 側邊欄位的第一個版位已被移除，所以不要去移動 側欄廣告。