主控台版型的排列練習與嘗試,請試著按照段落一一貼上,來觀察其中的排版變化跟影響的區塊,熟悉後,就可以自己試著寫寫看合用的版本囉~

[ 資訊置左 ]

WHITEHOUSE.png

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

/*-----時間軸背景高度與位置調整-----*/

#timeline_holder
{
    position:relative !important;
    margin-left:222px;   /*邊界縮排*/
}
#timeline_holder,
#timeline_cnt,
#timeline_bg,
#timeline_fg
{
    height:600px !important;
}
#bottom_line  /*底軸*/
{
    top:603px !important;
}
day_bg .div_inner,
.div_inner /*日軸*/
{
    height:580px !important;
    background: transparent !important;
    border-right:0 !important;
}
#time_show /*每則時間*/
{
    top:623px !important;
    height:20px !important;
    z-index:1113;
}


/*-----往前往後圖示透明度變化-----*/

.browse_button
{filter:alpha(opacity=0) !important; opacity:0 !important; zoom:1;}
.browse_button:hover
{filter:alpha(opacity=100) !important; opacity:1 !important; zoom:1;}


/*-----主控台版面排列-----*/

#dashboard_holder
{
    text-align:left !important;
    width:100%;
}
div#plurk-dashboard
{
    width:218px !important;
    height:598px !important;
    overflow:hidden !important;
    position:absolute !important;
    z-index:901;
    top:-623px;
    left:0px;
    -moz-box-shadow:0px 7px 12px rgba(0,0,0,0.3);  /*CSS3陰影效果*/
    -webkit-box-shadow:0px 7px 12px rgba(0,0,0,0.3);  
    box-shadow:0px 7px 12px rgba(0,0,0,0.3);
}
.dash-segment
{
    width:218px;
    min-height:10px !important;
    height:auto !important;
}
p#about_me
{
    max-height:30px !important;
    overflow:hidden !important;
}
p#about_me:hover
{
    max-height:300px !important;
    -moz-transition:max-height 0.8s ease-in;  /*滑入效果*/
    -webkit-transition:max-height 0.8s ease-in;
    -o-transition:max-height 0.8s ease-in;
}
.segment-content
{
    padding-top:0px !important;
    padding-bottom:0px !important;
}
#dash-profile
{
    margin-top:10px;
}
.show_all_friends
{
    text-align:center;
    font-size:11px !important;
}
#dash-stats h3
{
    margin-top:0px !important;
}
.karma_hover
{
    font-size:22px;
}
#karma
{
    font-size:23px !important;
}


/*隱藏項目*/
.friend_holder, .award_bar, #dash-stats table,
#footer p,
#dynamic_logo, #logo img, img#creature,
.block_bg .div_one_line, .small_timeline .block_bg .div_one_line,
#top_login a#sign_up, #getting_started, div .adsense,
#dash-stats h2, #dash-friends h2, #dash-fans h2,
.link_arrow, .cmp_points-arrow, .cmp_karma_up, .cmp_karma_down,
#dash-friends p, #dash-friends form,
div #tw_help, div a#dashboard-invite, div #sharePlurk,
#block_user,
.dash-icon
{
    display : none;
    height:0 !important;
    width:0 !important;
    overflow:hidden;_overflow:none;
    position:fixed;
    top:-9000px;
}


/*-----發噗區位置-----*/

div#plurk_form
{
    position: absolute !important;
    top:-230px !important;
    left:250px;
    z-index:900;
    margin-top:20px !important;
}
#toggle_tab
{
    z-index:902;
    top:-233px !important;
    left:250px;
}


/*-----畫面背景-----*/

html
{
    background:#000 url() left top no-repeat;  /*放全頁面背景圖網址*/
    overflow-x:hidden !important;
}
body
{
    background:none !important;
}


/*-----時間軸背景-----*/

#timeline_holder
{
    background:#1a171b url(http://farm6.static.flickr.com/5077/5906989906_0b29f004ed_b.jpg) left top no-repeat;  /*放時間軸背景圖網址*/
}


/*------------------------------------------------------------------------
    Date: 2011-07-06
    Design by: Be Myself Inc. M6
    -- 此噗版CSS僅供個人自用,請勿改製再分享或用於商業用途 --
    -- Copyright: 版權所有 保留一切權利  All Rights Reserved --
------------------------------------------------------------------------*/

 

也可以換邊置放,將上述語法中紅字 left 改成 right 即可:

[ 資訊置右 ]

WHITEHOUSE-R.png  

 

多多參考各式版型排版的變化,瞭解其中各部份語法的作用後,動手練習寫寫看吧~

 

arrow
arrow

    M6 發表在 痞客邦 留言(44) 人氣()