|
網頁製作 css menu 直列式單一選單
選單是一個網站必需製作的一個選項，選單的排列與顏色的配置，關係著一個網站點閱的高低，因此在設計選單的同時就應該思考整體選單的配置。例如顏色的配置與美編的設計等等。通常我們我看到的選單的設計製作，都是一般表格式的靜態html設計，然後再利用圖的按鈕設計，這是比較常看到的。當然也有使用flash下去做動態式的呈現，不過運用css直接下去做規範設計，卻是很少看到。這一個css所規範的直立式選單，就是直接全由css下去做規範設計與製作。這個css所支援的瀏覽器就比較廣泛，IE 6 .5 .7 就都可以使用。
裡面的三張GIF的圖就是外圍圓狐的圖上方( top.gif ) 下方(bottom.gif) 、選單三角型圖 (arrow.gif) 及選單滑鼠滑過三角型圖(arrowr.gif)。應用<dl>、<dt>、<dd>的規範按鈕與整體選單的配置，使用設計起來非常方便。
(一)將以下語法貼於<head>與</head>之間
<style type="text/css">
#menu dl {width: 150px; margin: 0 auto; padding: 0 0 10px 0; background: #69c url(bottom.gif) no-repeat bottom left;}
#menu dt {margin:0; padding: 10px; font-size: 1.4em; font-weight:bold; color: #fff; border-bottom:1px solid #fff; background: #69c url(top.gif) no-repeat top left;}
#menu dd {margin:0px; padding:0px; color: #fff; font-size: 12px; border-bottom:1px solid #fff; background: #47a;}
#gallery a, #gallery a:visited {color:#fff; text-decoration:none; display:block; padding:5px 5px 5px 20px;
background: #47a url(arrow.gif) no-repeat 10px 10px; width:125px;
}
#gallery a:hover {background: #258 url(arrowr.gif) no-repeat 11px 10px; color:#9cf;}
ol li {font-size:11px;}
</style>
(二) 將以下語法貼於<body>與</body>之間
<div id="menu">
<dl id="gallery">
<dt>Produite ort </dt>
<dd><a href="#" title="大鋼介紹"> 大 鋼 介 紹</a></dd>
<dd><a href="#" title="內容索引"> 內 容 索 引</a></dd>
<dd><a href="#" title="事務說明"> 事 務 說 明</a></dd>
<dd><a href="#" title="規劃導引"> 規 劃 導 引</a></dd>
<dd><a href="#" title="規則說明"> 規 則 說 明</a></dd>
<dd><a href="#" title="詢問事項"> 詢 問 事 項</a></dd>
</dl>
</div>
在(二)裡的<dd><a href="#" title="大鋼介紹"> 大 鋼 介 紹</a></dd> 是文字按空間棒讓文字置中一點，當然如果文字很多 就少一點。
|
