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

 

 

 

 

 

 

 

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

 

 
 
網頁設計+創意=100%網站 arrow 網路資訊分享 arrow 網頁設計 arrow css 之網頁製作技巧 (一)   
css 之網頁製作技巧 (一) E-mail
2008/10/17, 週五

設佶網頁設計

css 之網頁製作技巧 (一)

網頁製作要美觀,所使用的網頁設計技巧當然很多。如使用圖片或者gif動畫,有的更精巧的更使用到flash下去製作一些功能按鈕。但您可能不知專門在使用在網頁製作上的行距或者表格的規範的css,竟然也可以做一些像flash的網頁製作效果。例如像一些按鈕或一些像是使用flash、gif所製作出來的動畫。其實使用css網頁製作技巧的方法還是非常多的。因為css所做出的網頁製作技巧看起來不像圖那樣的粗糙,它完全是類似相量的東西。因此許多人仍喜歡應用css下去做一些網頁製作的效果。

以下所要介紹的便是在網頁製作按鈕的技巧。從中我們可了解一些css的語法與應用製作的方式。首先我們必需將css的語法貼在<head>與</head>之間,再將下方xhtml的語法貼於<body>與</body>之間,這樣動態的css所製作的效果就能立即呈現。<div id="menu">就是將您所要呈現按鈕的地方去呼叫上方的css語法。而上方css所製作與設計的語法" #menu a, #menu a:visited { "便是設定按下按鈕的一些設定與參數,"#menu a:hover { "則是滑鼠滑過按鈕的效果。

css01.jpg

 

 

 

 

 

CASCADING STYLE SHEET

#menu a, #menu a:visited {
  position:relative;
  text-decoration:none;
  text-align:center;
  background-color:#9ab;
  color:#fff;
  display:block;
  width:10em;
  border:2px solid #fff;
  border-color:#def #678 #345 #cde;
  padding:0.25em;
  margin:0.5em auto;
  }

#menu a:hover {
  top:2px;
  left:2px;
  color:#fff;
  border-color:#345 #cde #def #678;
  }


XHTML

<div id="menu">
  <a href="#nogo">Item 1</a>
  <a href="#nogo">Item 2</a>
  <a href="#nogo">Item 3</a>
  <a href="#nogo">Item 4</a>
  <a href="#nogo">Item 5</a>
</div>

最後更新 ( 2008/10/17, 週五 )
< 上一頁   下一頁 >
top_18.jpg
 
 
尚佶網頁設計 2011 © copyright 版權所有.All rights reserved.
 
©2011 Sungie