海、RWD 版型分享(#9468524414)

水色系 ️️ 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:#888; text-decoration:none ;} a:hover{text-decoration:none ;} textarea{font-size: 13px;} /*-------------------- 部落格資訊 -------*/ #header{ height:500px; /* <<<<*/ position: relative; border-bottom: 1px solid #777; text-shadow: 1px 1px 5px #ffd090, -1px -1px #aaa; /* << 文字特效 */ /*--- 背景圖片*/ background: url(https://pic.pimg.tw/e717/1404879054-1139068293.jpg) no-repeat center; background-size: cover; } #banner{padding: 20px 0px 5px 130px;} /* <<<<<<<<*/ #banner h1 a{ color: black; 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: 8px; top: 10px; padding: 5px 5px 5px 15px;} /*--其他服務連結區塊內的所有連結--*/ #navigation a:before{content: " "; color: #ffee33; padding-left: 6px; padding-right: 2px;} #navigation a{float: right; color: #f03399; display: block; padding: 2px 10px 2px 0px;} #navigation a:hover{color: #efe;} /*---------------------- 主框架 -----*/ body{font-size: 16px ; font-family:"Arial", "Century Gothic", 微軟正黑體; background: white; /* 底色 */ overflow-x: hidden; } #container{ position: relative; background: white; min-width:760px;} #main{ display:flex; min-width:760px; flex-flow: row nowrap;} #content{flex: 1 1 0px ; order:0;} /* ---- 改 order:1; 為左欄位 --- */ /*------ 側邊欄位 --*/ #links{ background: rgba(10, 200, 250, 0.2) ; padding: 0px 0px 7px 5px; border:1px solid #77b; width: 265px; /* << 寬度 --*/} #links A:hover{color: #ee0066; } /* << 超連結 --*/ #links-row-1, #links-row-2{width: 250px; padding: 0px; margin: 0px;} #links-row-1 div:first-child {width:0px; height:0px; margin-left: -2000px; display:none !important;} /* << 廣告區塊 --*/ /*-------- Box -------------------*/ :root { --box-line: #777; /* <<< 側欄的虛線顏色 - */ } .box{width: 240px; padding: 10px; margin-bottom: 10px; } .box-title{ text-shadow: -1px -1px white, 1px 1px #777; border-bottom: 2px groove #fff; background: url(https://pic.pimg.tw/hoyu0528/1564655441-2647393334.jpg) no-repeat; font-size:18px; font-weight: bold; line-height: 180%; padding-left: 15px; margin-bottom: 8px; box-shadow: 1px 1px 3px -1px rgba(20%,20%,20%,0.8), 0px 2px 7px 1px rgba(50,50,60,0.6); } .box-title:before{ content: " "; font-size: 16px; color:#fa1080; } .box-text {padding: 0px 0px 10px 0px; /* 側欄、文字顏色 >> */ color: #666;} .box-text a{ color: #2050ff; /* <<< 側欄、文字顏色 -- */ } .box-text a:hover{ position: relative; top: 1px; 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 #8297CB dotted; display:none; /*---- 隱藏公告區塊 ++ 只有在首頁才會出現,若不要這功能,將此行移除 --- */} #spotlight h5{float: left; width: 28px; color: #000000; letter-spacing: 2px; padding: 5px 10px; background: #8297CB; text-align: center; color: #D0DEF4; margin: 0px 7px;} #spotlight-text{color: #000000; padding: 5px 8px;} #blog-main #spotlight{display:block;} /*-- 在首頁會顯示公告區 --*/ /* ------------ 首頁模式 ----*/ #article-area{ padding: 15px; overflow : hidden; } .article{ margin: 5px 8px 10px; overflow: hidden; -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: #666; position: relative; } #blog-main #article-box{ display:flex; flex-flow: row wrap; justify-content: center; } #blog-main .article:nth-child(1){ /*-- 第一篇文章 --*/ min-height:400px; flex: 1 100%; /*-- 100% 佔全頁--*/ } #blog-main .article:nth-child(1) .article-content {max-height:550px;} #blog-main .article:nth-child(n+2){ flex: 1 0 300px; max-width:500px; color:#69e; background:#eee; border:1px solid #999; border-radius: 10px; padding-bottom: 20px; min-height:250px; max-height:380px; /*-- 文章摘要限高 --*/ text-shadow: 1px 1px white, -1px -1px #444; } .article, .article A{ -webkit-transition:.6s; -moz-transition:.6s; -o-transition:.6s; transition:.6s; } .article a:hover { padding:5px; color:#f03060; } .article-head{ padding: 10px; margin-bottom: 5px; border-bottom: 1px dashed #35f; } #blog-main .article-head{ border:0; padding: 0px; color:#fff; text-shadow: -1px -1px white, 1px 1px #222; } #blog-main .article-head .publish{ display: none;} .article-head .publish .day{display: none;} .article-head .publish .time{display: none;} .article-head .title{ padding-bottom: 6px; line-height: 180%;} #blog-main .article-head .title{ padding: 6px 0px; text-align:center; font-weight: bold; background: #9cf; } .article-head .title a{ font-weight: bold; color: #666; } #blog-main .article:nth-child(n+2) IMG{ width: 100% !important; position: absolute; left: 0; top: 40px; height:auto; max-height:380px; transition: 1s; } #blog-main .article-content-inner iframe{ width: 100% !important; } #blog-main .article-keyword{display: none;} .article-content { line-height: 150%; padding: 0 10px; margin-bottom:8px; font-family: "Century Gothic",微軟正黑體; } #blog-main .article-content {max-height: 370px ; } .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:nth-child(1):hover{color:#59f;} #blog-main .article:nth-child(n+2):hover IMG{transform: translate(105%,100%);} /*--頁數 --*/ .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 #67c; color:#999; font-size:18px; background:url(https://pic.pimg.tw/pixnetvisual/4bf6015b4a652.jpg) left top no-repeat; } .page SPAN { background:#fde; } .page A:hover { background:#ffa; border-color: red; } /*---------------- 文章模式 ------------*/ #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: #8297CB 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{ position: absolute; width: 120px; height:120px; top: 73px; left: 10px;} #category-main .article-keyword{display: none;} #category-main .article-content {max-height:200px; min-height:130px; padding-left:140px; flex:1 0 400px;} #category-main .more a{left:-1px;} #category-main #article-box{ display:flex; flex-flow: row wrap;} #category-main .article{ color:#59f; flex:1 0 380px;} #category-main .article:hover{ color:#f59;} .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://pic.pimg.tw/hoyu0528/1564405792-1764932715.png) no-repeat top 5px left 10px;} #category h6{height: 25px; padding-top: 5px; padding-left: 15px;} #category h6:hover{color:#D0DEF4;} #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/1564405793-2060394515.png) no-repeat top 3px 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: #D0DEF4; background: #000000;} #search-submit{width:100%; border: 0px; color: #000; background: transparent;} /*-- archive --*/ #archive select{width:230px; border: 0px; color: #D0DEF4;} /*-- 日曆 --*/ #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: #B6CFEF; 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: rgba(230, 235, 250, 0.2) ; margin: 30px 10px 0px 10px; padding: 40px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; box-shadow: 1px 1px 3px 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: 2px groove #aaa;} .post-comment a:before{content: " "; font-size: 10px;} .post-comment a{color:#50f060;} .post-comment:hover a{ color: #ddd;} /*-- 單一留言+回應 --*/ .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: #aaa dotted 2px;} .reply-text{color: orange; padding: 0px 80px 0px 10px; line-height: 150%; border-left: #a0f066 solid 4px;} .reply-text p{padding-top: 10px; padding-bottom: 2px;} .reply-text a{color:#50f060;} .reply-text a:hover{position: relative; top: 1px; left: 1px;} .single-post{padding: 20px; min-height: 55px; -webkit-transition: background 0.6s ease-out; -moz-transition: background 0.6s ease-out; -o-transition: background 0.6s ease-out; transition: background 0.6s ease-out; border-bottom: groove #eee 2px; position: relative;} .single-post:hover{background: rgba(200,205,210,0.3);} .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; color:#f05060;} .post-info .user-name img, .reply-text .comment-icon{ display: none;} /* -------------留言撰寫 --------------------*/ #comment-area { width:92% !important } #comment-area *{ font-size:15px !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);} /*--------------------- 頁尾 */ #footer{ width: 98%; 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: 98% !important; margin-left: -660px !important;} /*-- 隱藏不需要的元件 --*/ .tag-container-parent, .history, .forward, #article-main .showMore{display:none;} #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} #pix-mib-unfold-ad, #sticky-sidebar-ad { display:none;}

版面設定 <<< 必看

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

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

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

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

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

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

7 - 左、右欄位自已選,在主框架處有註解標示,order:0 為右欄位、order:1 為左欄位。

灰鴿

❤️灰鴿❤️

灰鴿發表在痞客邦留言(0) 人氣(0)

❤️灰鴿❤️

灰鴿 ~