使用說明,這兩款只有底圖改變,其他都不變,因此如果要直接複製這兩款過去,請決定要讓他出現哪一張底圖,接著修改不出現的底圖,方式如下:
★ 讓#01底圖出現
background:#FFF url(http://static.flickr.com/35/72932569_7184f18d2b_o.jpg) top center;/*01底圖*/
/*background:#FFF url(http://static.flickr.com/34/72932542_32fbc0ce28_o.jpg) top center; 02底圖*/★ 讓#02底圖出現
/*background:#FFF url(http://static.flickr.com/35/72932569_7184f18d2b_o.jpg) top center; 01底圖*/
background:#FFF url(http://static.flickr.com/34/72932542_32fbc0ce28_o.jpg) top center; /*02底圖*/簡單改一下就可以同時複製兩個CSS囉~
/************2006 Xmas CSS#01&02************/
body {
margin: 0px 0px 20px 0px;
background:#FFF;
}
A { color: #336666; text-decoration: none;}
A:link { color: #336666; text-decoration: none; }
A:visited { color: #336666; text-decoration: none; }
A:active { color: #669999; }
A:hover { color: #669999; }h1, h2, h3 {
margin: 0px;
padding: 0px;
}#banner {
font-family:verdana, arial, sans-serif;
color:#CC9933;
font-size:x-large;
font-weight:bold;
background:#FFF url(http://static.flickr.com/35/72932569_7184f18d2b_o.jpg) top center;/*01底圖*/
background:#FFF url(http://static.flickr.com/34/72932542_32fbc0ce28_o.jpg) top center; /*02底圖*/
padding-left:15px;
height:750px;
}#banner a,
#banner a:link,
#banner a:visited,
#banner a:active,
#banner a:hover {
font-family:verdana, arial, sans-serif;
font-size: x-large;
color: #ff0000;
text-decoration: none;
}.description {
font-family:verdana, arial, sans-serif;
color:#CCC;
font-size:11px;
font-weight:bold;
background:none;
text-transform:none;
letter-spacing: none;
}#content {
float:left;
width:65%;
background:#FFF;
margin-left:10px;
margin-right:15px;
margin-bottom:20px;
position: absolute;
}#links {
width:30%;
background:#FFF;
margin-left:68%;
color:#CCC;
margin-top:35px;
margin-right:15px;
position: absolute;
}.blog {
padding-left:15px;
padding-top:15px;
padding-right:15px;
}
.blogbody img{ max-width: 640px;}
.blogbody {
font-family:verdana, arial, sans-serif;
color:#666;
font-size:small;
font-weight:normal;
background:#FFF;
line-height:160%;
border-left:1px dotted #666;
border-right:1px dotted #666;
border-bottom:1px dotted #666;
padding:10px;
}.blogbody a,
.blogbody a:link,
.blogbody a:visited,
.blogbody a:active,
.blogbody a:hover {
font-weight: normal;
text-decoration: underline;
}.title {
font-family: verdana, arial;
font-size: 16px;
color: #CCC;
font-weight:bold;
}#menu {
margin-bottom:10px;
background:#FFF;
font-size:small;
font-weight:bold;
}.date {
font-family:verdana, arial, sans-serif;
font-size: 24px;
color: #690;
font-weight:bold;
text-transform:uppercase;
margin-top:50px;
border-bottom:1px dotted #666;
}.posted {
font-family:verdana, arial, sans-serif;
font-size: x-small;
color: #690;
}.calendar {
font-family:verdana, arial, sans-serif;
color:#666;
font-size:11px;
font-weight:normal;
padding:5px;
}.calendarhead {
font-family:verdana, arial, sans-serif;
color:#CC9933;
font-size:11px;
font-weight:bold;
background:#FFF;
line-height:160%;
}.side {
font-family:verdana, arial, sans-serif;
color:#CCC;
font-size:11px;
font-weight:normal;
background:#FFF;
line-height:160%;
}.sidetitle {
font-family:verdana, arial, sans-serif;
color:#690;
font-size:16px;
font-weight:bold;
background:#FFF;
line-height:160%;
padding-top:2px;
padding-bottom:2px;
margin-top:10px;
margin-bottom: 5px;
border-bottom:1px dotted #ccc;
letter-spacing: .2em;
}.syndicate {
font-family:verdana, arial, sans-serif;
font-size:xx-small;
font-weight:bold;
line-height:160%;
padding:2px;
margin-top:10px;
text-align:center;
background:#FFF;
}.powered {
font-family:verdana, arial, sans-serif;
color:#CCC;
font-size:xx-small;
font-weight:bold;
border-top:1px dotted #666;
border-bottom:1px dotted #666;
line-height:160%;
padding:2px;
margin-top:10px;
text-
align:center;
letter-spacing: .2em
background:#FFF;
}.comments-body {
font-family:verdana, arial, sans-serif;
color:#666;
font-size:small;
font-weight:normal;
background:#FFF;
line-height:160%;
padding-bottom:10px;
}.comments-post {
font-family:verdana, arial, sans-serif;
color:#690;
font-size:11px;
font-weight:normal;
background:#FFF;
margin-top:0px;
}.comments-head {
font-family:verdana, arial, sans-serif;
font-size: 14px;
color: #690;
font-weight:bold;
margin-top:10px;
border-bottom:1px dotted #666;
}.trackback-body {
font-family:verdana, arial, sans-serif;
color:#333;
font-size:small;
font-weight:normal;
background:#FFF;
line-height:160%;
padding-top:15px;
}.trackback-url {
font-family:verdana, arial, sans-serif;
color:#666;
font-size:small;
font-weight:normal;
background:#ebebeb;
line-height:160%;
padding:5px;
border:0px dotted #666;
}.trackback-post {
font-family:verdana, arial, sans-serif;
color:#690;
font-size:11px;
font-weight:normal;
background:#FFF;
margin-bottom:20px;
}textarea {
border: 1px solid #ccc; height: 250px;
background: none url(http://static.flickr.com/20/72932412_09ba8db5c5.jpg) no-repeat 150px center;
}
原文出處: [艾瑪CSS] 2006聖誕極簡白色系#01~04
分享此篇文章延伸閱讀
- [分享] 氣質芋紫BLOG CSS
- [分享] 淡紫日記BLOG CSS
- [網誌] 深淺雙綠色(已投稿)
- [分享] 無名小站回應區、訪客留言、版主回應、誰來我家 完整CSS大公開
- [情人節樣式] 第一號:粉紅小可愛(網誌)
- [情人節樣式] 第一號:粉紅小可愛(相本)
- [情人節樣式] 第一號:粉紅小可愛(個人資料+留言版)
- [艾瑪CSS] 2006聖誕極簡紅色系#1
【關於作者】艾瑪 | amarylliss 台灣第一位全職旅遊部落客受邀出國旅遊超過百次(受邀列表),1996年起於台大椰林BBS自助旅行版(Tour Abroad)發表旅遊心得並擔任版主,2000年起於明日報/ANYWAY旅遊網分享旅遊心得,2003年起任艾瑪隨處走走部落格格主至今,從無名小站至痞客邦,目前回歸個人部落格持續經營;更詳細網路書寫歷史請參考關於我。聯繫、合作或邀約請聯繫:[email protected] |
感謝分享~