2012年10月5日 星期五

CSS 按鈕 橫排 及 div,span,class,id 解說

css 按鈕 橫排 顯示 效果,div , span , class , id 簡易解說

.

一、CSS 按鈕 橫排 顯示 效果

如圖:

 

 

代碼如圖:

 

 

.

範例檔 cssbuttontr03.zip 下載: asuswebstoragepan.baidu.comdocs.googleskydrive

注意是 cssbuttontr03.zip 此檔,解壓後用瀏覽器打開 t2.htm 即可

.

之前是用下面:

<ul>
<li>代碼</li>
<li>代碼</li>
<li>代碼</li>
</ul>

及混入span,算是那時也是參看別人文章並修改,反正功能有到就行,

前幾天在看blogspot樣式...結果不小心按到套用 = =,後至fc2將頭部,

按鈕橫排的css代碼找了出來,要copy過去用用,但詳細查看了一下,

用法很怪 = =,其實只需要用下面:

<div>
<span>代碼</span>
<span>代碼</span>
<span>代碼</span>
</div>

後在設置div樣式,及span樣式,和裡面a標籤連結樣式,這樣就可以。

.

div 、 span 這2者簡易解說:

div及span 可以看做容器,2者差別在於,一個結尾會換行,一個結尾不會換行

div 會換行

span 不會換行

只要記得這樣就行,上述範例,就是div容器,包了3個span容器,

由於span不會換,用成按鈕樣式,就可橫排顯示 。

.

class 、 id 這2者簡易解說:

class及id 可以看做樣式定制,給div...等其它容器調用,2個差別在於,一個是靜態,一個是動態

class 靜態,樣式參數前加個 . 後使用 class 調用如:

.test2 { ... }

<div class="test2">代碼</div>
 

id 動態,可由 javascript 變動,樣式參數前加個 # 後使用 id 調用如:

#test3 { ... }

<div id="test3">代碼</div>
 

一般使用靜態class就可,當容器需要由 javascript 改變時,則使用id,如點擊後變化之類。

上述範例檔 cssbuttontr03.zip 下載後,zip解壓,瀏覽器打開 t5.htm

滑鼠點擊前,如圖:

 

 

滑鼠點擊後,如圖:

 

 

.

滑鼠右鍵,檢視原始碼,即可查看 t5.htm 內容,我就不貼代碼了。

.

沒有留言:

張貼留言