又到了整理噗版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;}
基本的背景、連結顏色與頁首頁尾樣式，各個項目依照不同需求選用搭配，即可呈現噗版初步的樣貌～（待續）
留言列表
噗浪CSS (2)