中秋 - 灰鴿版型語法加工－星兒的收藏

中秋版型語法:

/*-- 秋 -- 2019/09/08 ---*/

* { 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:520px; /* <<<++++++++++++++++ 調高 ~ 高度<*/

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/K0pVCZs.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{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 #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;}

星兒

星兒的收藏

星兒發表在痞客邦留言(0) 人氣()

E-mail轉寄

星兒的收藏

浩瀚的網路世界，
多姿多彩的部落格，
蘊藏著豐富美好的寶藏。
我一一將它們採摘回來，
珍藏之。

歡迎光臨