為了方便自己選用與組合噗版的各個CSS項目,所以整理了一份對照表,羅列了大部份使用過的項目清單,也放上來提供大家參考~
/*------------------------------------------------------------------------
噗浪語法 Plurk CSS: 噗浪CSS架構對照表
列表整理 List order by: Be Myself Inc. M6
-- 此噗版CSS僅供個人練習參考用,請勿改製再分享或用於商業用途 --
-- Copyright: 版權所有 保留一切權利 All Rights Reserved --
------------------------------------------------------------------------*/
/*-----#前置設定-----*/
img /*所有圖片*/
a:focus, :focus, a, a:link, a:visited, a:active /*連結文字*/
a:hover
select /*下拉選單*/
select:focus
input /*輸入欄位*/
input:focus
/*-----語言字型-----*/
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
/*-----Google瀏覽器捲軸-----*/
::-webkit-scrollbar
::-webkit-scrollbar-thumb
::-webkit-scrollbar-thumb:hover
/*-----畫面背景-----*/
body, html
#page_title /*標題*/
#top_login /*頁首登入列*/
#top_bar /*頁首左邊*/
#top_bar a /*頁首左邊連結*/
#top_bar .content a#edit_link /*編輯*/
#alert_beacon /*通知*/
.unread #alert_beacon /*未讀通知*/
#top_bar .item img /*頁首左邊小圖*/
/* USE_DARK_ICONS */ /*頁首左方小圖使用深色*/
#top_login a /*頁首右邊文字*/
a#login_link /*登入登出*/
#languge_selector /*切換語言*/
#languge_selector form select /*尚未展開時的下拉表格欄位*/
#languge_selector form select option /*展開後的表格*/
div#footer /*頁尾*/
div#footer p /*頁尾段落*/
#footer a /*頁尾連結*/
/*-----時間軸背景-----*/
#timeline_holder
#timeline_bg .day_bg .div_inner /*換日線*/
.div_inner /*日區*/
.day_start .bottom_start, .day_start .div_start /*日期*/
#bottom_line /*底軸時間線*/
.bottom_start, .bottom_end /*時間*/
#time_show, #time_show span /*每一則對應時間*/
.block_bg .div_one_line /*特定時間軸主題的直線*/
.small_timeline .block_bg .div_one_line
#timeline_cnt, #timeline_bg, #timeline_fg /*時間區塊*/
#empty_timeline_bg /*沒有任何未讀訊息-搜尋噗浪*/
#empty_timeline_fg
#dynamic_logo, #logo img, img#creature /*噗浪logo生物*/
.cmp_loading /*主畫面loading圖*/
#div_loading .cnt
.loading img /*每則噗loading圖*/
.loading
.browse_button /*往前往後箭頭*/
.cmp_arrow_right /*向右*/
.cmp_arrow_left /*向左*/
.cmp_back_to_today /*跳至最前*/
.cmp_arrow_right:hover
.cmp_arrow_left:hover
.cmp_back_to_today:hover
/*-----所有訊息列標籤-----*/
#filter_tab /*所有標籤*/
#filter_tab a.off_tab /*未選標籤*/
#filter_tab a.off_tab:hover
#filter_tab a.filter_selected /*正選(使用中)標籤*/
#filter_tab a.filter_selected:hover
.unread_generic /*未讀數字*/
#filter_tab a.filter_selected .unread_generic /*正選未讀數字*/
/*-----更新通知與音樂播放器-----*/
#updater /*更新通知(幾則新訊息)*/
#updater .text {color:#ffffff !important;} /*幾則新訊息與回應*/
#updater a /*更新 檢視連結*/
.cmp_poll_line /*中間的間隔線*/
#music_player /*音樂播放器(影音視窗縮小只放音樂bar)*/
#music_player a /*音樂播放器連結文字*/
/*-----發噗區背景-----*/
div#plurk_form
.plurkaction /*plurk區塊*/
#toggle_tab /*plurk-搜尋*/
#toggle_tab li.tt_selected /*正選頁籤*/
#toggle_tab li /*未選頁籤*/
#toggle_tab li span#plurk_tab /*頁籤圖示-plurk*/
#toggle_tab li span#search_tab /*頁籤圖示-搜尋*/
#main_poster .qual_holder /*使用者名稱*/
.char_updater /*尚餘字數*/
.char_highlight /*超過字數*/
/*-----發噗區輸入欄位-----*/
.plurkForm td /*整區*/
textarea#input_big /*發噗輸入*/
textarea#input_permalink
textarea#input_big.content
textarea:focus
textarea#input_big_private:focus
textarea#input_big:focus
textarea#input_permalink:focus
input#current_query /*搜尋輸入*/
input#current_query:focus
.u_search /*搜尋其它會員*/
.share_search b /*分享搜尋結果*/
input#share_link /*搜尋結果網址*/
.cmp_plurk /*發噗按鈕*/
input.orange-but /*搜尋按鈕*/
textarea#input_big_private /*發送私密噗*/
textarea#input_big_private.content
/*-----語助詞-----*/
.dd_img img /*語助詞旁的箭頭符號*/
.qualifier /*浪上*/
.mini_form .m_qualifier /*浪上每則噗發噗區*/
.m_qualifier /*發噗區*/
#reply_box .m_qualifier /*單一噗浪發噗區*/
.r_qualifier /*單噗頁面*/
.content .r_qualifier /*單噗主噗區*/
div.bigplurk .r_qualifier /*單噗頁面上下則*/
.qual_menu /*下拉選單*/
.qual_menu td /*選單表格*/
.qual_menu .on /*滑鼠移至效果*/
/*-----語助詞各欄位-----*/
.qual_menu .q_freestyle,
.q_freestyle,
td .q_freestyle /*自由發揮*/
.qual_menu .q_loves,
.q_loves,
td .q_loves /*愛*/
.qual_menu .q_likes,
.q_likes,
td .q_likes /*喜歡*/
.qual_menu .q_shares,
.q_shares,
td .q_shares /*分享*/
.qual_menu .q_gives,
.q_gives,
td .q_gives /*給*/
.qual_menu .q_hates,
.q_hates,
td .q_hates /*討厭*/
.qual_menu .q_wants,
.q_wants,
td .q_wants /*想要*/
.qual_menu .q_wishes,
.q_wishes,
td .q_wishes /*期待*/
.qual_menu .q_needs,
.q_needs,
td .q_needs /*需要*/
.qual_menu .q_will,
.q_will,
td .q_will /*打算*/
.qual_menu .q_hopes,
.q_hopes,
td .q_hopes /*希望*/
.qual_menu .q_asks,
.q_asks,
td .q_asks /*問*/
.qual_menu .q_has,
.q_has,
td .q_has /*已經*/
.qual_menu .q_was,
.q_was,
td .q_was /*曾經*/
.qual_menu .q_wonders,
.q_wonders,
td .q_wonders /*好奇*/
.qual_menu .q_feels,
.q_feels,
td .q_feels /*覺得*/
.qual_menu .q_thinks,
.q_thinks,
td .q_thinks /*想*/
.qual_menu .q_says,
.q_says,
td .q_says /*說*/
.qual_menu .q_is,
.q_is,
td .q_is /*正在*/
/*-----分享功能-----*/
#main_poster .icons_holder /*發噗區分享連結圖片等圖示*/
.cmp_image_off
.cmp_youtube_off
.cmp_link_off
.cmp_webcam_off
/*滑鼠移至圖示效果*/
.cmp_image_on
.cmp_youtube_on
.cmp_link_on
.cmp_webcam_on
/*-----表情選單-----*/
.smily_holder img /*微笑符號*/
.smily_holder /*圖示區*/
#main_poster .smily_holder /*發噗區的圖示區*/
#emoticon_selecter /*選單區背景*/
#emoticons_show /*圖片區背景*/
#emoticon_selecter img /*圖片*/
#emoticon_selecter a:hover img /*滑鼠移至時圖片*/
#emoticons_tabs ul li /*選擇項目*/
#emoticons_tabs ul li.current /*正選項目*/
#emoticons_show .red_link /*額外圖示連結*/
/*-----私人訊息、語系及選項 -----*/
#more_options_link /*打開前的連結*/
#more_options_holder /*打開後的區塊*/
#more_options td, #more_options .caption /*內容標題*/
.wickEnabled /*輸入欄*/
.small /*請輸入…的欄位說明文字*/
.advert a /*噗浪同步訊息至FB*/
.private_to /*私人訊息給...*/
.private_to b /*私人訊息底色標注*/
.selectedSmartInputItem /*移動選擇底色*/
.selectedSmartInputItem a /*移動選擇連結文字*/
.auto_ta .person /*已選擇的噗友底色*/
#smartInputFloaterContent /*下拉選單*/
/*-----主控台背景-----*/
#dashboard_holder /*發噗區與主控台整體*/
div#plurk-dashboard /*主控台整區*/
.dash-segment .segment-content /*四欄位各區*/
#dash-profile /*自介區*/
#profile_pic /*個人頭貼*/
#profile_pic:hover
#full_name /*姓名*/
#span_years /*年齡*/
#m_or_f /*性別*/
#location /*所在位置*/
p#about_me /*關於我自己*/
#dash-additional-info /*關於我自己描述內容*/
#dash-additional-info a /*連結文字*/
#dash-additional-info a:hover
p#relationship_container /*感情婚姻狀態*/
#dash-stats /*統計區*/
#dash-stats h2 /*標題-統計*/
#dash-stats h3 /*卡馬區*/
.karma_hover /*卡馬karma*/
#karma /*卡馬數值*/
#dash-stats table /*統計資料區*/
#dash-stats table th, /*項目*/
#dash-stats table td /*數值*/
.link_arrow, .cmp_points-arrow /*卡馬升降與說明箭頭*/
.cmp_karma_up,.cmp_karma_down
a.link_arrow, a.link_arrow link_badges
.award_bar /*小徽章*/
.award_bar div /*每個小徽章*/
.award_bar img /*小徽章圖片*/
#dash-friends /*朋友區*/
#dash-friends h2 /*標題-朋友*/
#dash-fans /*粉絲區*/
#dash-fans h2 /*標題-粉絲*/
.show_all_friends a /*列出所有朋友粉絲連結*/
/*-----朋友粉絲按鈕-----*/
a.friend_man /*整體*/
a.friend_man:hover
.friend_man.private_plurk /*傳送私人訊息*/
.friend_man.add_friend /*加入朋友*/
.friend_man.remove /*取消朋友*/
.friend_man.pending /*取消追蹤*/
.friend_man.add_follow /*追蹤粉絲*/
.friend_man.block /*加入黑名單*/
#block_user a.block
#block_user a.block:hover
body.language-large-font .friend_man
/*滑鼠移至效果*/
.friend_man.add_follow:hover,
.friend_man.remove:hover,
.friend_man.add_friend:hover,
.friend_man.pending:hover,
.friend_man.private_plurk:hover,
.friend_man.block:hover
/*-----朋友粉絲圖像-----*/
.friend_holder /*整區*/
.friend_holder table
.friend_holder img /*圖片*/
.friend_holder td /*圖片格*/
.friend_holder .user_link /*個別連結*/
.user_link img /*連結圖片*/
/*-----粉絲區文字與連結-----*/
div#fan_holder
div#fan_holder a
div#fan_holder a:hover
/*-----常設隱藏區域-----*/
#dash-friends p, #dash-friends form /*朋友搜尋*/
div #tw_help /*入門說明*/
div a#dashboard-invite /*邀請朋友*/
div #sharePlurk /*分享連結*/
.dash-icon /*社交小圖示*/
#dash-friends input.orange-but /*搜尋其他噗浪會員按鈕*/
input#loc_field /*輸入區*/
a#dashboard-invite span /*邀請朋友圖片區*/
#dash-friends p /*邀請朋友段落*/
#dash-friends form /*邀請朋友文字*/
#sharePlurk input.clipboard /*分享網址連結欄*/
#sharePlurk input.clipboard:hover
#sharePlurk span
#sharePlurk div
/*-----浪上的噗-----*/
#timeline_holder div.plurk /*噗外框*/
.block_cnt .plurk_cnt /*噗外框*/
.block_cnt .link_extend .plurk_cnt /*滑鼠移過去延伸的噗*/
.block_cnt .plurk_box .plurk_cnt /*噗打開後*/
.plurk .truncated /*浪上噗的高度*/
#timeline_cnt /*時間軸內容區整體*/
#timeline_cnt:hover
#timeline_holder .plurk_cnt /*浪上的噗*/
#timeline_holder div.plurk .td_qual span a /*浪上的暱稱區*/
#timeline_holder div.plurk .td_img /*浪上的頭貼*/
#timeline_holder div.link_extend .td_img /*滑鼠移過去時的頭貼*/
#timeline_holder div.plurk_box .td_img /*噗打開後的頭貼*/
.p_img /*頭貼圖片*/
.manager, .manager a, .manager .action /*編輯*/
.manager .cancel /*取消*/
.manager .delete /*刪除*/
.mute, .unmute /*消音,解除消音*/
.muted /*已消音的噗*/
td.td_cnt texture /*編輯噗欄位*/
.td_cnt .text_holder /*噗文字內容*/
.list /*回應列表*/
.list .empty /*無回應 : )的噗*/
.list .plurk_cnt /*列表中的噗*/
.list .plurk_cnt tr
.list table /*列表區表格寬度*/
.plurk_box .caption /*回應列表標題*/
.list .plurk_cnt .td_qual /*列表中的暱稱區*/
.plurk_box .qual_holder
.list .plurk_cnt .text_holder /*列表中的內容區*/
.plurk_box .mini_form /*下方您的回應區*/
.mini_form .qual_holder /*使用者名稱*/
.mini_form .char_updater /*尚餘字數*/
.char_updater span /*按Enter送出*/
textarea#input_small /*下方回應區輸入欄位*/
.info_box /*下方回應區訊息列*/
.info_box a /*連結文字*/
.info_box a:hover
div.favorite_count /*喜愛的人數*/
div.limited_box /*私人訊息給...*/
.perma_link /*訊息連結區*/
.perma_link a
.perma_link a:hover
/*-----噗內新回應的底色漸層-----*/
.plurk_box td .shade_6, td .shade_6,
.plurk_box td .shade_5, td .shade_5,
.plurk_box td .shade_4, td .shade_4,
.plurk_box td .shade_3, td .shade_3,
.plurk_box td .shade_2, td .shade_2,
.plurk_box td .shade_1, td .shade_1
/*-----噗上的連結-----*/
.plurk a.ex_link,
.text_holder a.ex_link,
.plurk a.ex_link:visited,
.plurk a.ex_link:active,
div.bigplurk h1.content a.ex_link, /*單噗頁面連結*/
#plurk_nav a:link, /*上一則下一則噗連結*/
#plurk_nav a:visited,
#plurk_nav a:active,
.plurk_content a.ex_link /*單噗回應列表連結*/
/*-----噗上的人名-----*/
.td_qual span a,
.td_qual span a:hover
/*-----影音圖片-----*/
.youtube img,
.video img,
.pictureservices img
/*滑鼠移至效果*/
.youtube:hover img,
.video:hover img,
.pictureservices:hover img
.list .pictureservices img /*列表中的圖片*/
.list .pictureservices img:hover
/*-----回應時間標示-----*/
.response_time .plurk_cnt
div.response_time
div.response_time .holder
/*-----回應數-----*/
.td_response_count
.response_count
.new .response_count /*新回應*/
.dots .inner /*中間的...*/
.reply_to /*回應時間旁的小圖示-回覆*/
.reply_to:hover
.del_icon /*回應時間旁的小圖示-刪除*/
.del_icon:hover
/*-----單則訊息網址頁 -----*/
div.bigplurk
.user-nick, /*暱稱*/
.user-nick:hover
div.bigplurk h1.content .plurk_content /*文字設定*/
div.contentwrapper h1.content /*內容區*/
div.time /*時間區*/
/*-----噗主代表圖-----*/
img.bubble_edge /*箭頭*/
div.user img /*圖片*/
/*-----上一則下一則-----*/
#prev_plurk, #next_plurk,
#prev_plurk:hover, #next_plurk:hover
/*-----回應列表區-----*/
#plurk_responses ul.responses
#plurk_responses h2 /*標題*/
#plurk_responses h2 a /*回應連結*/
div.feed-link a /*分享連結*/
#plurk_responses ul.responses li /*每則回應*/
ul.responses .message /*文字設定*/
#plurk_responses ul.responses .message a.user /*暱稱*/
img.avatar /*噗友代表圖*/
#plurk_responses ul.responses .message a /*訊息內連結樣式*/
#plurk_responses ul.responses .message a:hover
ul.responses li:hover span.time /*回應時間*/
ul.responses .highlight_owner .time /*原噗者回應時間*/
/*-----下方回應區-----*/
#reply_box
#reply_box_holder
#reply_box_holder .qual_holder /*使用者名稱*/
#reply_box #input_big /*輸入內容*/
/*-----登入或註冊以回應-----*/
div #not_logged_in h2
div #not_logged_in h2 a
div #not_logged_in h2 a:hover
/*-----浪上噗友小視窗-----*/
.AmiMenu.info_menu
.AmiMenu.info_menu .separator /*分隔線*/
.AmiMenu.info_menu .block /*舉報濫用*/
.AmiMenu td /*文字*/
.AmiMenu.info_menu td.on /*滑鼠移至*/
.AmiMenu.info_menu .user_info.on
.AmiMenu.info_menu .user_info.on b
.AmiMenu.info_menu .user_info img /*噗友圖片*/
.cmp_tooltips-down /*下拉視窗箭頭*/
.cmp_tooltips-up
/*-----說明小視窗-----*/
.tooltip_cnt
.tooltip_cnt img /*噗友代表圖*/
.AmiTT_main /*背景箭頭與文字*/
.AmiTT_main b /*名稱*/
/*-----功能視窗-----*/
.GB_Window /*外框*/
.GB_Window .header /*標題框*/
.GB_Window .content /*內容框*/
.GB_Window .header td.caption /*標題列*/
.GB_Window .close
.GB_Window .close span /*標題列關閉符號*/
/*-----彈出視窗-----*/
.GB_Gallery .iframe_holder
img[src="http://www.plurk.com/static/greybox/w_close1.gif"] /*關閉圖示*/
.GB_Gallery .content
.content div .hide_window /*隱藏影片在背景播放*/
div .hide_window a
/*-----註冊/登入-----*/
#top_login a#sign_up /*頁首上方*/
#validate_email
#sign_up_small
#registerToday
.plurk_box .login_to_see a /*每則噗回應區*/
.red_link
div .adsense /*單則訊息廣告區*/
#getting_started /*外掛連結視窗*/
/*------------------------------------------------------------------------
Date: 2011-05-22
List order by: Be Myself Inc. M6
-- 此噗版CSS僅供個人練習參考用,請勿改製再分享或用於商業用途 --
-- Copyright: 版權所有 保留一切權利 All Rights Reserved --
------------------------------------------------------------------------*/
這份列表會依照噗浪預設欄位的改變或使用習慣持續更新~希望能常保噗版設計的新鮮與彈性變化囉~
留言列表