[艾瑪CSS] 2006聖誕極簡白色系#01~04


[預覽畫面] #01襪中的聖誕老公公 #02白色聖誕節

使用說明,這兩款只有底圖改變,其他都不變,因此如果要直接複製這兩款過去,請決定要讓他出現哪一張底圖,接著修改不出現的底圖,方式如下:

★ 讓#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囉~

四張底圖的網址
 

XMAS_1024_013 XMAS_1024_012
1 2
http://static.flickr.com/35/72932569_7184f18d2b_o.jpg http://static.flickr.com/34/72932542_32fbc0ce28_o.jpg
XMAS_1024_011 XMAS_1024_006
3 4
http://static.flickr.com/20/72932517_59ef3fcfd3_o.jpg http://static.flickr.com/34/72932281_656dc7b1c7_o.jpg

 

 

/************2006 Xmas CSS01&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

1 thought on “[艾瑪CSS] 2006聖誕極簡白色系#01~04”

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *