❤️灰鴿❤️

 
雪白色系  ️️ 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: #867; /* << 主要虛線顏色 - */ } /*--------------- 部落格資訊 -------*/ #header{ height:520px; /* << 標頭高度 */ position: relative; border-bottom: 1px dotted #8297CB; text-shadow: 1px 1px 5px #ffd090, -1px -1px #aaa; /* << 文字特效 */ background: url(https://pimg.1px.tw/e717/1605682841-2196183587-g.jpg) no-repeat; /* 底圖 */ background-size: cover; } #banner{padding: 20px 0px 5px 130px;} /* <<<<<*/ #banner h1{font-size: 20px; font-weight: bold; padding-bottom: 5px;} #banner h1 a:hover{position: relative; top: 1px; left: 1px;} #banner h2{font-size: 20px; font-weight: bold; line-height: 160%;} #banner .skiplink, #blog-category{ display: none;} /*----------------- 連結區塊 -------*/ #navigation{ width: 220px; position: absolute; right: 28px; bottom: 0px; padding: 8px; background: #fff9f999; } /*--其他服務連結區塊內的所有連結--*/ #navigation a:before{content: " "; color: #3300ff; padding-left: 6px; padding-right: 2px;} #navigation a{float: right; color: #000; display: block; padding: 2px 10px 2px 0px;} #navigation a:hover{color: #3355ff;} #link-guestbook{display:none;} /*----------------- 主框架 -----*/ body{ font-size: 15px ; font-family:"Arial", "Century Gothic",微軟正黑體; background: #fff; /* 底色 */ overflow-x: hidden; } #container, #main { min-width: 760px !important;} #container { position: relative;} #main { display:flex; flex-flow: row nowrap;} #content {flex: 2 0 500px ; order:0;} /* ---- order:0; 為右欄位 --- */ /*------ 側邊欄位 --*/ #links { margin-right: 10px ; min-width:280px; max-width:380px; /* << 寬度 最大 380px --*/ flex: 1 0 0px; } #links A:hover{color: #C6055F; } /* << 超連結 --*/ #links-row-1, #links-row-2{ width: 98%; padding: 20px 0px; display: inline-block; margin: -2px 0px;} #links li:nth-child(2n+2){background: rgba(110, 110, 110, 0.1);} #links-row-1 div:first-child, #links-row-1{width:0px; height:0px; margin-left: -2000px; display:none !important;} /* << 廣告區塊 --*/ /*-------- Box -------------------*/ .box{ width: 90%; padding: 10px; margin: 10px; background: transparent; /*<< 背景 --*/ } .box-title{ text-shadow: -1px -1px white, 1px 1px #777; border-bottom: 2px groove #fff; background: rgba(50,50,50,0.2); font-size:20px; font-weight: bold; line-height: 180%; padding-bottom: 5px; margin-bottom: 8px; } .box-title:before{ content: " "; font-size: 16px; color:#fa1080; } .box-text {padding: 0px 0px 10px 0px; /* 側欄、文字顏色 >> */ color: #000;} .box-text li:last-child{border-bottom:0 !important;} .box-text a{ color: #999; /* <<< 側欄、文字顏色 -- */ } .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 #aaa dotted; display:none; /*---- 隱藏公告區塊 ++ 只有在首頁才會出現,若不要這功能,將此行移除 --- */ } #spotlight h5{ float: left; width: 28px; color: #777; letter-spacing: 2px; padding: 5px 10px; background: #aaa; text-align: center; color: #ffffff; margin: 0px 7px; } #spotlight-text{ color: #777; padding: 5px 70px; } #blog-main #spotlight{display:block;} /*-- 在首頁會顯示公告區 --*/ /* ------------ 首頁模式 ----*/ #article-area{ padding: 15px; margin: 0 auto; overflow : hidden; clear: both; } .article{ margin: 5px 8px; background: white linear-gradient(#bbb, #ccc 3%, transparent 60%) no-repeat; background-size: 100% 70px; 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: black; position: relative; } #blog-main #article-box{ display:flex; flex-flow: row-reverse wrap; justify-content: center; } #blog-main #article-area{padding: 10px 20px;} #blog-main .article{ flex: 1 0 300px; border:1px solid #999; max-width:450px; border-radius: 15px 15px 0 0; display: inline-block; padding: 0 0 10px 0; margin-bottom:10px; } .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{ position: relative; color:#f9d; top: 1px; left: 1px; box-shadow: 2px 2px 6px rgba(30, 30, 30,0.4); } .article-head{ padding-bottom: 5px; margin-bottom: 5px;} #blog-main .article-head{ color:#fff; margin: 265px 0 0 0; } #blog-main .article-head .publish{ display: none; } .article-head .publish .day{display: none;} .article-head .publish .time{display: none;} .article-head .title{ padding: 6px 0px; border-bottom: #555 1px dotted; line-height: 150%;} #blog-main .article-head .title{ overflow: hidden; text-overflow: ellipsis; padding: 10px; border:0px; background:rgba(20,20,20,0.5); position: relative; z-index:20; bottom:8px; } #blog-main .article-head .title a{ font-weight: bold; font-size:18px; color:#fff; } .article-head .title a{ color: #68a; } #blog-main .article-content-inner IMG{ position: absolute; top: 0px; left:0; width:100.5% !important; height:300px !important; transition: 1s; } #blog-main .article-keyword, #blog-main #box745049{display: none;} .article-content { line-height: 150%; padding: 0 10px; background:; margin-bottom:8px; } #blog-main .article-content {max-height: 200px;} /*--- 96px --*/ .author, .article-footer{display: none;} .article-content .more a{ width: 100%; height: 100%; position: absolute; top: 0px; left:0; font-size: 0px; display: block; } #blog-main .article:hover IMG{-webkit-filter:grayscale(0.8) brightness(90%);} /*-- 頁數 --*/ .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 #888; color:#999; font-size:18px; background:url(https://pimg.1px.tw/pixnetvisual/4bf6015b4a652.jpg) left top no-repeat; } .page SPAN { background:#fde; } .page A:hover { background:#ffc; border-color:red; } /*---------------- 文章模式 ------------*/ #article-main .article{ padding: 20px 12px 5px; 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: #8297CB 1px dotted;} #article-main .article-footer{font-size: 15px ; display: block; line-height: 200%;} .back-to-top{text-align: right;} #pixblogad, #article-main .showMore{display:none;} /*------------------- 分類、列表模式 -----------*/ #category-main .article-content img{position: absolute; max-width:250px; width: 120px; height:120px; top: 10px; left: 5px; transition:.8s;} #category-main .article-content:hover img{ width:60%; height:90%;} #category-main .article-head { text-align: center; padding: 0 0 5px 100px; } #category-main .article-keyword{display: none;} #category-main .article-content {max-height:250px; 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; margin: 13px 8px;} .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 #8297CB 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: #8297CB 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://pimg.1px.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:#ffffff; } #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://pimg.1px.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://pimg.1px.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://pimg.1px.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: #ffffff; background: #777; } #search-submit{ width:100%; border: 0px; color: #000; background: transparent; } /*-- archive --*/ #archive select{ width:230px; border: 0px; color: #ffffff; } /*-- 日曆 --*/ #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:#699; 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{ margin: 30px 10px 0px 10px; } #user-post img{max-width:100%;} #comment-box{width:100%;} #comment-box h3:before{content: "";} #comment-box h3{margin: 0px; padding: 10px 0px;} .post-comment{padding: 10px 0px; border-bottom: 2px groove #aaa;} .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: 8px 80px 10px 0px; line-height: 150%; border-bottom: #aaa dotted 2px;} .reply-text{color: #B46033; margin-left: 15px; padding: 5px 10px; line-height: 150%; border-left: #6aeafb solid 4px;} .reply-text p{ padding: 2px 100px;} .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: solid #aaa 1px; position: relative; margin-top: 25px; border-radius: 120px / 15px; box-shadow: 1px 1px 5px rgba(20%,20%,40%,0.6); background: white; /*--- 留言板 底色 --*/ } .single-post:hover{background: rgba(100,100,100,0.2);} .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-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); } .comment-textarea { width: calc(99% + 7px) !important; background:rgba(180,210,240,0.2) !important; border:1px solid #ccc !important; } #comment_text { margin:3px !important; color: #2040F0 !important; background:rgba(250,250,250,0.1) !important; width:calc(99% - 8px) !important; min-height:230px ; transition: box-shadow 0.3s linear 0.1s; } #comment_text:focus{color: #333 !important; background:#fff !important; box-shadow:0px 0px 15px rgba(250,50,50,0.5);} .comment-identity{ background-image: linear-gradient(#eee, #fff, #ccc)!important; } /*--------------------- 頁尾 */ #footer{ width: 95%; padding-right: 240px; padding-top: 10px; line-height: 200%; } #footer a:hover{ position: relative; top: 1px; left: 1px; } #footer #bottom{ padding: 10px 0px; text-align: center; } /*-------------------------------- 上下文章連結 */ #pix_article_switch{ width: 95% !important; margin-left: -660px !important; } /*-- 隱藏 不需要的元件 --*/ .tag-container-parent,#content .pix-related-post, #pix-mib-unfold-ad, .history, .forward {display:none !important;} #ad-full-page, #pixblogad,#idle-pop,.author-profile, * [id*="sas_"]{display:none !important;} .article-body > div:last-child {width:0px; height:0px; margin-left: -2000px; } #bottom, .article-inread-ad, #comment-text > div {display:none}

版面設定 <<< 必看

1 - 首頁文章顯示、最好設定、視單篇文章之設定。 >>>

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

3 - 側邊欄位,最好放在一邊。

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

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

6 - 左、右欄位自已選,在部落格資訊上方 有註解標示,order:0 為右欄位、order:1 為左欄位。

 閱覽本文時,會被隱藏的摘要區塊

<div class="showMore"> 插入圖片 1. 摘要內容 <br />2. 摘要內容 <br />3.摘要內容<!-- more --></div>