最近開始研究CSS語法,看了幾本書,花了好多時間才稍微看懂一點,… 暈 @_@
看了書總要實際操作一下嘛,於是把以前畫的圖畫詩篇插畫拿來從新設計一下,並用痞客部落來實驗囉~ ^_^!
正好痞客正舉辦「痞客樣式伸展台」比賽,就順便投稿參加 …如果你喜歡「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 就按「儲存」鈕,這樣就套用成功了。 ^_^
====================
最近都沒畫新的圖…慚愧 -_-!!!
呃…和大家回味一下以前在個人網站發表過的圖畫詩篇吧! ^_^!... 混
全站熱搜
留言列表