答客問

CSS 的洋蔥式設計概念

9 月 13

管理員CSS 技巧 CSS, 網頁設計 No Comments / 4,554 views

應用 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 的效果了。