"亭"下來看看
  •  

又把以前畫的插畫拿來設計成新的部落格樣版…


這個樣式一樣拿去投稿參加「痞客樣式伸展台」..... ^_^!

這版改得不是很順利...
因為對CSS語法的使用不熟,加上要符合痞客樣版的一些規則,在修改時遇到很多次瓶頸…因為我是看書自修 沒人可以問,所以當出現錯誤時都不知錯在哪裡,只能一點一點調整、來回比對修改前後的差異性...昏 @_@


=======
樣式「28℃的圖畫詩篇‧西風的話」的CSS ↓


/*------------------------------ #Generate By Pixnet ------------------------- */
/*------------------------------ #comment-table ------------------------------ */
#comment-form table    {    width: 96% ;    margin: 0 auto ;}
#comment-form td , #comment-form th    {    border: 1px solid #555 ;    padding: 3px 5px;    }
#comment-form input#send-comment    {    padding: 3px 5px ;    }

.article-content p{
margin-bottom:1em;
}
/*------------------------------ #Generate End ------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
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;
}
/*------------------------------
樣本名稱:28℃的圖畫詩篇‧西風的話
MAY修正自pixnet範本
http://may01liu.pixnet.net/blog/
------------------------------*/

body{
background:url() repeat-x top #000;
font-family:"Verdana" ;
}
a{
text-decoration:none ;
color:#518CB9 ;
}
a:hover{
color:#CC0000 ;
}

/*--------  AUTHORITY 後台管理列---------*/
#authority{
    position: relative ;
text-align:center;

}
#authority a{
color:#CC0000 ;
padding: 0px 5px;
font-size:12px;

}
#authority a:hover{
color:#ff9900 ;
}

/*-----------------------------------------  CONTAINER    -----------------------------------------------------*/
#container{
    background:url('http://p3.p.pixnet.net/albums/userpics/3/2/492432/49b0c39cd2456.jpg') no-repeat top #fff ; 
  width:1000px ;
  margin: auto ;
      font-size:13px ;

}
#container2{
}

#main{
    background:url('http://p3.p.pixnet.net/albums/userpics/3/2/492432/49afe33d68a14.gif') repeat-y center ;  
    overflow:hidden;
    padding:0px 0px;
_height: 1%;

}


/*------------------------------ HEADER ----------------------------*/

#header{   
    position:relative;
height:350px;
padding:10px ;
margin:0px ;
}

#login-bar{   
position:absolute ;
top:7px ;
right:50px ;
color:##993399;
}
#login-bar a:hover{
color:#CC0000;
    background-color: #fff;
}

#banner{
margin-bottom:10px ;
}
#banner h1 a{  
font-size:40px ;
color:#fff ;
    font-weight: bold ;
    position: absolute;   
    left:130px;
    top:98px;
}

#banner h2{  
     position: absolute;
color:#333 ;
     left:200px;
     top:210px;
color:#666 ;
}



#banner h1 a:hover{
    color:#CC6666;
}
/*-------- NAVIGATION ---------------*/
#navigation{
    position:absolute;
    left:10px;
    top:5px;
}
#navigation li{
width:60px;
float: left;
margin-right: 3px;
}
#navigation a{
display:block ;
height:17px ;
width:50px ;
padding-top:3px ;
font-size: 14px ;
    color:#000 ;
text-align:Center ;
    font-weight: bold ;
    background-color: #fff;
}
#navigation a:hover{
    color:#fff;
background-color: #666;
}



#banner p.skiplink,#blog-category{
    display:none;
}



/*---------------------------------CONTENT-------------------------------*/
#content{
    position: relative;
    float: right ;
width: 570px;
overflow:hidden ;
right: 216px;
}

#content a{
}


#spotlight{ 
left:20px ;
    top:80px;
margin:0px 15px;
background-color:#F1EBE0;
}
#spotlight h5{
    color:#996666;
    font-size:18px;
    text-align:center;
font-weight:bold ;
background-color:#E8DDCC;
}
#spotlight-text{
color:#669966 ;
padding:5px 5px 5px 5px;
}
#spotlight a{
color:#518CB9 ;
}
#spotlight a:hover{
color:#CC6666 ;
}


h3.article-title-publish-area,#view-mode{ 
    display:none;
}

#sequence{
width:220px ;
float:right ;
text-align:right ;
}
#display{
width:425px;
float:left ;
}


#article-area{
padding:5px ;
}
.article-content{
line-height: 160% ;
}
.article-head{
background:url('http://p3.p.pixnet.net/albums/userpics/3/2/492432/49ac93fe248ff.gif') no-repeat top left  ; 
    padding: 0px 0px 15px 0px ;
margin-bottom:8px;
}
.article-head a{
font-weight: bold ;
}
.article-head a:hover{
color:#ff9900;
}
.article{
_height:1% ;
    margin-bottom: 10px;
}

.title{   
color:#663399 ;
    padding:0px 0px 0px 100px;
}
.title a{
    text-align:left; 
color:#663399 ;
font-size:18px;
}

.publish {    
    padding:10px 0px 0px 100px ;
color:#666 ;
}
.publish .month ,
.publish .date,
.publish .day ,
.publish .year{
font-size: x-small ;
}



.article-body{ 
padding:7px ;
border-bottom: 1px dashed #999 ;
}

.bookmark{    
text-align:right ;
margin-bottom:10px ;
}
.article-body p{
line-height:160% ;
}
.author{
text-align:right ;
}
.related{
margin: 10px 0px 15px 20px ;
}


.article-footer{
color:#996666;
padding:6px ;
background-color:#F1EBE0;
}
.history{
text-align:right ;
}

.refer{
float:left ;
}
.trackback-url{
clear:both ;
}
.forward{
clear:both ;
text-align:right ;
}
.back-to-top{
text-align:right ;
}



/*---------------------------------------ARTICLE-LIST----------------------------------------*/

.article-list table{
width:96% ;
}



/*-----------------------------------------MAIN-LIST --------------------------------------------*/

.main-list{
margin-bottom:0px ;
}
.main-list table{
width: 100% ;
margin: 0 auto ;
}
.main-list th,
.main-list td{
border:1px solid #999 ;
padding: 1px 1px;
}


/*--------------------------------- LINKS --------------------------------*/
#links{
float: left;
color:#666;
}
#links-row-1{     
float: left;
width: 206px;
}
#links-row-2{     
float: right;
width: 206px;
position: relative;
left: 570px;
}

#links a{
color: #fff ;
}
#links a:hover{
color: #990000;
}

.box{
margin-bottom:20px ;
}
.box-title{  /
color:#fff ;
background:url('http://p3.p.pixnet.net/albums/userpics/3/2/492432/49ac93fd6adcb.gif') no-repeat top ;
padding: 10px 0px 0px 40px;
font-size:15px ;
    font-weight: bold ;
text-align:left ;
    height: 37px;
}
.box-more{
text-align:right ;
margin: 0px 0px 2px 0px ;
}
#links .box .box-more a{
display:inline ;
padding:0px ;
bordeR:0px ;
background:#82d1ec ;
color:#fff ;
padding:2px 2px 1px 2px ;
}

.box-text{
    margin: 0px 5px 5px 5px ;
}

.box-text a {
display:block ;
width:97% ;
border-bottom:1px dashed #765C41 ;
padding: 2px 2px 1px 2px ;
}

#links .box-text a:hover{
background:#9f8d76 ;
color:#000 ;
}

.box h6{
font-weight:bold;
margin-top:3px ;
}


/*-----------------------CALENDAR---------------------------*/
#calendar table{
width:99% ;
margin:0 auto ;
}
#calendar th,
#calendar td{
text-align:center ;
}




/*-----------------------murmur ---------------------------*/
#murmur{
overflow:hidden ;
_height:1% ;
}
#murmur li{
border:none ;
}


/*-------------------------------BROADCAST  ----------------------------*/

.broadcast-text{
clear:both ;
}
.broadcast-time span{
display:block ;
}

#broadcast ul{
_height: 1% ;
overflow:hidden ;
_overflow:none ;
border-bottom:1px dashed #333 ;
padding: 5px 0px ;
}

#broadcast a{
padding: 0 ;
border:0 ;
display:inline ;
}

.broadcast-photo{
float:left ;
width:50px ;
text-align:center ;
}


/*-----------------------------------SEARCH------------------------------------------*/

#search-table{
margin: 0 auto ;
}
#search .box-text {
    text-align:center;
}


/*-----------------------NEW-COMMENT---------------------------*/
#new-comment a{
display:block ;
margin:3px 0px 0px 10px ;
}
#new-comment span {
padding-right:5px ;
font-weight:bold ;
font-size:10px ;
letter-spacing:-1px ;
}
#new-comment li{
display:block ;
}


#category .box-more a,
#mylink .box-more a{
padding:0px ;
border:0px ;
}



/*-----------------------RECENT-ARTICLE ---------------------------*/
#recent-article img{
padding-left:4px ;
}


/*-----------------------NEW-TRACKBACK---------------------------*/
#new-trackback a{
display:block ;
}
#new-trackback span{
text-align:right ;
display:block ;
}


/*-----------------------SUBSCRIPTION ---------------------------*/

#subscription a{
display:block ;
}
#subscription span{
text-align:right ;
display:block ;
}




/*-----------------------POWERED --------------------------*/

#powered .box-text{
text-align:center ;

}
#powered li{
border:0px ;
padding:0px ;
}




#counter li,#headshot li,#feed li,#search li{
    border:none;
}

#counter .box-text,#headshot .box-text,#feed .box-text{
   text-align:center;
}



/*-----------------------USER-POST-BOX ---------------------------*/

.user-post-box{
padding:10px ;
}
.user-post-title{
font-size:22px ;
font-family:"Simhei" ;
margin:0px 0px 10px 0px;
    color:#ff9900;
}

.post-comment{
font-size:18px ;
text-align:center ;
margin:0px 5px 15px 5px;
}
#content .post-comment a{
color:#666 ;
padding:3px 10px 5px 10px ;
}


.single-post{
background:#eee ;
padding:10px ;
_height: 1% ;
overflow:hidden ;
_overflow:none ;
margin-bottom:20px ;
}
.post-info{
border-bottom:1px dashed #888 ;
margin-bottom:5px ;
padding-bottom:5px;
/*color:#424242 ;*/
font-weight:bold ;
}
.user-name{
font-size:16px ;
font-family:"Georgia" ;
    color:#ff9900;
}
.post-photo{
width:100px ;
text-align:center ;
float:left ;
}

.post-text{
width:400px ;
padding:0px 0px 5px 0px;
float:right ;
color:#666 ;
}


.reply-text{
background:#ECE0D5 ;
color:#993333;
padding:5px ;
margin-left:5px;
clear:both ;
}

#trackback-box  .post-text{
width:auto ;
float:none ;
}
#trackback-url{
    margin-bottom:10px;
}




#footer{
display:block ;
clear:both ;
background:url('http://p3.p.pixnet.net/albums/userpics/3/2/492432/49afe33d68a14.gif') repeat-y center ;  
text-align:center ;
padding:5px 0px ;
}
#footer p{ 
    width:560px;
    margin:auto;
}

div.page{
    text-align:center;
}



/*------------ VISITOR -----------*/

#crumb,
#visitor {}
#crumb .box-text ,
#visitor .box-text { padding: 0; }
#crumb .box-text ul ,
#visitor .box-text ul {
_height: 1%;
overflow: hidden;
_overflow: none;
padding-left: 8px;
}
#crumb .box-text ul li ,
#visitor .box-text ul li {
float: left;
display: inline;
width: 42px;
height: 42px;
overflow: hidden;
border: none;
padding: 0px 0px 0px 0px;
margin: 0px 5px 5px 0px;
}
#crumb .box-text ul li a img ,
#visitor .box-text ul li a img {
width: 40px;
height: 40px;
border: 1px solid #fff;
}
#crumb .box-text ul li a ,
#visitor .box-text ul li a {
display: block;
width: 35px;
height: 35px;
border: none;
padding: 0px;
}


/*------------------------------ comment-table ------------------------------ */

#comment-form table{
width: 100% ;
margin: 0 auto ;
}
#comment-form td{
border: 1px solid #444 ;
padding: 5px;
}


樣版套用方式:
步驟1. 拷貝上面的CSS程式碼
步驟2. 進入痞客部落格管理後台,點選 樣式管理→樣式設計精靈→CSS原始碼編輯
步驟3. 游標移到CSS原始碼編輯區內 把原來的程式碼全選刪除,接著把剛才拷貝新樣式的CSS碼 貼上,
步驟4. 按「預覽」測試一下,如果OK 就按「儲存」鈕,這樣就套用成功了。 ^_^

本文引用自may01liu - [樣式]28℃的圖畫詩篇‧西風的話

創作者介紹
創作者 亭ting 的頭像
亭ting

【亭】美麗的"心"世界

亭ting 發表在 痞客邦 留言(0) 人氣()


留言列表

發表留言