版面設計｜版型分享｜版型客製｜免費的版型分享｜T3-極簡風格 @ 梅花問路

免費樣式分享免費版型免費樣式痞客邦樣式極簡風格-1 梅花問路

免費樣式分享免費版型免費樣式痞客邦樣式極簡風格-2 梅花問路

注意：此樣式可以自由索取使用，取用樣式語法請記得先留言告知呦。

(我都是從痞客邦官方樣式開始摸索的，這兩款亮色系先送給有需要的朋友了，之後再出兩款暗色的喔！)

說明：整體寬度1030px/文章區寬度720px/側欄寬度310px/基礎底色為半透明的白色/字型是google字體圓體18px

以下語法複製，在複製框裡面將語法全選，接著按Ctrl+C（複製），然後就可以到您自己的CSS語法界面按Ctrl+V（貼上）

(貼上之前記得清空原先的樣式語法設定後再貼上)，有任何問題請留言告知或是詢問。

DIY TIPS：

❖ 想要自己換封面，請在您的CSS語法裡面搜尋字串#header，自己將圖片上傳到自己的痞客邦相簿後更改括弧裡面的圖片位址background: url() ;

換封面的教學 ⋙梅花的CSS筆記｜更換封面橫幅的圖片

❖想要自己換底圖，請在您的CSS語法裡面搜尋字串body{，自己將圖片上傳到自己的痞客邦相簿後更改括弧裡面的圖片位址background: url() ;

換底圖的教學 ⋙梅花的CSS筆記｜更換部落格背景底圖

❖看更多的語法筆記⋙點我看所有梅花的實用的CSS版面設計及語法筆記

❖發現bug或有任何問題請在底下留言。

第一款的語法：

@import url("https://fonts.googleapis.com/earlyaccess/cwtexyen.css");
/*--------------------------------------reset 此區塊請勿更動*/
*{ margin:0;padding:0;}
table {border-collapse:collapse;border-spacing:0;}
fieldset,img {border:0;}
address,caption,cite,code,dfn,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;}
.article-content p{margin-bottom: 1em;}
a { text-decoration: none; }
br{letter-spacing: normal;}
/*-------------------------------電腦版頁面的空白區--------------------------------------*/
@media (max-width: 1100px) {
body{ background-color:transparent; }
}
/*----------------------------------------------------------------------*/
body{
background:url(https://lh3.googleusercontent.com/pw/ACtC-3ccSiiNH0kyzdcHZscgi6V5NxSBKG5GxUzMlHBGPDFwr_1xlQNGZcpkkMz-sgDB6iBKPwoNMRyP2KKh5ytBaBFQTsWyk_ZvKphr2fd8OmZk3etB0wkIsSsWyRVbMxssjIEZmbDR3pIT9SbGCWXVGK0HCw=w1440-h525-no?authuser=0); /*---更換底圖的地方---*/
font-size:18px;
color:#747474;
line-height:150%;
font-family:'cwTeXYen', Century Gothic;;
letter-spacing:1px;
line-height:30px;
font-size:18px\9;
}
#body-div{
}
a{
color:#666 ;
text-decoration:none ;
}
a:hover{
color:#b00 ;
}

#authority a{
position: absolute;
width: 200px;
height: 65px;
line-height: 65px;
background: #fff;
border: 2px solid #fff;
z-index: 999;
right: -220px;
position: fixed;
text-align:left;
padding-left:20px;
-webkit-box-shadow:0px 1px 1px #c1ba1a;
box-shadow:0px 1px 1px #c1ba1a;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
}
#authority a:hover{
right: -65px;
}
#authority #newpost{margin-top:10px;}
#authority #newpost:before {
content: url(https://pic.pimg.tw/pixnetvisual/1362368418-398157967.png);
display: block;
position: absolute;
width: 65px;
height: 100%;
left: -72px;
margin-top: -2px;
background: #fff;
border: 2px solid #fff;
border-radius: 10px 0 0 10px;
border-right: transparent;
-webkit-box-shadow:0px 1px 1px #c1ba1a;
box-shadow:0px 1px 1px #c1ba1a;
padding: 0 5px;
}
#authority #backstage{margin-top:85px;}
#authority #backstage:before{
content: url(https://pic.pimg.tw/pixnetvisual/1362368417-993915313.png);
display: block;
position: absolute;
width: 65px;
height: 100%;
left: -72px;
margin-top: -2px;
background: #fff;
border: 2px solid #fff;
border-radius: 10px 0 0 10px;
border-right: transparent;
-webkit-box-shadow:0px 1px 1px #c1ba1a;
box-shadow:0px 1px 1px #c1ba1a;
padding: 0 5px;
}
/*底層圖片底層和兩側*/
#container{
}
#container2{
}
/*也是底層圖片較靠近中間的區域*/
#container3{
margin:0 auto;
width: 1100px;
background-attachment:fixed ;
margin-top: -55px; /*消除最上方的白條*/
}
#main{
overflow:hidden;
}
/* --------------------------------------------------------------- 頁首 ---------------------------------------------------------------*/
#header{
position:relative;
background: url(https://lh3.googleusercontent.com/pw/ACtC-3f2pTJmm8cbg-zN_Ha5yP5n1VW_s2PNBpxlWDONUUlQNPXkkt1z420Hv7dvCks8YvEp2H8J5g1_cLBM6TomOag-Y24xl9Zypn6XV4hUNwd8S2tVS6QKJZUfBJiQCxetMQs9ifzIX30ZClgKlK0N3Vyefg=w1339-h753-no?authuser=0) center center;
background-size: cover;
padding-bottom:20px;
width:1030px;
height: 480px;
margin-bottom: 110px;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
opacity: 1\9;
-webkit-animation:fadeOutTop 1s ease .5s forwards;
-moz-animation:fadeOutTop 1s ease .5s forwards;
-ms-animation:fadeOutTop 1s ease .5s forwards;
-o-animation:fadeOutTop 1s ease .5s forwards;
animation:fadeOutTop 1s ease .5s forwards;
}
@keyframes "fadeOutTop" {
0% {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-o-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
-o-transform: translateY(10px);
-ms-transform: translateY(10px);
transform: translateY(10px);
}
}
@-moz-keyframes fadeOutTop {
0% {
filter: alpha(opacity=0);
opacity: 0;
-moz-transform: translateY(0);
transform: translateY(0);
}
100% {
filter: alpha(opacity=100);
opacity: 1;
-moz-transform: translateY(10px);
transform: translateY(10px);
}
}
@-webkit-keyframes "fadeOutTop" {
0% {
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
}
@-ms-keyframes "fadeOutTop" {
0% {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-ms-transform: translateY(10px);
transform: translateY(10px);
}
}
@-o-keyframes "fadeOutTop" {
0% {
filter: alpha(opacity=0);
opacity: 0;
-o-transform: translateY(0);
transform: translateY(0);
}
100% {
filter: alpha(opacity=100);
opacity: 1;
-o-transform: translateY(10px);
transform: translateY(10px);
}
}
#login-bar{
color:#747474;
font-size:12px\9;
text-align:right ;
position: absolute;
top: 10px;
left: 500px;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
opacity: 1\9;
-webkit-animation:fadeOutRight 2s ease 2s forwards;
-moz-animation:fadeOutRight 2s ease 2s forwards;
-ms-animation:fadeOutRight 2s ease 2s forwards;
-o-animation:fadeOutRight 2s ease 2s forwards;
animation:fadeOutRight 2s ease 2s forwards;
}
@keyframes "fadeOutRight" {
0% {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-o-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
100% {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: translateX(20px);
-moz-transform: translateX(20px);
-o-transform: translateX(20px);
-ms-transform: translateX(20px);
transform: translateX(20px);
}
}
@-moz-keyframes fadeOutRight {
0% {
filter: alpha(opacity=0);
opacity: 0;
-moz-transform: translateX(0);
transform: translateX(0);
}
100% {
filter: alpha(opacity=100);
opacity: 1;
-moz-transform: translateX(20px);
transform: translateX(20px);
}
}
@-webkit-keyframes "fadeOutRight" {
0% {
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: translateX(20px);
transform: translateX(20px);
}
}
@-ms-keyframes "fadeOutRight" {
0% {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-ms-transform: translateX(0);
transform: translateX(0);
}
100% {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-ms-transform: translateX(20px);
transform: translateX(20px);
}
}
@-o-keyframes "fadeOutRight" {
0% {
filter: alpha(opacity=0);
opacity: 0;
-o-transform: translateX(0);
transform: translateX(0);
}
100% {
filter: alpha(opacity=100);
opacity: 1;
-o-transform: translateX(20px);
transform: translateX(20px);
}
}
#login-bar a{
color:#747474;
}
#banner{
width: 1030px;
position: absolute;
top: 297px;
text-align: center;
}
/*部落格標題可以用自製標題圖片取代*/
#banner h1 a{
text-align: center;
position:relative;
display: block;
font-weight:bold ;
line-height: 26px;
font-size: 53px;
color: #504f4f;
text-shadow: 0px 2px 1px #bbbaba;
text-indent:;
background: url() center no-repeat;
}
#banner h1 a:hover {
color: #666;
text-shadow: 0px 2px 1px #fff;
}
#banner .skiplink{display:none;}
#banner h2{
font-weight: bold;
margin-top:10px;
}
#blog-category{
font-weight: bold;
display:inline-block;
color:#757575;
margin:10px 0 0px 0;
display: none;
}
#blog-category a{
color:#757575;
}
#navigation{
overflow:hidden ;
_overflow:none ;
_height:1% ;
width: 360px;
text-align:center;
position: absolute;
right: 0;
top: 355px;
display: none;
}
#navigation a{
display:block ;
text-align:center ;
}
#navigation li{
float:left ;
width:80px;
height:80px;
display: inline-block;
margin: 0px 10px 30px 0px;
}
#navigation li a{
font-family: 'cwTeXYen';
color:#ccc;
display:inline-block;
font-size:15px;
line-height:80px;
font-weight:blod;
}
#link-album,#link-blog,#link-guestbook,#link-profile {
background-color: transparent;
border-radius: 50% 50%;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
-ms-transition: all 0.5s;
transition: all 0.5s;
}
#link-album:hover,#link-blog:hover,#link-guestbook:hover,#link-profile:hover {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
-ms-transition: all 0.5s;
transition: all 0.5s;
}
#link-album:hover a:after,#link-blog:hover a:after,#link-guestbook:hover a:after,#link-profile:hover a:after{
display:block;
line-height:80px;
font-size:12px;
color:#666;
background:transparent;
width:80px;
height:80px;
position:absolute;
top:0;
left:0;
webkit-border-radius:50% 50%;
-moz-border-radius:50% 50%;
-o-border-radius:50% 50%;
border-radius:50% 50%;
}
#link-album:hover a:after{
content: 'album';
}
#link-blog:hover a:after{
content: 'blog';
}
#link-guestbook:hover a:after{
content: 'guestbook';
}
#link-profile:hover a:after{
content: 'profile';
}
#content{
width:720px;
float:left;
display:inline;
}
#spotlight{
padding:0;
border-bottom: 2px solid #fffefd85;
border-top: 2px solid #fffefd85;
}
#spotlight h5{
background:#fffefd85;
color:#757575;
display:inline;
padding: 2px 5px;
font-size: 22px;
font-weight: 900;
}
#spotlight-text{
margin-top:5px;
padding:10px;
}
#article-area{
}
#article-box{margin-top:30px;}
.article-area-title{
padding: 3px 7px;
}
#display{
text-align:right;
margin : 5px 0px ;
}
#display span{}
#display a{}
.article{
background: #fff;
border-bottom: 6px solid white;
border: 1px solid #fff;
background: rgba(255, 255, 255, 0.5);
margin-bottom: 25px;
}
/*文章標題前面的小圖示*/
.article-head{
position:relative;
width:620px;
background:url(https://lh3.googleusercontent.com/pw/ACtC-3cVt7ado_II2OOrb1wVLy49p8eTUJKfXYu-cvdG9qdkEPduoVURtRG3lVp9tIV4scUG-X_QuXEkPaHSQa9hf7c72iqPMF7-JtLuGrEM0Zn7zREEiOqHQYZKsnzTES8fjtVCHtAkU-GUe28tPO1XoKAHMw=s200-no?authuser=0) left top no-repeat;
background-size: 21%;
margin: 13px 0 20px 0;
padding-top: 10px;
}
.publish{
color:#757575;
font-family:verdana;
font-size: 16px;
padding-left: 110px;
}
.month{}
.date{}
.day{display:none;}
.year{}
.time{display:none;}
.title{
padding-left: 80px;
width: 580px;
}
.title h2 a{
position: relative;
font-size: 22px;
color: #222;
display: inline;
top: 5px;
left: 40px;
font-weight: 900;
overflow: hidden;
height: 20px;
max-width: 100%;
word-break: break-all;
}
.title h2 img{
position: relative;
padding-top: 5px;
}
.article-body{
}
.fans-club{display:none;}
.bookmark{
text-align:right ;
line-height: 60px;
}
.article-content{
line-height: 25px ;
padding:0 20px;
}
.article-content .article-content-inner {
max-width: 100%;
overflow: hidden;
word-break: break-all;
}
.more{}
.author{
padding-right:30px;
text-align:right ;
padding-bottom: 5px ;
}
.article-footer{
padding-bottom:30px;

}
.refer{
padding-left:20px;
}
.history{
padding-left:20px;
}
#article-adsense{
padding-left:20px;
}
.forward{
padding:0 20px;
text-align:right ;
}
.back-to-top{
text-align:right ;
padding-right:30px;
}
#user-post{
margin-top:20px;
}
#user-post a{
}
#trackback-box{
margin-bottom: 20px;
}
#comment-box{
position:relative;
}
/*訪客留言的顯示*/
#comment-box .post-text{
background: transparent;
padding: 10px 15px;
position:relative;
width: 226px;
float: right;
right: 253px;
}
#comment-box .post-text::before{
display:block;
content:'';
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 0 20px 20px;
border-color: transparent transparent #ffffff transparent;
z-index:999;
position: absolute;
left: -17px;
}
.user-post-box{
border-top:1px solid #FFF ;
}
#trackback-title{}
#comment-title{}
.user-post-title{
background: rgba(255, 255, 255, 0.5);
color:#757575 ;
padding: 5px 10px ;
margin-bottom: 10px ;
}
#trackback-text{}
#comment-text{}
.user-post-text{
padding:20px ;
}
#trackback-box .single-post{}
#comment-box .single-post{}
.single-post{
margin-bottom: 20px ;
padding: 10px ;
overflow:hidden;_overflow:none;_height:1%;
}
.post-info{
border-top:1px dashed #ccc;
padding-bottom: 5px ;
margin-bottom: 10px ;
font-weight:bold ;
}
/*訪客留言的顯示*/
.post-text{
width: 480px;
float: right;
margin-bottom: 10px;
}
#trackback-box .post-text{
width: auto ;
float:none ;
}
.post-text p{}
.post-photo{
width:150px ;
float:left ;
text-align:Center ;
}
/*作者回覆留言的顯示*/
.reply-text{
padding-top: 5px;
width: 230px;
float: right;
padding:0 20px 10px 20px;
border-left: 1px solid #CCC;
position: absolute;
right: 0;
}
.reply-text p{}
/
.secret{}
.post-comment{
margin:10px;
display:inline;
position:absolute;
top: -15px;
right: -18px;
width:127px;
height:37px;
padding-top: 10px;
color:#666;
}
.post-comment a{ padding-left: 38px;color:#666;}
.main-list{
padding:10px ;
margin-bottom: 15px ;
}
.main-list table{
width:95% ;
margin:10px;
}
.main-list h3{
background:#888 ;
padding: 5px 10px ;
margin-bottom: 10px;
}
.main-list th{
}
.main-list td{
letter-spacing: 0px;
letter-spacing: 1px \9;
line-height: 29px;
border-bottom: 1px dashed #999;
}
.main-list a{
}
#article-list{}
#category-list{}
#murmur-list{}
.page{
text-align: center;
margin-top: 0px;
margin-bottom: 20px;}
.page a{ padding:10px;}
.page span{ border:1px solid #fff;padding:5px 10px;}
#links{
width:310px ;
float:right;

}
#links a{
color:#444;
}
#links-row-1{
width: 310px;
position: relative;
margin-left: 10px;
}
/*廣告放在側欄2 隱藏側欄2 隱藏側欄廣告*/
#links-row-2{
width:180px ;
position: relative;
display: none;
}
.box{
border-top: 2px solid #fffefd85;
margin-bottom: 20px;
}
.box-title{
text-align: left;
font-size: 22px ;
font-weight: 900;
display: inline-block;
margin-bottom: 20px;
color: #757575;
letter-spacing: 0.1em;
padding: 2px 5px;
background: #fffefd85;
}
.box-text{
}
.box-text li{
margin: 5px 0px ;
}
.box-text a{
}
#visitor{}
#visitor .box-title{}
#visitor .box-text{}
#visitor ul{
_height: 1% ;
overflow: hidden ;
_overflow: none ;
}
#visitor li{
float:left;
}
#visitor .box-more{}
#crumb{}
#crumb .box-title{}
#crumb .box-text{}
#crumb ul{
_height: 1% ;
overflow: hidden ;
_overflow: none ;
}
#crumb li{
float:left;
}
#crumb .box-more{}
#announce{}
#announce .box-title{}
#announce .box-text{}
#announce a{}
#murmur{}
#murmur .box-title{}
#murmur .box-text{}
#my-time{}
#murmur-text{}
#broadcast{}
#broadcast .box-title{}
#broadcast .box-text{}
#broadcast .box-text ul{
border-bottom: 1px dashed #777 ;
_height:1% ;
overflow: hidden ;
_overflow: none ;
}
.broadcast-photo{
float:left ;
width:40px ;
}
.broadcast-time{}
.broadcast-text{}
#headshot{}
#headshot .box-title{}
#headshot .box-text{}
#headshot .box-text img{}
#search{}
#search .box-title{}
#search .box-text{}
#search-target{}
#search-send{}
#counter{}
#counter .box-title{}
#counter .box-text{}
#countr .box-text span{}
#change-theme{}
#change-theme .box-title{}
#change-theme .box-text{}
#change-theme select{}
#feed{}
#feed .box-title{}
#feed .box-text{}
#feed img{}
#calendar{}
#calendar table{width:90%;margin:0 auto;text-align:center;font-size:12px;}
#calendar th{text-align:center;color:#000; font-weight:bold;}
#calendar th a {color:#000;}
#calendar td{text-align:center;}
#calendar .calMonthHeader{}
#calendar td b {color:#b00;}
#calendar td a{background:#FFF; padding:2px 6px; color:#444;}
#calendar td a:hover{ color:#04BBB7;background:#fff;}
#recent-article{}
#recent-article .box-title{}
#recent-article .box-text{}
#recent-article .box-text a{}
#hot-article{}
#hot-article .box-title{}
#hot-article .box-text{}
#hot-article .box-text a{}
#category{}
#category .box-title{}
#category .box-text{}
#category .box-text h6{}
#category .box-text h6 img{
border:1px solid #000;}
#category .box-text li a{padding-left:10px;}
#archive{}
#archive .box-title{}
#archive .box-text{}
#archive .box-text select{}
#archive .box-text li a{}
#latest-comment{}
#latest-comment .box-title{}
#latest-comment .box-text{}
#latest-comment .box-text span{}
#latest-comment .box-text li a{}
#latest-trackback{}
#latest-trackback .boc-title{}
#latest-trackback .box-text{}
#latest-trackback .box-text li a{}
#latest-trackback .box-text li span{}
#subscription{}
#subscription .box-title{}
#subscription .box-text{}
#subscription .box-text li a{}
#subscription .box-text li span{}
#favorite{}
#favorite .box-title{}
#favorite .box-text{}
#favorite .box-text select{}
#mylink{}
#mylink .box-title{}
#mylink .box-text{}
#my-link .box-text .link-box{}
#my-link .box-text .link-box h6{}
#my-link .box-text .link-box li a{}
.folder{}
.folder .box-title{}
.folder .box-text{}
#powered{}
#powered .box-title{}
#powered .box-text{}
/*頁尾區塊*/
#footer{
clear: both;
color: #999;
background: rgb(255, 255, 255, 0.4);
text-align:left;
padding-left:10px;
}
#footer:hover{
}
#footer ::after {
text-align: center;
display: block;
content: "© CSS DESIGNED BY MEIHWA @ MEIHWAWENRU ICYIN.PIXNET.NET";
}
#footer p{text-align: center;}
#footer #bottom{}

/*頂端列透明化可以放LOGO或是標語*/
.pixnavbar {background-color: transparent !important;}
.pixnavbar__top-bar__logo {background: url(LOGO或標語圖片位址) no-repeat;}
.pixnavbar-d__navbar .pixnavbar__top-bar__logo {width:400px !important ;height: 113px !important ;}
.pixnavbar, .pixnavbar-d__navbar .pixnavbar__top-bar__pix-site, .pixnavbar__top-bar__list {background-color: transparent !important;}

/*創作者介紹區塊字體放大以及調整底色*/
.author-profile__name, .author-profile__main, .author-profile__header, .author-profile__info {font-size: 20px !Important;}
.author-profile__main { background-color : rgb(255, 255, 255, 0.7) !Important;}

/*隱藏每篇文章裡面作者自己設定的標籤*/
.article-keyword {display:none;}
/*隱藏文章裡面的你可能有興趣的文章*/
#content .recommended-posts3 {display:none;}

/*隱藏版面最後面的回到頁首回到主文免費註冊等等按鈕*/
#bottom ,.bottom-skiplink ,.bottom-pixnet {display:none;}

第二款的語法：

@import url("https://fonts.googleapis.com/earlyaccess/cwtexyen.css");
/*--------------------------------------reset 此區塊請勿更動*/
*{ margin:0;padding:0;}
table {border-collapse:collapse;border-spacing:0;}
fieldset,img {border:0;}
address,caption,cite,code,dfn,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;}
.article-content p{margin-bottom: 1em;}
a { text-decoration: none; }
br{letter-spacing: normal;}
/*-------------------------------電腦版頁面的空白區--------------------------------------*/
@media (max-width: 1100px) {
body{ background-color:transparent; }
}
/*----------------------------------------------------------------------*/
body{
background:url(https://lh3.googleusercontent.com/pw/ACtC-3ck688fY7Fsq6yfhIfca_H_rkCJs_u3Wqv6rD6kyBp5kokzVqVeEt52GJ8ptrMeW3bgwMOPoPFamK6BlnaqQjB2dcz4ePrvbB7b0iLFz3zojAgtclN-_gCiklwgYcwKzEtQsgeOj-BVB1oVibckLYSwSA=w702-h1052-no?authuser=0) no-repeat; /*---更換底圖的地方---*/
background-size:cover;
font-size:18px;
color:#747474;
line-height:150%;
font-family:'cwTeXYen', Century Gothic;;
letter-spacing:1px;
line-height:30px;
font-size:18px\9;
}
#body-div{
}
a{
color:#666 ;
text-decoration:none ;
}
a:hover{
color:#b00 ;
}

/*底層圖片底層和兩側*/
#container{
}
#container2{
}
/*也是底層圖片較靠近中間的區域*/
#container3{
margin:0 auto;
width: 1100px;
background-attachment:fixed ;
margin-top: -55px; /*消除最上方的白條*/
}
#main{
overflow:hidden;
}
/* --------------------------------------------------------------- 頁首 ---------------------------------------------------------------*/
#header{
position:relative;
background: url(封面圖片) center center;
background-size: cover;
padding-bottom:20px;
width:1030px;
height: 480px;
margin-bottom: 30px;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
opacity: 1\9;
-webkit-animation:fadeOutTop 1s ease .5s forwards;
-moz-animation:fadeOutTop 1s ease .5s forwards;
-ms-animation:fadeOutTop 1s ease .5s forwards;
-o-animation:fadeOutTop 1s ease .5s forwards;
animation:fadeOutTop 1s ease .5s forwards;
}
@keyframes "fadeOutTop" {
0% {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-o-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
-o-transform: translateY(10px);
-ms-transform: translateY(10px);
transform: translateY(10px);
}
}
@-moz-keyframes fadeOutTop {
0% {
filter: alpha(opacity=0);
opacity: 0;
-moz-transform: translateY(0);
transform: translateY(0);
}
100% {
filter: alpha(opacity=100);
opacity: 1;
-moz-transform: translateY(10px);
transform: translateY(10px);
}
}
@-webkit-keyframes "fadeOutTop" {
0% {
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
}
@-ms-keyframes "fadeOutTop" {
0% {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-ms-transform: translateY(10px);
transform: translateY(10px);
}
}
@-o-keyframes "fadeOutTop" {
0% {
filter: alpha(opacity=0);
opacity: 0;
-o-transform: translateY(0);
transform: translateY(0);
}
100% {
filter: alpha(opacity=100);
opacity: 1;
-o-transform: translateY(10px);
transform: translateY(10px);
}
}
#login-bar{
color:#747474;
font-size:12px\9;
text-align:right ;
position: absolute;
top: 10px;
left: 500px;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
opacity: 1\9;
-webkit-animation:fadeOutRight 2s ease 2s forwards;
-moz-animation:fadeOutRight 2s ease 2s forwards;
-ms-animation:fadeOutRight 2s ease 2s forwards;
-o-animation:fadeOutRight 2s ease 2s forwards;
animation:fadeOutRight 2s ease 2s forwards;
}
@keyframes "fadeOutRight" {
0% {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-o-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
100% {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: translateX(20px);
-moz-transform: translateX(20px);
-o-transform: translateX(20px);
-ms-transform: translateX(20px);
transform: translateX(20px);
}
}
@-moz-keyframes fadeOutRight {
0% {
filter: alpha(opacity=0);
opacity: 0;
-moz-transform: translateX(0);
transform: translateX(0);
}
100% {
filter: alpha(opacity=100);
opacity: 1;
-moz-transform: translateX(20px);
transform: translateX(20px);
}
}
@-webkit-keyframes "fadeOutRight" {
0% {
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: translateX(20px);
transform: translateX(20px);
}
}
@-ms-keyframes "fadeOutRight" {
0% {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-ms-transform: translateX(0);
transform: translateX(0);
}
100% {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-ms-transform: translateX(20px);
transform: translateX(20px);
}
}
@-o-keyframes "fadeOutRight" {
0% {
filter: alpha(opacity=0);
opacity: 0;
-o-transform: translateX(0);
transform: translateX(0);
}
100% {
filter: alpha(opacity=100);
opacity: 1;
-o-transform: translateX(20px);
transform: translateX(20px);
}
}
#login-bar a{
color:#747474;
}
#banner{
width: 1030px;
position: absolute;
top: 297px;
text-align: center;
}
/*部落格標題可以用自製標題圖片取代*/
#banner h1 a{
text-align: center;
position:relative;
display: block;
font-weight:bold ;
line-height: 26px;
font-size: 53px;
color: #504f4f;
text-shadow: 0px 2px 1px #bbbaba;
text-indent:;
background: url() center no-repeat;
}
#banner h1 a:hover {
color: #666;
text-shadow: 0px 2px 1px #fff;
}
#banner .skiplink{display:none;}
#banner h2{
font-weight: bold;
margin-top:10px;
}
#blog-category{
font-weight: bold;
display:inline-block;
color:#757575;
margin:10px 0 0px 0;
display: none;
}
#blog-category a{
color:#757575;
}
#navigation{
overflow:hidden ;
_overflow:none ;
_height:1% ;
width: 360px;
text-align:center;
position: absolute;
right: 0;
top: 355px;
display: none;
}
#navigation a{
display:block ;
text-align:center ;
}
#navigation li{
float:left ;
width:80px;
height:80px;
display: inline-block;
margin: 0px 10px 30px 0px;
}
#navigation li a{
font-family: 'cwTeXYen';
color:#ccc;
display:inline-block;
font-size:15px;
line-height:80px;
font-weight:blod;
}
#link-album,#link-blog,#link-guestbook,#link-profile {
background-color: transparent;
border-radius: 50% 50%;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
-ms-transition: all 0.5s;
transition: all 0.5s;
}
#link-album:hover,#link-blog:hover,#link-guestbook:hover,#link-profile:hover {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
-ms-transition: all 0.5s;
transition: all 0.5s;
}
#link-album:hover a:after,#link-blog:hover a:after,#link-guestbook:hover a:after,#link-profile:hover a:after{
display:block;
line-height:80px;
font-size:12px;
color:#666;
background:transparent;
width:80px;
height:80px;
position:absolute;
top:0;
left:0;
webkit-border-radius:50% 50%;
-moz-border-radius:50% 50%;
-o-border-radius:50% 50%;
border-radius:50% 50%;
}
#link-album:hover a:after{
content: 'album';
}
#link-blog:hover a:after{
content: 'blog';
}
#link-guestbook:hover a:after{
content: 'guestbook';
}
#link-profile:hover a:after{
content: 'profile';
}
#content{
width:720px;
float:left;
display:inline;
}
#spotlight{
padding:0;
border-bottom: 2px solid #fffefd85;
border-top: 2px solid #fffefd85;
}
#spotlight h5{
background:#fffefd85;
color:#757575;
display:inline;
padding: 2px 5px;
font-size: 22px;
font-weight: 900;
}
#spotlight-text{
margin-top:5px;
padding:10px;
}
#article-area{
}
#article-box{margin-top:30px;}
.article-area-title{
padding: 3px 7px;
}
#display{
text-align:right;
margin : 5px 0px ;
}
#display span{}
#display a{}
.article{
background: #fff;
border-bottom: 6px solid white;
border: 1px solid #fff;
background: rgba(255, 255, 255, 0.5);
margin-bottom: 25px;
}
/*文章標題前面的小圖示*/
.article-head{
position:relative;
width:620px;
background:url(https://lh3.googleusercontent.com/pw/ACtC-3cVt7ado_II2OOrb1wVLy49p8eTUJKfXYu-cvdG9qdkEPduoVURtRG3lVp9tIV4scUG-X_QuXEkPaHSQa9hf7c72iqPMF7-JtLuGrEM0Zn7zREEiOqHQYZKsnzTES8fjtVCHtAkU-GUe28tPO1XoKAHMw=s200-no?authuser=0) left top no-repeat;
background-size: 21%;
margin: 13px 0 20px 0;
padding-top: 10px;
}
.publish{
color:#757575;
font-family:verdana;
font-size: 16px;
padding-left: 110px;
}
.month{}
.date{}
.day{display:none;}
.year{}
.time{display:none;}
.title{
padding-left: 80px;
width: 580px;
}
.title h2 a{
position: relative;
font-size: 22px;
color: #222;
display: inline;
top: 5px;
left: 40px;
font-weight: 900;
overflow: hidden;
height: 20px;
max-width: 100%;
word-break: break-all;
}
.title h2 img{
position: relative;
padding-top: 5px;
}
.article-body{
}
.fans-club{display:none;}
.bookmark{
text-align:right ;
line-height: 60px;
}
.article-content{
line-height: 25px ;
padding:0 20px;
}
.article-content .article-content-inner {
max-width: 100%;
overflow: hidden;
word-break: break-all;
}
.more{}
.author{
padding-right:30px;
text-align:right ;
padding-bottom: 5px ;
}
.article-footer{
padding-bottom:30px;