一、先介紹一個顏色碼的網站(十六進位)
需要『顏色碼查詢』請點!!!
可以測試背景色及文字色
二、修改背景
body { background: #000000 ; /*這邊可以修改背景顏色*/ color:#FF6600; } |
假如背景要一張圖片or照片
background-image: url(你照片的網址);
通常這時需要固定背景較佳。
所以在下面還需要加上
background-attachment : fixed;
這樣的固定背景比較好,
也可以選擇不要加上。
補充:
background-repeat : repeat /*重複排列-網頁預設*/
background-repeat : no-repeat /*不重複排列*/
background-repeat : repeat-x /*在x軸重複排列*/
background-repeat : repeat-y /*在y軸重複排列*/
background-position : 90% 90% /*背景圖片x與y軸的位置*/
三、滾軸顏色
SCROLLBAR-FACE-COLOR: #FFFFFF; /*捲軸顏色*/ SCROLLBAR-HIGHLIGHT-COLOR: #336699; /*捲軸左與上內邊框*/ SCROLLBAR-SHADOW-COLOR: #336699; /*捲軸右與下內邊框*/ SCROLLBAR-3DLIGHT-COLOR: #FFFFFF; /*捲軸左與上外邊框*/ SCROLLBAR-DARKSHADOW-COLOR: #FFFFFF; /*捲軸右與下外邊框*/ SCROLLBAR-ARROW-COLOR: #336699; /*捲軸箭頭*/ SCROLLBAR-TRACK-COLOR: #FFFFFF; /*捲軸底色*/ |
上面這七行跟背景一樣,都貼在
body {
OOXX
}
裡面。
顏色的話就自己選
最後面我會再整理一次。
四、文字
A{color:#336699; text-decoration: none;} /*所有超連結*/ A:link{color:#336699; text-decoration: none;} /*超連結文字格式*/ A:visited{color:#336699; text-decoration: none;} /*瀏覽過的連結文字格式*/ A:active{color:#336699;} /*按下連結的格式*/ A:hover{color:#336699;} /*滑鼠移至連結*/ |
這個我覺得改a:hover這欄就好了,其他欄就只改顏色。
hover可以加大字型或改變字型
font-family:標楷體;/*或你爽用其他字體*/
font-size:14pt;/*游標移到超連結時候字體的大小,自己改*/
font-color:#999999;/*游標移上去時的顏色*/
position:relative;top:1px;left:1px;/*超連結稍微位移,方向跟距離自己改吧!*/
接下來是游標移到超連結上的可做的形狀改變(微軟預設值)
cursor:crosshair | 十字型 | cursor:s-resize | 箭頭朝下 |
cursor:move | 十字箭頭 | cursor:e-resize | 箭頭朝右 |
cursor:help | 加一問號 | cursor:w-resize | 箭頭朝左 |
cursor:n-resize | 箭頭朝上 | cursor:ne-resize | 箭頭朝右上 |
scursor:nw-resize | 箭頭朝左上 | cursor:text | 文字I型 |
cursor:se-resize | 箭頭斜右下 | cursor:sw-resize | 箭頭斜左下 |
cursor:wait | 漏斗 | cursor:nono | 預設 |
使用游標圖案(IE6) cursor:url("圖檔名.cur") .cur的圖檔自己做 檔案不要弄太大 要不然載入的時間會很長 很機車喔~免費的網頁會不支援用.cur檔的 像yahoo, pchome等等都不支援 試試看其他的空間吧! 【註】:.cur檔→靜態游標 .ani檔→動態游標 |
補充:
font-style:itelic /*文字斜體*/
font-variant:small-caps/*小字體*/
letter-spacing : 1pt/*字間距離*/
line-height : 200% /*設定行高*/
font-weight:bold /*文字粗體*/
vertical-align:sub /*下標字*/
vertical-align:super/*上標字*/
text-decoration:line-through/*加刪除線*/
text-decoration:overline /*加頂線*/
text-decoration:underline /*加底線*/
text-decoration:none /*刪除連結底線*/
text-transform : capitalize /*首字大寫*/
text-transform : uppercase /*英文大寫*/
text-transform : lowercase /*英文小寫*/
text-align:right /*文字靠右對齊*/
text-align:left /*文字靠左對齊*/
text-align:center /*文字置中對齊*/
五、標題
#banner {/*我覺得這邊不太用改ㄟ*/ font-family:verdana, arial, sans-serif; color: #66ff00; /*改字的顏色*/ font-size:xxx-large; font-weight:bold; background: #000000;/*就是更改一下背景顏色*/ padding-left:15px; } |
改一下背景
改字的顏色
六、描述
我個人覺得都不太需要改他
反正無名小站,站長弄得這麼好
只要把顏色改調
讓相本看起來有個人特色就好
description { font-family:verdana, arial, sans-serif; color: #ff6600;/*修改顏色*/ font-size:small; font-weight:bold; background: #000000;/*修改背景顏色*/ text-transform:none; letter-spacing: none; } |
修改字的顏色
修改背景顏色
七、side
side { font-family:verdana, arial, sans-serif; color:#336699; font-size:x-small; font-weight:normal; background: #ff6633; /*框框內部的顏色*/ border-top:1px solid #FF9900; /*上面邊框,粗細=1,實心,可改顏色*/ border-bottom:1px solid #FF9900; /*下面邊框,粗細=1,實心,可改顏色*/ border-left:1px solid #FF9900; /*左面邊框,粗細=1,實心,可改顏色*/ border-right:1px solid #FF9900; /*上面邊框,粗細=1,實心,可改顏色*/ line-height:140%; } |
上面最主要是改框框的東西,
改背景色
接下來是邊框了
其中solid是實線的意思
假如把solid改成dashe,邊框就會變成虛線了
另外粗細可隨便調。
【NOTE】有人喜歡把邊框改一改
弄得比較有立體敢,也是可以的。
只要把四個框保留其中兩個然後把把線加粗
就會有陰影的效果
background: #ff6633;
border-bottom:2px solid #FF9900;
border-right:2px solid #FF9900;
只要這三個顏色配合的好就可以了
我顏色感覺不是很好
所以沒有範例。
所以我都用其他方法:
border : 1px solid/*實線框*/
border : 3px double/*雙線框*/
border : 3px groove/*立體內凸框*/
border : 3px ridge/*立體浮凸框*/
border : 3px inset/*凹框*/
border : 3px outset/*凸框*/
我用這其中選擇一種來用就ok了
少了配色的煩惱
但是這種事情見仁見智啦~~~~
給一個凸框的範例圖片
sidetitle跟剛剛那個差不多,祇是地方的不一樣而已
沒什麼好改的
sidetitle { font-family:verdana, arial, sans-serif; color:#336699; font-size:x-small; font-weight:bold; background: #000000;/*改變一下顏色*/ line-height:140%; padding:2px; margin-top:10px; border-top:1px solid #FF9900;/*跟上面講的一樣!*/ border-bottom:1px solid #FF9900;/*跟上面講的一樣!*/ border-left:1px solid #FF9900;/*跟上面講的一樣!*/ border-right:1px solid #FF9900;/*跟上面講的一樣!*/ letter-spacing: .2em; } |
做個範例,這樣好知道地點
八、powered
這個就是下方無名小站logo的東西
我是不想改他
powered { font-family:verdana, arial, sans-serif; color:#336699; font-size:xx-small; font-weight:bold; border-top:1px solid #666;/*上面那條線的顏色*/ border-bottom:1px solid #666; /*下面那條線的顏色*/ line-height:140%; padding:2px; margin-top:10px; text-align:center; letter-spacing: .2em } |
九、類似的表單
很多人下拉式表單都可變色
這個是語法
input,select,textarea { color : #FF8C00;/*文字顏色*/ font-size : 10pt ; background-color : #000000; /*背景顏色*/ /*下面是上線左右的東西,懶的打了,跟上面差不多*/ border-top : 1px double #7CFC00; border-bottom : 1px double #7CFC00 ; border-left : 1px double #7CFC00 ; border-right : 1px double #7CFC00 ; } |
用一個範例:
十、整理一下
看了這麼多,不懂就踹踹看好了.......
就複製下面的貼到css就好
原因上面都有解釋
我是覺得只要改我下面有註解的就好了
假如想多改一點的話也可以自己玩玩看啦
body { SCROLLBAR-FACE-COLOR: #FFFFFF; /*捲軸顏色*/ SCROLLBAR-HIGHLIGHT-COLOR: #336699; /*捲軸左與上內邊框*/ SCROLLBAR-SHADOW-COLOR: #336699;/*捲軸右與下內邊框*/ SCROLLBAR-3DLIGHT-COLOR: #FFFFFF; /*捲軸左與上外邊框*/ SCROLLBAR-DARKSHADOW-COLOR: #FFFFFF;/*捲軸右與下外邊框*/ SCROLLBAR-ARROW-COLOR: #336699; /*捲軸箭頭*/ SCROLLBAR-TRACK-COLOR: #FFFFFF; /*捲軸底色*/ background: #000000 ; /*背景顏色*/ color:#FF6600; /*字的顏色*/ } A { color: #336699; text-decoration: none; }/*所有超連結*/ A:link { color: #336699; text-decoration: none; }/*超連結文字格式*/ A:visited { color: #336699; text-decoration: none; }/*瀏覽過的連結文字格式*/ A:active { color: #336699; }/*按下連結的格式*/ A:hover { color: #999999; position:relative;top:1px;left:1px;font-size:14pt;}/*滑鼠移至連 結*/ #banner { #banner a, .side { .sidetitle { .powered { |
十一、最後一個啦~~~
假如有些人是用圖片當背景
而不是用顏色的話
那些小框框都沒有刪掉
所以我就用/*OOXX*/的符號把他弄起起來了
也是一樣直接複製,然後修改我有註解的地方就好了
其他要改什麼就自己加
body { SCROLLBAR-FACE-COLOR: #FFFFFF; /*捲軸顏色*/ SCROLLBAR-HIGHLIGHT-COLOR: #336699; /*捲軸左與上內邊框*/ SCROLLBAR-SHADOW-COLOR: #336699;/*捲軸右與下內邊框*/ SCROLLBAR-3DLIGHT-COLOR: #FFFFFF; /*捲軸左與上外邊框*/ SCROLLBAR-DARKSHADOW-COLOR: #FFFFFF;/*捲軸右與下外邊框*/ SCROLLBAR-ARROW-COLOR: #336699; /*捲軸箭頭*/ SCROLLBAR-TRACK-COLOR: #FFFFFF; /*捲軸底色*/ background-image: url(你要的圖片啦~~~~~~~~~);/*就自己加啊!*/ background-attachment : fixed; color:#FF6600; /*字的顏色*/ } A { color: #336699; text-decoration: none; }/*所有超連結*/ A:link { color: #336699; text-decoration: none; }/*超連結文字格式*/ A:visited { color: #336699; text-decoration: none; }/*瀏覽過的連結文字格式*/ A:active { color: #336699; }/*按下連結的格式*/ A:hover { color: #999999; position:relative;top:1px;left:1px;font-size:14pt;}/*滑鼠移至連 結*/ #banner { #banner a, .description { .side { .sidetitle { .powered {
|
十二、哈哈..我好機車喔~再補充一點啦~
(這個跟CSS沒關係!!!)
好像不管怎樣,有些人喜歡加上一些音樂
反正相簿是自己在玩的
爽怎樣就怎樣囉~~
就說說怎麼擺音樂吧!
通常擺歌幾乎用.rm的比較多..
反正都差不多啦~
舉例:
這樣就可以了
喔...好簡單喔!
我解釋一下好了
width="100" 代表控制板寬度是100,可以自己調整
height="50" 代表控制板高度是50,可以自己調整
loop="true" 其中true的意思是說:歌播放完畢還會重新播放。
假如播完一遍就好,就把true改成fales即可。
autostart="true" 代表網頁載入的同時,是否要立即播放音樂。
假如一開始不想自動播放,看個人需要從控制板控制的話,就把true改成fales即可。
另外再說一個
不一樣的地方只有hidden="true"
反正都差不多的東西
這個跟上面不一樣的地方就是隱藏控制板
有些人覺得醜,就用這個方法。
舉一反三,hidden="fales"基本上這句話是廢話...
我還真的看過有人寫哩!
還有既然是隱藏控制板了
自動播放就要打開,不要輸入autostart="fales"
這樣聽歌的人聽個屁啊...
來源:http://www.wretch.cc/blog/tjun/79948
留言列表