CSS網頁布局，強調文檔具有良好的結構語義，在以往的web開發中，我們在頁面中嵌入Flash，使網站頁面具有良好的動感視覺效果，以Flash的形式創建網頁導航菜單也是非經常用的方法。但這樣的形式使文檔的語義結構不明確，更要命的是，對於SEO（搜索引擎優化）這種形式更是一點兒作用都沒有，搜索引擎蜘蛛無法獲取菜單的鏈接目標。
我們關注標准，注重用戶體驗，也需要兼顧文檔的語義結構與SEO優化，MB5U認為以一種變通的方法可以實現。雖然不如真正的Flash有著炫目的效果，但這樣的形式也是一種切實可行的辦法。
具體的思路是，創建一個鏈接，將原本的鏈接文字隱藏掉，置入一個圖片（靜止的圖片）作為鏈接狀態的背景，在鏈接的懸停狀態，重新置入一個圖片（動畫圖片）作為鏈接狀態的背景。
獲得的效果是，在正常狀態下鏈接是一個靜止不動的圖片，當鼠標移到鏈接區域，即在鏈接的懸停狀態下，背景圖片變換成為一張動畫圖片。
XHtml編碼：
示例代碼 [www.mb5u.com]
<div id="menu">
<a href="http://www.mb5u.com/" title="Div CSS教程" target="_blank">CSS Web Design 模板無憂 - www.MB5U.com</a>
</div>
CSS編碼：
示例代碼 [www.mb5u.com]
#menu {
width:150px;
margin:50px auto;
}
#menu a {
display:block;
width:150px;
height:30px;
text-indent:160px;
white-space:nowrap;
background:url(btn1.gif) no-repeat 0 0;
overflow:hidden;
}
#menu a:hover {
background:url(btn2.gif) no-repeat 0 0;
}
CSS編碼釋義： menu部分，設置div容器的寬度為150px，設置上下外邊距為50px，左右為自動實現水平居中對齊。
menu a部分，將鏈接元素轉換為塊元素，設置其寬度與高度。設置文本縮進為160px，將鏈接文字“推”到了可視區域以外，但僅這樣做實現不了隱藏鏈接文本，緊接著設置強制文本在一行內顯示，溢出為隱藏。設置鏈接的背景圖片為btn1.gif，不重復，位於0 0坐標。
menu a:hover部分，設置鏈接的懸停狀態，僅將背景圖片改為btn2.gif。