【好友】雀任丹系列－隨心便利貼
複製前請看這邊唷！
○
沒有打出來的就
不用放ｃｓｓ
，一律
留白
即可唷！
/* ----------- global 基本標籤設定 ------------*/
html (整個網頁內容)
{
scrollbar-face-color: #ffffff; scrollbar-highlight-color: #000000; scrollbar-shadow-color: #000000; scrollbar-3dlight-color: #ffffff; scrollbar-darkshadow-color: #ffffff; scrollbar-arrow-color: #000000; scrollbar-track-color: #ffffff;
}
body (整個網頁內容)
{
color: #333; background: url('http://img209.imageshack.us/img209/7642/6666xl6.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 ('') left top; height:100%; width:760px;
}
#header (上方的banner)
{
position:relative;height:390px; wight:700px padding:10px 30px; background: url('http://pic6.pic.wretch.cc/photos/42/m/miuu21/30/1463474711.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:155px; right:95px; display: inline;
}
#header .Ptext h1 (我的地盤標題：XXX的好友列表)
{
font-size: 13px;
}
/* 我的地盤列表: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://pic6.pic.wretch.cc/photos/42/m/miuu21/30/1463474709.jpg') no-repeat bottom; width:200; height:150px; padding:0px 0px 43px 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://pic6.pic.wretch.cc/photos/42/m/miuu21/30/1463474710.jpg') no-repeat center 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 (網頁底部)
{
}
有任何問題歡迎到留言板留言唷：）
點我進入陳怡小的留言板