利用项目符号标签制作选单技巧

項目符號標籤在css是非常實用的,我們經常可以看到在國外CSS Style網站中被廣泛的運用.例如本站的主選項和css單元的選項都是利用項目符號標籤,因此這裡提供簡易的技巧教學.

 

一般項目符號呈現的效果

• About
• Sitmap
• Coolsite

<ul>

<li>About</li>

<li>Sitmap</li>

<li>Coolsite</li>

</ul>

利用css刪除項目符號與邊界

• About
• Sitmap
• Coolsite

<style type="text/css">

<!--

#mu ul{list-style-type: none;margin: 0px;padding: 0px;}

#mu li{background: #cc9;margin: 2px;width: 40px;}

-->

</style>

<div id="mu"><ul>

<li>About</li>

<li>Sitmap</li>

<li>Coolsite</li>

</ul><div>

利用css相對位置float: left呈現靠左橫向排列

• About
• Sitmap
• Coolsite

<style type="text/css">
<!--
#mus ul{list-style-type: none;margin: 0px;padding: 0px;}
#mus li{background: #cc9;margin: 2px;width: 40px;float: left}
-->
</style>

<div id="mus"><ul>
<li>About</li>
<li>Sitmap</li>
<li>Coolsite</li>
</ul><div>

利用css連結效果呈現出動態的選項

• About
• Sitmap
• Coolsite

<style type="text/css">
<!--
#muse ul{list-style-type: none;margin: 0px;padding: 0px;}
#muse li{margin: 2px;float: left}
#muse li a{background: #cc9;padding:5px;}
#muse li a:hover{background: #990;position:relative;top:-7px;
border-bottom: #990 5px solid;color:#fff}
-->
</style>

<div id="muse"><ul>
<li><a href="#">About</a></li>
<li><a href="#">Sitmap</a></li>
<li><a href="#">Coolsite</a></li>
</ul><div>