室內設計
 
尚佶網頁設計主選單
網頁美編設計製作
行動手機‧行動電視
網頁設計
網頁設計
最新訊息:
  網頁設計全球效應
  網頁設計的行銷效用?
作品設計歷程:
  昇華文件櫃有限公司
Shen Hua Filing Cabinet
File Cabinet
  戀戀紅葡萄酒酒莊 酒莊
  美和美吊扇公司
  HCB AUTO TOOLS
  鳳凰企業社
  國立中正大學行銷創意研究中心
  銘輝毛刷有限公司
  大業國中 嘉義市 97 海洋教育計畫
  鳳凰冰涼巾公司
  進泉瓜子
  金鴻勝酒廠
  集順汽車椅套
  嘉義市97教學卓越計畫
  鉅祥工具開發有限公司
更多作品 >>
 

 

 

 

 

 

 

 

filing cabinet file cabinet 新恩嘉義神經內科 新恩嘉義神經內科

 

 
 
網頁設計+創意=100%網站 arrow 網頁設計教學與製作技巧 arrow css網頁設計教學與網頁製作技巧. arrow 網頁製作 css menu 直列式單一選單   
網頁製作 css menu 直列式單一選單 E-mail
2008/11/01, 週六

網頁製作 css 橫式下拉式選單 

網頁製作 css menu 直列式單一選單


選單是一個網站必需製作的一個選項,選單的排列與顏色的配置,關係著一個網站點閱的高低,因此在設計選單的同時就應該思考整體選單的配置。例如顏色的配置與美編的設計等等。通常我們我看到的選單的設計製作,都是一般表格式的靜態html設計,然後再利用圖的按鈕設計,這是比較常看到的。當然也有使用flash下去做動態式的呈現,不過運用css直接下去做規範設計,卻是很少看到。這一個css所規範的直立式選單,就是直接全由css下去做規範設計與製作。這個css所支援的瀏覽器就比較廣泛,IE 6 .5 .7 就都可以使用。

裡面的三張GIF的圖就是外圍圓狐的圖上方( top.gif ) 下方(bottom.gif) 、選單三角型圖 (arrow.gif) 及選單滑鼠滑過三角型圖(arrowr.gif)。應用<dl>、<dt>、<dd>的規範按鈕與整體選單的配置,使用設計起來非常方便。


css02.jpgcss02_1.jpg

(一)將以下語法貼於<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>   是文字按空間棒讓文字置中一點,當然如果文字很多 就少一點。

 

< 上一頁   下一頁 >
top_18.jpg
 
 
尚佶網頁設計 2011 © copyright 版權所有.All rights reserved.
 
©2011 Sungie