CSS 的洋蔥式設計概念

No Comments /

應用 CSS 來設計網頁時,最常面臨的問題就是如何用最簡單的語法把畫面包得美美的。它可能是為了按鍵的效果、區塊的底圖等等....
這時候,要銘記在心的就是洋蔥式設計法。

利用以下的作法來達成設計上的目的,

<div class="onion skin0">
    <div class="onion skin1">
        <div class="onion skin2">
           <div class="onion core">
               ......
           </div>
       </div>
    </div>
</div>

這時候,你只要在 CSS 裡,作這樣的設定

.onion      { margin:0; padding:0; }
.onion.core { margin:10px; }
.onion.skin0{ background:url('中間底圖') top center repeat; }
.onion.skin1{ background:url('上方底圖') top center no-repeat; }
.onion.skin2{ background:url('下方底圖') bottom center no-repeat; }

這樣就能輕鬆作出很多樣化的漸層底圖區塊,然後只要把內容放在 <div class="onion core"> 裡面就好了。

另外,也不是只能用 div,實作上也常常利用 span, font, a 這些指令來作選單底圖。例如:

<ul>
    <li><span><a href="">....</a></span></li>
    <li><span><a href="">....</a></span></li>
    <li><span><a href="">....</a></span></li>
    <li><span><a href="">....</a></span></li>
</ul>

這時的 CSS 寫法是

ul.menu { list-style:none; }
ul.menu li { float:left; width:auto; }
ul.menu li span { display:block; margin:10px; background:url('左側底圖') left center no-repeat; }
ul.menu li a { display:block; padding:10px; background:url('右側底圖') right center no-repeat; line-height:32px; }
ul.menu li.on span { background:url('新的左側底圖') left center no-repeat; }
ul.menu li.on a { background:url('新的右側底圖') right center no-repeat; }

再搭配 jQuery 作如下的設定

$(document).ready(function(){
    $('ul.menu li').hover(
        function(){ $(this).addClass('on') ; },
        function(){ $(this).removeClass('on') ; }
    );
}) ;

這樣就可以作出橫列式的選單效果,並且有滑鼠 hover 的效果了。

VN:F [1.9.22_1171]
Rating: 8.5/10 (2 votes cast)
VN:F [1.9.22_1171]
Rating: +1 (from 1 vote)
CSS 的洋蔥式設計概念, 8.5 out of 10 based on 2 ratings

Post to Twitter Post to Plurk Post to Digg Post to Facebook

Facebook comments:

Leave a Reply

You must be logged in to post a comment.