/* ----------- global 基本標籤設定 ------------*/
html (整個網頁內容)
scrollbar-face-color: #ffffff; /*捲軸顏色*/
scrollbar-highlight-color: #ff0000; /*捲軸左與上內邊框*/
scrollbar-shadow-color: #ff0000;/*捲軸右與下內邊框*/
scrollbar-3dlight-color: #ffffff; /*捲軸左與上外邊框*/
scrollbar-darkshadow-color: #ffffff;/*捲軸右與下外邊框*/
scrollbar-arrow-color: #ff0000; /*捲軸箭頭*/
scrollbar-track-color: #ffffff; /*捲軸底色*/
************************
body (整個網頁內容)
color: #333;
background: url(’
http://pic44.pic.wretch.cc/photos/30/m/m78102/27/o1755284118.jpg’) fixed no-repeat right top;
************************
input (所有按鈕)
************************
a (連結的字)
color: #FF0000;
font-size:10px;
text-decoration: none
************************
a:hover (滑鼠滑過連結時的字)
color: #FF0000;
************************
/* -------------------------------------------/ construct 版面架構的標籤 架構是由#container包住三個主標籤(#header, #content, #footer) */
#container (主框框,包住#header, #content, #footer )
margin:00px ;
left:00px;
background: url
(’
http://pic.wretch.cc/icon/hzhung/friend_design/friend002/images/container.jpg’) left top;
height:100%;
width:760px;
************************
#header (上方的banner)
position:relative;height:372px;
wight:700px
padding:10px 30px;
background: url(’
http://pic44.pic.wretch.cc/photos/30/m/m78102/27/1755284119.jpg’)
no-repeat left top;
************************
#content (內文)
margin:0px auto auto 0px;
padding:10px 0px 0px 15px;
************************
#extraDiv1 (可以任意控制的區塊1)
{
************************
}
#extraDiv2 (可以任意控制的區塊2)
{
************************
}
#extraDiv3 (可以任意控制的區塊3)
{
************************
}
#extraDiv4 (可以任意控制的區塊4)
{
************************
}
/* -------------------------------------------/ header 標頭 分為 ul#navigator 與 div#boxProfile 兩個部分 */
#header #navigator (Hi,XXX!|無名小站|登出的連結列)
{
************************
}
#header #navigator a (連結列裡的連結字)
{
************************
}
#header #navigator a:hover (連結列滑鼠滑過時的連結字)
{
************************
}
/* 我的資訊區塊 其中分為 #Pcover, #Ptext, #menu 三部分*/
#boxProfile (#header裡的內容)
{
************************
}
#header .selectBox (下拉式選單)
************************
#header .Pcover (封面照片)
position:absolute;
top:120px;
left:180px;
border: 1px solid #000000;
padding:0px 0px 0px 0px;
************************
#header .Ptext (我的地盤文字 DIV標籤)
position:absolute;
top:120px;
right:180px;
display: inline;
************************
#header .Ptext h1 (我的地盤標題:XXX的好友列表)
font-size: 12px;
************************
/* 我的地盤列表:XXX的個人首頁、XXX的網誌、XXX的相簿、XXX的留言版*/
#header .Ptext ul (我的地盤內容)
{
}
************************
#header .Ptext li (我的地盤內容)
{
}
************************
#header .Ptext li a (我的地盤的連結)
{
************************
}
#header .Ptext li a:hover (滑鼠滑過連結時)
{
************************
}
#header #menu (好友分類選單)
{ display:none;
}
************************
/* 好友分類選單內:列出所有分類、列出所有性別、搜尋好友、目前列出的好友分類*/
.il ()
{
}
************************
/* 搜尋的訊息文字 */
#msg (目前列出的好友)
background:white;
width:515px;
************************
#msg0 (列出所有分類)
{
************************
}
#msg1 (列出所有性別)
{
************************
}
#msg2 (搜尋帳號內含有)
{
}
************************
/* -------------------------------------------------/ * content * thumb style 縮圖清單的樣式 */
#content li (好友縮圖列表)
background: url(’
http://pic44.pic.wretch.cc/photos/30/m/m78102/27/1755284124.jpg’) no-repeat bottom;
width:110;
height:150px;
padding:0px 0px 24px 0px;
************************
#friendListDiv ol li (好友縮圖列表)
{
************************
}
#friendListDiv ol li a (清單中連結處)
width:108px;
************************
#friendListDiv ol li a:hover (滑鼠滑過連結處時)
{
************************
}
#friendListDiv ol li a span.font_id (好友列表id)
color: #FF0000;
************************
#friendListDiv img (好友列表照片)
{
}
************************
/* -------------------------------------------------/ * friend desc div 放大圖片與說明的樣式 */
#descDiv (好友詳細說明文字div)
background: url(’
http://pic44.pic.wretch.cc/photos/30/m/m78102/27/1755284125.jpg’) no-repeat right bottom #FE0000;
padding:15px 5px 60px 5px;
border:1px solid #FF0000;
************************
.font_id2 (單一好友id)
color: #000000;
************************
.font_desc (單一好友說明)
color:#000000;
************************
/* desc category 敘述的分類文字訊息*/
.font_cate (分類名稱)
{
}
************************
.font_cate strong (分類)
{
}
************************
#footer (網頁底部)