這時候，要銘記在心的就是洋蔥式設計法。
利用以下的作法來達成設計上的目的，
<div class="onion_skin level0">
<div class="onion_skin level1">
<div class="onion_skin level2">
<div class="onion_core">
......
</div>
</div>
</div>
</div>
這時候，你只要在 CSS 裡，作這樣的設定
.onion_skin { margin:0; padding:0; }
.onion_core { margin:10px; }
.level0 { background:url('中間底圖') top center repeat; }
.level1 { background:url('上方底圖') top center no-repeat; }
.level2 { background:url('下方底圖') bottom center no-repeat; }
這樣就能輕鬆作出很多樣化的漸層底圖區塊，然後只要把內容放在 div.onion_core 裡面就好了。
另外，也不是只能用 div，實作上也常常利用 span, font, a 這些指令來作選單底圖。例如：
<ul class="menu">
<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 的效果了。