星兒的收藏

  RWD 版型分享 

右二欄位版型

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

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

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

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

CSS語法

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

/*-- 粉紅色的夢 2 -- 2019/09/2 --*/ * { 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: blue; /* ＜＜＜　所有側欄的虛線顏色 (7)－ */ --main-color:#FF6FB7; /* ＜＜＜　主要的虛線和其他 (12)－ */ --sec-color: #FFDEF4; /* ＜＜＜　次要顏色 (6)－ */ } /*-------------------- 部落格資訊 -------*/ #header{ height:380px; position: relative; border-bottom: 1px dotted var(--main-color); text-shadow: 1px 1px white, -1px -1px #aaa; /* << 文字特效 */ /*--- 背景圖片、第一張 vvvv 位置大小固定不變。*/ background: url(https://pic.pimg.tw/lamkwanfai/1564813028-4082077824.png) top left 5px no-repeat, url(https://i.imgur.com/JJUIejl.jpg) center no-repeat; /*＜＜ 背景圖片、第2張" 置中對齊 --*/ background-size: auto, cover; /* -- 第一張原來大小不變，第2張自動填滿 --*/ } #banner{ padding:50px 150px;} #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: #333; display: block; padding: 2px 10px 2px 0px;} #navigation a:hover{color: #999;} /*---------------------- 主框架 -----*/ body{ font-size: 16px ; font-family:"Arial" ; background: white url() repeat-y; /* 底色 */ overflow-x: hidden; min-width: 760px; } #container{} #content{ width:calc(100% - 275px); float:left;} #main{clear: both;} @media all and (max-width: 800px) { #container{ min-width: 700px;} } /*------ 側邊欄位 --*/ #links{ overflow : hidden; float:right; padding: 0px 0px 7px 5px; border-right: 2px ridge var(--box-line); box-shadow: 1px 2px 6px 2px rgba(30, 30, 30, 0.2); background: url(https://pic.pimg.tw/hoyu0528/1565071334-3843273003.png) repeat-y; width: 265px; /* ＜＜ 寬度 --*/} #links A:hover{color:#778; } /* ＜＜ 超連結 --*/ #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 #e0e0e0; color: #999; padding-left: 15px; padding-bottom: 4px; margin-bottom: 5px;} .box-text {padding: 0px 0px 10px 0px; /* 側欄、文字顏色 ~ >> color: #000; */ color: #E068A2;} .box-text a{ color: #A00050; /* ＜＜＜　側欄、文字顏色 －－ */ } .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(--main-color) dotted; display:none; /*---- 隱藏~公告區塊 ++ 只有在首頁才會出現，若不要這功能，將此行移除 --- */} #spotlight h5{position: absolute; width: 28px; color: #000000; letter-spacing: 2px; padding: 5px 10px; background: var(--main-color); text-align: center; color: var(--sec-color); margin: 0px 7px;} #spotlight-text{color: #000000; padding: 5px 60px;} #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 360px;} /* ＜＜ ＜＜ ＜＜ ＜＜ 不規則的磚牆模式 ＜＜ ＜＜ */ .article{ margin: 8px; flex: 1 0 260px; 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: #FFEAF7; /*<<<<<< <<<滑鼠進入時、底色變淡 */ position: relative; color: var(--main-color); top: 1px; left: 1px;} .article-head{padding-bottom: 5px; margin-bottom: 5px;} .article-head .publish{font-weight: bold; color:#FFEEF4; text-shadow: black 1px 1px 3px; /* << 文字特效 */ font-size:20px; text-align: center; padding-right: 5px; line-height: 150%;} #blog-main .article-head .publish{ /* -- 螺絲釘 --*/ background: url(https://pic.pimg.tw/hoyu0528/1566976974-778984475.png) left no-repeat, url(https://pic.pimg.tw/hoyu0528/1566976974-778984475.png) right no-repeat; } .article-head .publish .day{display: none;} .article-head .publish .time{display: none;} .article-head .title{border-bottom: #FF5BAD 1px dotted; line-height: 200%;} .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 var(--main-color); } #blog-main .article-content:before {content: " "; width: 130px; line-height: 120px; height: 120px; 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(--main-color); color: var(--main-color); font-size:18px; background:url(https://pic.pimg.tw/pixnetvisual/4bf6015b4a652.jpg) left top no-repeat;} .page SPAN { background:#fde; } .page A:hover { background:#ffb; border-color:red; } /*---------------- 文章模式 ------------*/ #article-main .article{padding: 20px 25px 10px; } #article-main .article:hover{ top: 0px; left: 0px;} #article-main .publish{text-align:right;} #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{} #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(--main-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(--main-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(--main-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: #ddd; color: var(--main-color); 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: 100px;} #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 #D65BFF;} .reply-text{color: #FF83C1; padding: 0px 80px 0px 10px; line-height: 150%; border-left: #8fe solid 4px;} .reply-text p{padding-top: 10px; padding-bottom: 2px;} .reply-text a{color: #FF83C1;} .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(--main-color) 1px; position: relative;} .single-post:hover{ background: rgba(250,245,245,0.4);} /*--------*/ .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;} /* -------------留言撰寫 --------------------*/ #comment-area { width:92% !important; } #comment-area *{ font-size:15px !important; border: 0 !important;} .comment-identity{ background: #f78 !important; } /*------- 底色(2) ------*/ #comment-area-2 { width:100% !important; -moz-box-shadow:1px 2px 8px rgba(50,50,50,0.6); -webkit-box-shadow:1px 2px 8px rgba(50,50,50,0.6); box-shadow:1px 2px 8px rgba(50,50,50,0.6); background: #f78 !important; /*-------- 底色(2) ------*/ } .comment-textarea { width: calc(99% + 7px) !important; background:#ffeef0 !important; /*------ 底色(1) -------*/ } #comment_text { margin:3px !important; color: #2040F0 !important; width:calc(99% - 8px) !important; min-height:200px ; transition: box-shadow 0.3s linear 0.1s; background: transparent !important; border: 1px solid #aaa !important; } #comment_text:focus{color: #333 !important; background:#fff !important; box-shadow:0px 0px 15px rgba(250,50,50,0.5);} li.reply-text > form > textarea {background:#ffe0e7;} /* << 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;}

版面設定 <<< 必看

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

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

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

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