無名樣式製作教學－背景－小咘

※小Ｕ※

我們用「網誌」樣式為例，首先
複製

下面的空白範本，貼到你「網誌」的樣式表上

/*這是小U做的空白樣式範本，隨便你愛怎麼改都可以
想學習做樣式，請到Umod語法教室: www.wretch.cc/blog/umod
*/

BODY {margin:0px;FONT-FAMILY:verdana;}

#banner {BACKGROUND:#eeeeee no-repeat; BORDER:0px;}

#pageheader h1 a {
PADDING-LEFT:10px;
font-weight:bold;
FONT-SIZE:20px;
text-decoration:none;
TEXT-ALIGN:left;
COLOR:#aaaaaa;}

#pageheader h1 a:hover {COLOR:#000000;}

.description {
POSITION:absolute;
TOP:65px;
FONT-SIZE:12px;
font-weight:normal;
COLOR:#aaaaaa;
BACKGROUND-COLOR:transparent;}

#container1 {POSITION:relative;WIDTH:800px;BACKGROUND:transparent;
MARGIN-BOTTOM:50px;MARGIN-LEFT:auto;MARGIN-RIGHT:auto;}

#main2 {MARGIN-TOP:85px;MARGIN-LEFT:110px;WIDTH:600px;HEIGHT:400px;}

#content {
FLOAT:left;OVERFLOW:auto;WIDTH:400px;HEIGHT:400px;
BACKGROUND:#eeeeee no-repeat;}

.blogbody {PADDING:15px;MARGIN-BOTTOM:15px;}

A {COLOR:#aaaaaa;text-decoration:none;}
A:link {COLOR:#aaaaaa;}
A:hover {COLOR:#FF1C19;}

INPUT {BORDER:#ffffff 1px solid;FONT-SIZE:7pt;color:#ffffff;BACKGROUND:#aaaaaa;padding:2px;}

.date {
BORDER:#cccccc 1px solid;margin:5px;padding:5px;
font-weight:normal;FONT-SIZE:11px;
COLOR:#aaaaaa;BACKGROUND-COLOR:#dddddd;
TEXT-ALIGN:right;}

.title {
PADDING-LEFT:10px;font-weight:bold;FONT-SIZE:14px;COLOR:#aaaaaa;}

.innertext {PADDING-LEFT:5px;font-weight:normal;FONT-SIZE:8pt;line-height:180%;
color:#aaaaaa;}

.posted {FONT-SIZE:7pt;TEXT-ALIGN:right;COLOR:#aaaaaa;}
.posted A {COLOR:#aaaaaa;}
.posted A:hover {color:#FF1C19;}

#links {
OVERFLOW-X:hidden;overflow:auto;
MARGIN:0px;WIDTH:185px;COLOR:#aaaaaa;
HEIGHT:400px;BACKGROUND-COLOR:#eeeeee;}

#links a {line-height:200%;}

.sidetitle {
BORDER:#ffffff 1px solid;
PADDING:5px;MARGIN:10px;
FONT-SIZE:8pt;font-weight:bold;FONT-STYLE:normal;LETTER-SPACING:1pt;
BACKGROUND:transparent;
TEXT-ALIGN:center;}

.side {
FONT-SIZE:7pt;
PADDING:20px;
BORDER:none;
BACKGROUND:transparent;}

.calendar {FONT-SIZE:7pt;COLOR:#bbbbbb;BACKGROUND:transparent;}
DIV.calendar A {FONT-SIZE:7pt;COLOR:#fff;FONT-FAMILY:verdana;}
DIV.calendar A {DISPLAY:none;}

.extended {FONT-SIZE:8pt;COLOR:#aaaaaa;text-align:right;}
.extended A {COLOR:#aaaaaa;}
.extended A:hover {color:#FF1C19;}

.total-comments-div {
BORDER:none;MARGIN-TOP:10px;
WIDTH:300px;PADDING-TOP:10px;}

.trackback-url {font-size:7pt;color:#aaaaaa;}
.trackbacks-head {
BORDER:#aaa 1px solid;PADDING:7px;FONT-SIZE:7pt;}

.comments-head {
BORDER:#aaa 1px solid;PADDING:7px;FONT-SIZE:7pt;}

.comments-body {
BORDER:0px;FONT-SIZE:7pt;COLOR:#aaaaaa;}

.comments-post {
FONT-SIZE:7pt;TEXT-ALIGN:left;COLOR:#aaaaaa;padding-top:20px;padding-bottom:20px;}

.comments-body FORM {
FONT-SIZE:7pt;COLOR:#aaaaaa;}

#boxDate {DISPLAY:none;}
#boxSearch {DISPLAY:none;}
.syndicate {DISPLAY:none;}

這個範本長這樣，她是「短版」樣式的一種～

回上一層(熱鍵:b)

學會製作這一種，其他種類樣式，就難不倒你了
好了嗎？課程要開始囉！

加入背景圖片

背景就是 BODY

把你準備好的背景圖片，上傳到相簿，取得「圖片網址」
然後在樣式表最下方，加上這一句：

BODY {background:url(圖片網址) no-repeat left bottom;}

儲存後按預覽，就可以看到背景圖片出現了～

回上一層(熱鍵:b)

如果你覺得圖片「太大」或「太小」，可以先用小畫家

回上一層(熱鍵:b)

背景圖片要重覆嗎？

想想看，你的背景圖片要重覆嗎？在樣式表最下方加上：

BODY {background-repeat: repeat-x;}

效果就像這樣，左右重覆～

如果加上這個，就是上下重覆：

BODY {background-repeat: repeat-y;}

回上一層(熱鍵:b)

加上這個，就是上下左右都重覆：

BODY {background-repeat: repeat;}

下一張(熱鍵:c)

看起來滿恐怖的…

背景圖片怎麼移動？

如果背景圖片的位置，你不太滿意，可以用下面這幾句：

BODY {background-position: right top; /*背景圖片移到右上方*/}
BODY {background-position: right bottom; /*背景圖片移到右下方*/}
BODY {background-position: left top; /*背景圖片移到左上方*/}
BODY {background-position: left bottom; /*背景圖片移到左下方*/}
BODY {background-position: center top; /*背景圖片移到中間上方*/}
BODY {background-position: center bottom; /*背景圖片移到中間下方*/}

或是直接用這個大絕招：

BODY {background-position: 10% 10%; /*背景圖片的座標*/}
紅色數字就是背景圖片的「座標」，你可以自由調整