Html css實作純文字和圖示的按鈕_HTML/Xhtml_網頁製作

本文總結一些基礎頁面元素的實作方式，後續陸續更新。首先我們遇到最多的可能是按鈕的切圖，按鈕可能有很多種外觀，但是一般可分為純文字的和帶圖標的按鈕，下面就來說說這兩種按鈕的實現方法。效果圖如下：

程式碼如下：

XML/HTML Code複製內容到剪貼簿

1. 前>前 名稱="代碼" 類別=類別=類別="html"html >
2. html>      html lang
=
3. lang=lang=裡> "
>
4.       頭>          
5.   標題>按鈕寫法>        
元 字符集>        元 http-equiv -UA-相容"
6.  內容="IE=Edge,chrome=1">         連結 rel=
7. rel=樣式 href="css/style.css" 樣式
8.  類型
9. ="text/ css "
10. >     
11.   a:hover{text-decoration: none;}     
12.   .btn{     
13.     顯示：內聯塊；     
14.     上邊距：10px；     
15.     內邊距：10px 24px；     
16.     邊框半徑：4px；     
17.     背景顏色：#63b7ff；     
18.     顏色：#fff；     
19.     遊標：指針；     
20.   }     
21.   .btn:停留{     
22.     背景顏色：#99c6ff；     
23.   }     
24.   .inbtn{     
25.     邊框：無；     
26.   }     
27.   .bubtn{     
28.     邊框：無；     
29.   }        .btn{          字體樣式：正常；        }     
30.   .bgbtn 跨度{     
31.     左邊距：10px；     
32.     左內邊距：20px；     
33.     背景： url(images/edit.png) 左中心 無重複；     
34.   }     
35.   .bgbtn02 img{     
36.     margin-bottom: -3px;     
37.     右邊距：10px；     
38.   }     
39. style>     
40.       head>
41.           
body
42. >          
43.       a href="" class="btn">a標籤按鈕
44. a>     
45.       input class=class=class= type=
46. "button" value 
47. value"input標籤按鈕"/>            button class
48. =class=
>
49. button標籤按鈕button>       i 
class
50. =class=tn🎜>
51. >i標籤按鈕i> 🎜>> 🎜>>       
52. a href="" class="bgbtn btn"
53. >  span>
附圖示span
54. >      a>           a
55.  href="" class="bgbtn02 btn">
  img src/>附圖示按鈕     
56. a>     
57.       body>
58.           
html

>

           至於各種標籤的優缺點，還是需要大家去體會啦，如果大家有什麼好玩的按鈕要寫，我們一起實現哦。