令人頭昏眼花的CSS

作者：艾緹絲│2007-09-06 12:00:36│巴幣：0│人氣：886

既然大家最近都沉溺在CSS的世界裡，那就來談談目前我所用到的CSS吧…
內容大致上與很多人都有重複到了，所以不強迫你看下去 :D

××××××××××××××××××××××××××××××××××××××××××××××××××××××××××××××××××××××××××××××
目前我所加入的CSS語法有
/*--------------------------整體頁面設定--------------------------*/
body{
scrollbar-face-color: #ffffff; /*捲軸顏色*/
scrollbar-highlight-color: #970015; /*捲軸左與上內邊框*/
scrollbar-shadow-color: #970015;/*捲軸右與下內邊框*/
scrollbar-3dlight-color: #ffffff; /*捲軸左與上外邊框*/
scrollbar-darkshadow-color: #ffffff;/*捲軸右與下外邊框*/
scrollbar-arrow-color: #970015; /*捲軸箭頭*/
scrollbar-track-color: #ffffff; /*捲軸底色*/
background-image:url(http://meowga.com/baha/bg.gif); /*背景圖片網址*/
background-repeat: repeat; /*背景圖片重複排列*/
cursor:url(http://meowga.com/baha/cat.ani); /*滑鼠圖示*/
}
a {
cursor:url(http://meowga.com/baha/cat2.ani); /*連結滑鼠圖示*/
text-decoration: none;/*連結底線*/
}
/*----整體文字----*/

將語法簡單敘述一下(其實看後面註解就差不多知道了)

‧卷軸顏色：

body{
scrollbar-face-color: #ffffff; /*捲軸顏色*/
scrollbar-highlight-color: #970015; /*捲軸左與上內邊框*/
scrollbar-shadow-color: #970015;/*捲軸右與下內邊框*/
scrollbar-3dlight-color: #ffffff; /*捲軸左與上外邊框*/
scrollbar-darkshadow-color: #ffffff;/*捲軸右與下外邊框*/
scrollbar-arrow-color: #970015; /*捲軸箭頭*/
scrollbar-track-color: #ffffff; /*捲軸底色*/
}
這....看就大概知道了，不詳述了 =3=

‧背景圖：

body{
background-image:url(http://meowga.com/baha/bg.gif); /*背景圖片網址*/
background-repeat: repeat; /*背景圖片重複排列*/
}
如果想要讓背景圖片不重複排列，或者對齊X(橫)、Y軸(直)，就將repeat改為：
no-repeat←不重複排列
repeat-x←X軸重複排列
repeat-y←y軸重複排列

‧滑鼠圖示：

【平常滑鼠顯示的圖示】
body{
cursor:url(http://meowga.com/baha/cat.ani); /*滑鼠圖示*/
}

【當滑鼠移到文字連結時的圖示】：a{}代表套用到整頁所有的超連結。
a {
cursor:url(http://meowga.com/baha/cat2.ani); /*連結滑鼠圖示*/
}

‧連結底線：

a {
text-decoration: none;/*連結底線*/
}
目前系統預設當文字有連結時，會顯示連結底線，如果不喜歡有底線出現的人可以加入這句，文字連結不顯示底線。

‧其它修改部分：

原本巴哈預設的字型與字體大小，因為我比較喜歡size12的字體大小，所以將下面這段裡面的font-size:13px;改成font-size:12px;
/*----整體文字----*/
TD{
color:#E97673;
font-size:12px;
line-height:150%;
font-family:"Arial";
word-break: break-all;
word-wrap:break-word;
}

原本頂部的底圖高度沒有現在那麼高，為了配合繪製的圖片大小，所以變更了高度設定，將下面這段改成height:240px;
為了配合圖片上放置暱稱、帳號…等哩哩雜雜的文字位置，所以修改了padding-left:25px;(文字與左邊界的距離)與padding-top:110px;(文字與上邊界的距離)這兩句，控制文字位置；當然也可以改成margin-right:5px;(文字與右邊界的距離)與margin-bottom:5px;(文字與下邊界的距離)，看個人去改。
.banner{
background: url(http://meowga.com/baha/top_01.jpg) repeat;
height:240px;
padding-left:25px;
padding-top:100px;
}/*小屋上方主圖*/

配合自己圖片風格，所以連頂圖下方的主選單樣式也更改了。
/*---------------------------主選單---------------------------*/
.menu{
background:url(http://meowga.com/baha/top_02.jpg) no-repeat;
height:35px;
}/*選單背景圖*/

當停留在目前頁面時，主選單連結樣式也隨著改成。
/*----選單所在頁面狀態----*/
.menuIN{
background:url(http://meowga.com/baha/button_03.gif) no-repeat;
font-weight:bold;
color: #FFFFFF;
height:35px;
line-height: 35px;
text-align: center;
text-decoration: none;
}

好吧…我懶了…其他等改完後再來講…或者…突然想到的那一天再來補充，準備吃飯去啦~(飛奔 :D

喜歡 4 收藏 4 引用留言推上首頁檢舉

引用網址：https://home.gamer.com.tw/TrackBack.php?sn=578788
All rights reserved. 版權所有，保留一切權利

相關創作

同標籤作品搜尋：|小屋|部落閣|CSS|