HTML5+CSS3系列教程——如何制作简单按钮笔记

 

1、按钮的制作方式

• 用图片（目前用的不多）

• 纯CSS a标签

• input 图片二决定了input的类型 当input的type属性是submit button等这些的时候他呈现一个按钮

• button标签

2、CSS

• 行内元素设置宽高不生效，适用display:block；可以将行内元素设置为块集元素

• text-align可以是文字在容器中横向居中

• line-height当数值与height一样的时候文字垂直居中

• text-decoration将文字下划线去除

• background属性可以为元素设置背景颜色

• color属性可以为文字设置颜色

• font-family属性可以设置字体

• border:none 去除默认边框

3、未美化按钮案例

 1 
 2 
 3 
 4     
 5     
18 
19 
20 按钮一
21 
22 
23 按钮四
24 
25 

 

运行结果：

 

 

4、美化制作按钮案例：

 1 
 2 
 3 
 4     
 5     
36 
37 
38 按钮一
39 
40 
41 按钮四
42 
43 

运行结果：