星兒的收藏

      
熱帶魚 ❤️❤️ Flex 版型 ❤️❤️

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

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

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

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: #3484D6; /* ＜＜＜　所有側欄的虛線顏色 (10)－ */ --comment-bg: #D0DEF4; /* ＜＜＜　留言撰寫的底色 (6)－ */ --bb-color: #8297CB; /* ＜＜＜　主要的虛線和其他 (8)－ */ --sec-color: #D0DEF4; /* ＜＜＜　次要顏色 (6)－ */} #content{flex: 1 1 0px ; order:0;} /* ---- 改 order:1; 為左欄位 --- */ /*-------------------- 部落格資訊 -------*/ #header{ height:500px; /* <<<++++++++++++++++ 調高 ~ 高度<*/ position: relative; border-bottom: 1px dotted var(--bb-color); text-shadow: 1px 1px white, -1px -1px #aaa; /* << 文字特效 */ /*--- 背景圖片、第一張 vvvv 位置大小固定不變。*/ background: url() top left 5px no-repeat, url(https://i.imgur.com/gvaewx9.jpg) center; /*＜＜背景圖片、第2張" 置中對齊 --*/ background-size: auto, cover; /* -- 第一張原來大小不變，第2張自動填滿 --*/ } #banner{ padding:100px 0px 0px 110px; } /* -- 部落格描述位置 --*/ #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: 22px 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/1564748562-1816582571.gif); /* 底色 */ overflow-x: hidden; } #container{ position: relative; z-index:200; min-width:760px;} #main{ display:flex; min-width:760px; flex-flow: row nowrap;} /*------ 側邊欄位 --*/ #links{flex: 0 0 265px; /* ＜＜寬度 --*/ overflow : hidden; 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: #FFBFEF url(https://pic.pimg.tw/lamkwanfai/1565247817-863080554.gif); /*＜＜背景 --*/} #links A:hover{color: #3484D6; } /* ＜＜超連結 --*/ #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 #1A75D1; color: #005AB4; padding-left: 15px; padding-bottom: 4px; margin-bottom: 5px;} .box-text {padding: 0px 0px 10px 0px; /* 側欄、文字顏色 ~ >> color: #000; */ color: #005AB4;} .box-text a{ color: #002850; /* ＜＜＜　側欄、文字顏色－－ */ } .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{ background: #D0DEF4 url(https://pic.pimg.tw/hoyu0528/1567827253-3661259586.png) right top no-repeat;} /*-- ++ 移動圖釘 -- */ #blog-main .article:hover{ /*-- 若把背景的位置 right /top，設一樣，就不會移動，只剩下變色 --*/ background: #9CC0EA url(https://pic.pimg.tw/hoyu0528/1567827266-3723938295.png) right 12px top 2px no-repeat; /*<<<<<< <<<滑鼠進入時、底色變淡 ++ 移動圖釘 -- */ 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: #B6CFEF; 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: #4E93DB 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 #3484D6;} #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: #3484D6; font-size:18px; background:url(https://pic.pimg.tw/pixnetvisual/4bf6015b4a652.jpg) left top no-repeat;} .page SPAN { background: #D5EAFF; } .page A:hover { background: #D5EAFF; border-color: #005AB4; } /*---------------- 文章模式 ------------*/ #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/1567880694-882981175.gif) 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/1567880645-30653901.gif) 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/1567880645-1976592422.gif) 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/1567880694-1577248876.gif) 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: #3484D6; 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{ color:red; font-size: 16px; } .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 #3484D6;} .reply-text{color: #005AB4; padding: 0px 80px 0px 10px; line-height: 150%; border-left: #4E93DB solid 4px;} .reply-text p{padding-top: 10px; padding-bottom: 2px;} .reply-text a{color: #68A2E0;} .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: #9CC0EA;} .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: #9CC0EA; 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: #D0DEF4;} /* <<<---------------------------------??? */ /*--------------------- 頁尾 */ #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: #9CC0EA;} ::-webkit-scrollbar-thumb{ /*捲軸主體的顏色*/ background-color: #68A2E0; -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 - 側邊欄位的第一個版位已被移除，所以不要去移動 側欄廣告。

5 - 摘要的高度、彼此差異不要太大。

6 - 建議不要安裝、LazyLoad 延遲圖片載入

7 - 左、右欄位自已選，在部落格資訊的上一行 ~ 有註解標示，order:0 為右欄位、order:1 為左欄位。