我把我自己目前的css架構直接公開分享,這樣想修改版面的朋友會容易的多。但是因為我寫css很久,所以許多css的寫法都是簡略的寫法,如果想了解更多css的寫法,請參考:css簡易教學,或在噗浪密浪問我,也可以在本篇文章留言問我。

car_a06.gif 透過阿Q加入噗浪→GO

line-tamared2.gif

/*全頁面背景修改*/
body, html{}

/*標題*/
#page_title{}

/*頁首的BAR左半部*/
#top_bar .content a{}
#top_bar .content a:hover{}
#top_bar .content a#edit_link{}

/*頁首的BAR右半部*/
#top_login a{}
#top_login a:hover{}

/* Plurk Logo */
#dynamic_logo{}
#dynamic_logo img{}

/*河道底色或圖案*/
#timeline_holder{}
#timeline_holder #timeline_cnt #time_show{}
#timeline_holder #timeline_cnt #display_options_holder{}
#timeline_holder #timeline_cnt .day_start{}
#timeline_holder #timeline_bg .bottom_start , .bottom_end{}
#timeline_holder #bottom_line{}
.day_bg .div_inner{}

/*河道上浪友發的浪*/
.plurk_cnt{}
a.name{}
.text_holder{}
.p_img {}

/*河道下方更新通知*/
#updater{}
#updater #noti_np #noti_np_text{}
#updater #noti_np a{}
#updater #noti_re #noti_re_view #noti_re_text{}
#updater #noti_re #noti_re_view a{}

/*plurk控制面板*/
#dashboard_holder{}/*浪道下方全體包括發噗區.搜尋區.個人資料等...全區*/
#toggle_tab{}
#toggle_tab li{}
#plurks_pane_li{}
#plurk_form{}

/*新功能-搜尋區*/
#pane_search{}
#current_query{}

/*plurk發噗區*/
#pane_plurk{}
#main_poster{}
#main_poster .qual_holder{}
textarea#input_big.content{}/*鍵入對話框大小*/
#cur_time{}
.time{}

/*控制面板更改plurk私密、語系和選項等等*/
#more_options{}
#more_options a#more_options_link{}
#more_options #plurk_to{}
#more_options #more_options_holder{}

/*個人資料區*/
#plurk-dashboard{}

/*控制面板頭像和年紀、位置標示處*/
#dash-profile{}
#dash-profile p#full_name{}
#dash-profile #span_years , #m_or_f{}
#profile_pic{}/*個人圖像大小的控制*/

/*控制面板自介*/
#dash-additional-info{}
#dash-additional-info #about_me{}
#dash-additional-info #about_me a{}
#dash-additional-info #about_me a:hover{}

/*控制面板STATS欄位(Karma等等數據欄位)*/
#dash-stats{}
#dash-stats h2{}
#dash-stats a{color: #ff9999; }
#dash-stats #karma{}
#dash-stats table tbody tr th{}
#dash-stats table tbody tr td{}

/*控制面板朋友 friend 欄位*/
#dash-friends{}
#dash-friends a{}
#dash-friends h2{}
#dash-friends-pics{}
#show_all_friends{}
#dash-friends #friend_holder{}

/*控制面板粉絲 FANS欄位*/
#dash-fans{}
#dash-fans a{}
#dash-fans-pics{}
#dash-fans h2{}

/*粉絲下方的分享plurk*/
#sharePlurk{}
#sharePlurk div{}
#sharePlurk_url{}

/*噗浪最下面版權區*/
#footer{}
#footer a{}

/*浪區的浪開啟*/
.plurk_box .list{}
#input_small{height: 70px; }/*單一噗浪鍵入區*/
td.td_cnt textarea { height:100px; }

/*朋友及粉絲的圖像大小的修改完整版*/
.friend_holder .user_link{height: 22px!important; width: 22px!important; border: none!important; }
.friend_holder img{width: 22px; height: 22px; border: none; }

/*單一Plurk頁面*/
.user-nick{}
h1{}

line-tamared2.gif

一些css的特殊效果:


背景轉換 background: transparent;
無邊框 border: none;
半透明 filter: alpha(opacity=80); opacity: 0.8; -moz-opacity: 0.8; (以1到0.1的方式呈現,愈低愈透明,若修改三個數字都要改)
圖弧 -moz-border-radius: 10px; (僅呈現在Firefox,數字可以10.15.20.22之類的寫法)

以上是我目前覺得可以分享的部份,有問題,請發問。

創作者介紹
創作者 貓貓 的頭像
貓貓

NekoFitness Life

貓貓 發表在 痞客邦 留言(47) 人氣()