/* ----------- 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://f7.wretch.yimg.com/m78102/27/o1755284118.jpg?XjYj2T9DcxPpsTHPcGnnA29Dp5eh.lp7bdKeyxPBp2o32D6LbZstTG8-) 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://l.yimg.com/e/style/5/580/container.jpg') left top;
height:100%;
width:760px;

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

#header (上方的banner) 

position:relative;height:372px;
wight:700px
padding:10px 30px; 
background: url(http://f7.wretch.yimg.com/m78102/27/1755284119.jpg?Q1DTLhlDcxOY5pouOyqdbfa17QV7XAdON6ydFYn9nQOFjgxrLVabmlo-) 
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://f7.wretch.yimg.com/m78102/27/1755284124.jpg?_6v9gHlDcxMGJyMjhk.kXz4y7.TVBKVMx.z9bDicKDZnUIURBY8kOP0-) 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://f7.wretch.yimg.com/m78102/27/1755284125.jpg?.yiayOVDcxOE4qFe5aBqWFr82qALj5nWdJRZISIznj.2QLNIoix0zJM-) 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 (網頁底部) 



