"亭"下來看看
  •  

最近開始研究CSS語法,看了幾本書,花了好多時間才稍微看懂一點,… 暈 @_@

看了書總要實際操作一下嘛,於是把以前畫的圖畫詩篇插畫拿來從新設計一下,並用痞客部落來實驗囉~ ^_^!

 

[樣版]28℃的圖畫詩篇‧那些日子

正好痞客正舉辦「痞客樣式伸展台」比賽,就順便投稿參加 …如果你喜歡「28℃的圖畫詩篇‧那些日子」的這個樣式、希望未來它出現在痞客樣版選單中,那就前往「痞客樣式伸展台」投票 (每位會員一天可投5票) ,加油打氣囉~ 感恩 ^.^

===


樣式「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;
}
/*------------------------------
MAY修正自pixnet範本
http://may01liu.pixnet.net/blog/
------------------------------*/

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

/*--------  AUTHORITY ---------*/
#authority{
    position: absolute;   
left: 5px;
    z-index:300;
}
#authority a{
color:#CC0000 ;
padding: 0px 5px;
font-size:12px;
*font-size:10px;
}
#authority a:hover{
color:#ff9900 ;
}

/*---------  CONTAINER   -----------------------*/
#container{
    background:url(http://p3.p.pixnet.net/albums/userpics/3/2/492432/49a9227858840.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/49a94df977d6f.gif) repeat-y center ;  
    overflow:hidden;
    padding:10px 20px;
_height: 1%;

}


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

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

#login-bar{   
position:absolute ;
top:10px ;
left:700px ;
color:##993399;
}
#login-bar a:hover{
color:#CC0000;
}

#banner{
margin-bottom:10px ;
}

#banner h1 a{  
font-size:30px ;
font-family:"verdana" ;
color:#636 ;
    font-weight: bold ;
    position: absolute;   
    left:250px;
    top:50px;
}

#banner h1 a:hover{
    color:#CC6666;
}

#banner h2{   
     position: absolute;   
     left:350px;
     top:100px;
color:#666 ;
}



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

/*-------- NAVIGATION ----------------*/

#navigation{
}
#navigation li{
float:left ;
}
#navigation a{
display:block ;
height:30px ;
width:68px ;
text-indent:-5000px ;
position:absolute ;
top:61px ;
}

#link-album a{ left:825px; width: 51px;} 
#link-blog a{ left:891px ; width:68px ;}   
#link-guestbook a{ top:103px ; left:825px ;  width:68px ; }   
#link-profile a{ top:103px ; left:916px ; width:51px ;  } 


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

#content a{
}

#spotlight{ 
padding:10px 0px;
margin:0px 15px;
border-bottom:1px #999 solid;
height:305px;
}
#spotlight h5{ 
    color:#cfb79d;
    font-size:18px;
    text-align:left;
font-weight:bold ;
padding:0px 0px 5px 0px;
}
#spotlight-text{
color:#999966 ;
}
#spotlight a{
color:#518CB9 ;
}
#spotlight a:hover{
color:#CC6666 ;
}

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

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





#article-area{
padding:10px ;
}
.article-content{
line-height: 160% ;
}
.article-head{
background:url(http://p3.p.pixnet.net/albums/userpics/3/2/492432/494aa00207596.jpg) no-repeat top left  ;
        padding: 0px 0px 10px 0px ;
margin-bottom:20px;
}

.article-head a{
font-weight: bold ;
}


.article-head a:hover{
color:#ff9900;
}


.article{
_height:1% ;
margin-bottom: 10px;
}

.publish {    
padding:0px 0px 5px 10px ;
color:#666 ;
}
.publish .month ,
.publish .date,
.publish .day ,
.publish .year{
font-size: x-small ;
}
.title{
color:#663399 ; 
    padding:0px 0px 0px 60px;
}
.title a{
    text-align:left;
color:#663399 ;
font-size:18px;
}

.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{
padding:6px ;
}
.history{
text-align:right ;
}
.back-to-top{
text-align:right ;
}
.refer{
float:left ;
}
.trackback-url{
clear:both ;
}
.forward{
clear:both ;
text-align:right ;
}




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

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







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

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


/*--------------------------------- LINKS --------------------------------*/
#links{
float: left;
width: 380px;
color:#888;
}
#links-row-1{      
float: left;
width: 180px;
_height: 349px;
}
#links-row-2{      
float: right;
width: 180px;
position: relative;
left: 580px;
}

#links a{
color:#518CB9 ;
}
#links a:hover{
color:#CC6666;
}

.box{
margin-bottom:10px ;
}
.box-title{ 
color:#444 ;
background:url(http://p3.p.pixnet.net/albums/userpics/3/2/492432/49a95a4dc2af5.gif) no-repeat top ;
padding: 12px 0px 8px 0px;
/*margin: 0px 0px 5px 0px ;*/
font-size:15px ;
    font-weight: bold ;
text-align:center ;
    height: 32px;
}
.box li{
border-bottom: 1px dashed #999 ;
padding: 3px 0px ;
}
.box-more{
text-align:right ;
margin: 0px 0px 2px 0px ;
}
#links .box-more a{
color:#424242 ;
padding:2px 4px 2px 4px ;
}
#links .box-more a:hover{
background:#999 ;
color:#fff;
}
.box h6{
font-weight:bold;
margin-top:3px ;
}


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




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


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

#broadcast li{
border: 0 ;
padding: 0;
}
#broadcast ul{
border-bottom: 1px dashed #999 ;
padding: 5px 0px ;
}
.broadcast-photo{
width: 50px ;
text-align:left ;
float:left ;
}
.broadcast-time span{
font-size: 10px;
display:block ;
}
.broadcast-text{
    padding:0px 5px;
clear:both ;
}





/*-----------------------------------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-right: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:#777 ;
color:#fff;
padding:5px ;
margin-left:115px;
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/49a94df977d6f.gif) repeat-y center ; 
text-align:center ;
padding:5px 0px ;
}
#footer p{  
    width:560px;
    margin:auto;
}

div.page{
    text-align:center;
}



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

#visitor,
#crumb{}
#visitor ul,#crumb ul{
overflow: hidden;
_overflow: none;
_height: 1%;
}
#visitor li,#crumb li{
float: left;
margin-right: 3px;
margin-bottom: 3px;
line-height: 0;
}
#visitor li img,
#crumb li img {
width: 30px;
height: 30px;
}
#visitor .box-more,
#crumb .box-more{
margin-top: 10px;
}



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

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



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


====================

最近都沒畫新的圖…慚愧 -_-!!!
呃…和大家回味一下以前在個人網站發表過的圖畫詩篇吧! ^_^!... 混

 

28℃的圖畫詩篇

本文引用自may01liu - [樣版]28℃的圖畫詩篇‧那些日子

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

【亭】美麗的"心"世界

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


留言列表

發表留言