木笛雅設

拋開用表格做導覽列的傳統作法吧
用列表語法ul和li結合CSS樣式控制
輕鬆做出語法與畫面同樣簡潔的web2.0導覽選單


現在流行製作非常簡潔的網頁導覽選單
尤其在部落格性質的網站更是如此
其實這些選單早已不再是利用表格排版製作
而是用HTML的列表語法先訂結構
再透過CSS樣式表將畫面表現呈現出來
範例網頁
1.首先我們先寫出導覽列的內容架構

<div id="menu">
<ul>
<li class="menudeco"></li>
<li><a href="#">部落格</a></li>
<li class="menudeco"></li>
<li><a href="#">相簿</a></li>
<li class="menudeco"></li>
<li><a href="#">留言板</a></li>
<li class="menudeco"></li>
<li><a href="#">名片</a></li>
<li class="menudeco"></li>
</ul>
</div>

這是用ul和li列表做出的導覽列內容
整個架構包在id為menu的div之中

2.再來撰寫將列表變成橫向的樣式表

#menu ul{
float:right;
list-style:none;
}
#menu ul li{
float:left;
margin:0px 10px 0px 0px;
}


在#menu ul中的語法意義:
float:right----將直向列表變成橫向，且向右對齊
list-style:none----不要顯示項目符號
在#menu ul li中的語法意義:
float:left----每一個列表項目由左開始排列
margin:0px 10px 0px 0px----每一個列表項目彼此的右變間距為10px
此時可以預覽看看，原本的列表項目以變成頗具雛形的導覽列



3.製作分隔線樣式表
.menudeco{
width:1px;
height:18px;
background:#7A3719;
}
4.製作menu樣式表定位選單位置
#menu{
padding:10px 0 0 0;
background:url(images/css-menubg-image.jpg) no-repeat;
width:800px;
height:300px;
text-align:center;
margin:auto;
}
在#menu中的語法意義:
padding:10px 0 0 0----使導覽選單距頂端10px
background:url(images/css-menubg-image.jpg) no-repeat----底圖不重複出現
text-align:center----使div的內容置中
margin:auto----自動調整div與邊界的距離
這裏使用的div居中的技巧，各位可要好好記住，是非常簡單的居中語法
margin:auto這個語法如果漏掉就沒有居中效果囉
此時不妨再預覽一下，整個像是部落格banner兼導覽列已經完成了


5.製作連結樣式
當然學了CSS最重要的就是修飾連結效果
#menu ul li a{
color:#000;
text-decoration:none;
}
#menu ul li a:hover{
color:#fff;
text-decoration:none;
}

連結部份就不再多說囉
其實有興趣學習的人可以嘗試變化menu的位置和樣式
作出不同的感覺喔
置下選單風格