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

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

.

一、CSS 按鈕 橫排 顯示 效果

如圖：

　

　

代碼如圖：

　

　

.

範例檔 cssbuttontr03.zip 下載： asuswebstorage 、 pan.baidu.com 、 docs.google 、 skydrive

注意是 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 內容，我就不貼代碼了。

.