金羽銀華

    又到了整理噗版CSS總表的時間。

現在我設計噗版，是以分段的方式來進行，各個段落的變化與整合配搭，可以產生許多不同的變化：

列出各段基本項目與常用樣式，一方面是留下記錄，一方面也希望有助噗友自己創作噗版結構時參考。

_00_表頭表尾+

這部份是放設計出處與版權聲明用的。請大家要養成好習慣，有引用來源的話要標明出處喔。

/*------------------------------------------------------------------------
噗浪版型 Plurk CSS:
設計出處 Design by: Be Myself Inc. M6
背景圖源 Background image from: ()
安裝網址 Install: ()
更多佈景 More Themes: (http://www.flickr.com/groups/plurkcss)
-- 我們設計的噗版CSS僅供個人自用，請勿改製再分享或用於商業用途 --
-- Copyright: 版權所有 保留一切權利  All Rights Reserved --
------------------------------------------------------------------------*/



/*------------------------------------------------------------------------
Date: 2011-mm-dd
Design by: Be Myself Inc. M6
-- 我們設計的噗版CSS僅供個人自用，請勿改製再分享或用於商業用途 --
-- Copyright: 版權所有 保留一切權利  All Rights Reserved --
------------------------------------------------------------------------*/

我常用的背景圖桌布來源：

桌布來源：san-x.co.jp/charapri/top.html  (san-x)

桌布來源：jalan.net/jalan/doc/nyalan/summer2007/wallpaper/index.html (jalan.net)

桌布來源：wallpapers-room.com/newest (wallpapers-room)

桌布來源：socwall.com (socwall.com)

桌布來源：customize.org (customize.org)

桌布來源：deviantart.com (deviantart)

_01_前置CSS

將每個版型都會用到，並會影響整體樣式的設計放到最前面。

/*------------------------------- #前置CSS -------------------------------*/

/*消除圖片外框*/
img {border:none !important;}

/*連結文字*/
a:focus, :focus, a, a:link, a:visited, a:active {outline:0 !important;}  /*去除連結虛線外框*/
a, a:link, a:visited, a:active
{
    color:# !important;
    text-decoration:none !important;
    text-transform:normal;
    -moz-outline-style:none;
    outline:0 !important;
}
a:hover
{
    color:# !important;
    text-decoration:none !important;
    position:relative;
    top:1px;
    left:1px;
}

/*主控台文字*/
p#about_me, #dash-profile, p#relationship_container,
#dash-stats, #dash-stats table td,
#dash-friends, #dash-fans
{
    color:# !important;
    line-height:em;
}

/*語言字型*/
body.language-large-font,  
.language-large-font #top_login,
.language-large-font #footer,
.language-large-font .small,
.language-large-font .tooltip_cnt,
.language-large-font .direct-l
{
    font-family:"微軟正黑體", "Helvetica Neue", Arial, Verdana;
    font-weight:normal;
    text-transform:normal;
}

/*--------------------------------------------------------------輸入與選單*/

textarea,
textarea#input_big_private,
textarea#input_big_private.content,  
textarea#input_big,
textarea#input_permalink,
textarea#input_big.content,
input#current_query,  /*搜尋輸入*/
select, select:focus,  /*下拉選單*/
input#share_link,  /*分享搜尋結果*/
input#loc_field,   /*搜尋其它噗浪會員*/
.auto_ta  /*輸入區表格*/
{
    color:#555 !important;
    background:rgba(255,255,255,0.5) !important;
    border:1px solid #aaa !important;
    padding:4px 5px;
    -moz-border-radius:5px;  /*圓角*/
    -khtml-border-radius:5px;
    -webkit-border-top-left-radius:5px;
    -webkit-border-top-right-radius:5px;
    -webkit-border-bottom-right-radius:5px;
    -webkit-border-bottom-left-radius:5px;
}

/*使用中狀態*/
textarea:focus,
textarea#input_big_private:focus,
textarea#input_big:focus,
textarea#input_permalink:focus,
input#current_query:focus,
input:focus,
select:focus
{
    color:#111 !important;
    background:rgba(255,255,255,0.9) !important;
    border:1px solid #39c !important;
    -moz-box-shadow:0px 0px 5px #39c; /*外框陰影*/
    -webkit-box-shadow:0px 0px 5px #39c;
    box-shadow:0px 0px 5px #39c;
}

/*--------------------------------------------------------------捲軸語法*/

/*Google瀏覽器適用*/
::-webkit-scrollbar {background:#f4f4f4;}
::-webkit-scrollbar-thumb {background:#eee;}
::-webkit-scrollbar-thumb:hover {background:#ddd;}
::-webkit-scrollbar,
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb:hover
{
    -moz-border-radius:10px;
    -khtml-border-radius:10px;
    -webkit-border-top-left-radius:10px;
    -webkit-border-top-right-radius:10px;
    -webkit-border-bottom-right-radius:10px;
    -webkit-border-bottom-left-radius:10px;
    -moz-box-shadow:0px 0px 5px #fff;
    -webkit-box-shadow:0px 0px 5px #fff;
    box-shadow:0px 0px 5px #fff;
}

/* * {cursor:crosshair !important;}*/ /*十字游標語法*/

/* USE_DARK_ICONS */ /*頁首左方小圖使用深色*/

_02_背景設定

全頁面的圖，或是時間軸的圖，以及主控台各區背景的呈現，一次搞定。

/*======================== 背景設定 ========================*/

/*畫面背景*/
body, html
{
    background:url(http://) center top no-repeat;
    background-color:#111;
    background-attachment:;   /*浮水印固定背景fixed*/
    background-position :% %;   /*x軸% y軸%的地方固定*/
    -o-background-size:1440px 1080px;     /*調整大小比例*/
    -webkit-background-size:1440px 1080px;  
    -moz-background-size:1440px 1080px;  
    color:#333;
}
html {margin-top:-1px;overflow-x:hidden;}

/*時間軸背景*/
#timeline_holder
{
    background:url(http://) left top no-repeat;
    background-color:#111;
    border:0 !important;
}

/*時間軸與主控台背景*/
#timeline_holder,
#timeline_bg .day_bg .div_inner,
#bottom_line,
.plurkaction,
#toggle_tab li.tt_selected,
div#plurk-dashboard
{
    background:none;
    border:0 !important;
}
div#plurk-dashboard
{
    background:none !important;
    border:0 !important;
    height:100px !important;
    overflow:hidden;
    margin-top:0px !important;
}

/*噗浪生物*/
#dynamic_logo, #logo img, img#creature
{filter:alpha(opacity=0); opacity:0; zoom:1;}

/*隱藏特定時間軸主題的時間直線*/
.block_bg .div_one_line,
.small_timeline .block_bg .div_one_line
{
    filter:alpha(opacity=0) !important;
    -moz-opacity:0 !important;
    opacity:0 !important;
    height:0 !important;
    width:0 !important;
    overflow:hidden;
    zoom:1;
}

/*資訊區各區背景*/
div.dash-segment .segment-content
{
    background:#;
    border:1px solid # !important;
    margin:px;
    padding:px;
    min-height:px;
    -moz-border-radius:10px;
    -khtml-border-radius:10px;
    -webkit-border-top-left-radius:10px;
    -webkit-border-top-right-radius:10px;
    -webkit-border-bottom-right-radius:10px;
    -webkit-border-bottom-left-radius:10px;
}

/*自介統計朋友粉絲各區背景*/
#dash-profile
{
    margin-top:5px;
}
p#about_me, #dash-profile
{
    background:#;
    border:1px solid # !important;
    padding:px;
}
#dash-stats
{
    background:#;
    border:1px solid # !important;
    padding:px;
}
#dash-friends
{
    background:#;
    border:1px solid # !important;
    padding:px;
}
#dash-fans
{
    background:#;
    border:1px solid # !important;
    padding:px;
}

_03_頁首頁尾

/*======================== 頁首頁尾 ========================*/

/*登入列*/
#top_login
{
    background:# !important;
    margin:0;
    margin-bottom:px;
    padding-top:px;
    padding-right:px;
    height:px;
    filter:alpha(opacity=50) !important;opacity:0.5 !important;zoom:1;
    border-bottom:1px solid #111;
    -moz-box-shadow: 0 8px 10px rgba(0,0,0,0.5);  /*CSS3陰影*/
    -webkit-box-shadow: 0 8px 10px rgba(0,0,0,0.5);
    -o-box-shadow: 0 8px 10px rgba(0,0,0,0.5);
    -ms-box-shadow: 0 8px 10px rgba(0,0,0,0.5);
    box-shadow: 0 8px 10px rgba(0,0,0,0.5);
}

/*隱藏頁首小圖並縮短間距*/
#top_bar .item img
{
    width:0 !important;
    margin:0 !important;
    filter:alpha(opacity=0); opacity:0; zoom:1;
}

/*去除小圖底線*/
#top_bar .on img {border:none;}

/*標題*/
#page_title
{
    color:# !important;
    font-size:px;
    text-shadow:0px 0px 5px #; /*陰影*/
}  

#top_login a,  /*頁首右邊文字*/
#top_bar, #top_bar a,   /*頁首左邊文字*/
#top_bar .content a#edit_link,   /*編輯文字*/
#alert_beacon,  /*通知數字*/
.unread #alert_beacon,    /*通知數字:未讀*/
#languge_selector,  /*切換語言*/
#footer, #footer a  /*頁尾文字*/
{
    background:none !important;
    border:0 !important;
    font-size:px !important;
    color:# !important;
    font-weight: !important;
    text-transform:normal !important;
    text-decoration:none !important;
    letter-spacing:px;
}

#top_login a:hover,
#top_bar a:hover,
#top_bar .content a:hover#edit_link,
#footer a:hover
{
    background:# !important;
    color:# !important;
    top:0px;
    left:0px;
}

/*通知數字*/
#alert_beacon {margin:0 3px;}
.unread #alert_beacon  /*通知數字:未讀*/
{
    background:none !important;
    color:#919ca9 !important;
}

/*編輯與登入登出*/
#top_bar .content a#edit_link, a#login_link  
{
    font-size:px !important;
    padding:px;
    margin:0px 3px;
}

#top_bar .content a:hover#edit_link,
a:hover#login_link
{
    background:# !important;
    color:# !important;
    font-size:px !important;
    padding:px;
    margin:0px 3px;
}

/*頁尾與語言選單*/
div#footer
{
    text-align:center;
    padding:12px;
    margin:0 auto !important;
    width:610px;
    background:# !important;
    color:# !important;
    font-size:11px !important;
    -moz-border-radius:12px 12px 0px 0px;
    -khtml-border-radius:12px 12px 0px 0px;
    -webkit-border-top-left-radius:12px;
    -webkit-border-top-right-radius:12px;
    -webkit-border-bottom-right-radius:0px;
    -webkit-border-bottom-left-radius:0px;
}

#languge_selector
{
    position:relative;
    margin:0px 45px 0px 0px;
    font-size:11px !important;
}


/*尚未展開時的下拉表格欄位*/
#languge_selector form select
{
    background:#;  
    border:1px solid # !important;
    font-size:11px !important;
    color:# !important;
}

/*展開後的表格*/
#languge_selector form select option
{
    background:#;  
    border:1px solid # !important;
    color:# !important;
}

/*---隱藏顯示---*/

#top_login, #top_bar, #footer,
div.dash-segment
{filter:alpha(opacity=0) !important; opacity:0 !important; zoom:1;}

#top_login:hover, #top_bar:hover, #footer:hover,
div.dash-segment:hover
{filter:alpha(opacity=100) !important; opacity:1 !important; zoom:1;}

基本的背景、連結顏色與頁首頁尾樣式，各個項目依照不同需求選用搭配，即可呈現噗版初步的樣貌～（待續）