下面就来讲解一下如何用CSS装饰表单来制作表单吧。不需要华丽的外表，只要简洁大方，方便用户查看和填写信息即可，所以表单的制作还是比较简单的。我们先来看一个案例。窗体有自己的宽度，但高度由窗体中的不同控件显示。表单区域有自己的圆角边框，每个表单元素之间的间距相等。我们将在本课中完成这个案例。首先，这里有一段已经为大家准备好的html代码，里面包含了表单标签，以及一些常用的表单元素。表单内容包括：姓名、年龄、手机号、QQ号、性别和选择的主题，还有浏览中的一个重置和确认按钮在浏览器中查看效果，我们可以看到表单的内容不是通过CSS修改，这个页面不是很漂亮，接下来我们来修改一下这个页面。首先在head标签里面添加一个link标签，正确导入form.css样式文件，在form.css文件中写入样式，定义通配符选择器，声明样式：padding:0;保证金：0；定义表单标签选择器声明样式：width:600px；边框：3px纯天蓝色；边界半径：15px；填充：20px；保证金：50px；CSS*{填充：0；保证金：0；}形式{宽度：600px;半径：15px；填充：20px；边距：50px；}表单>标签{显示：块；底部边距：20px；}form>label>span{显示：内联块；宽度：90px；文本对齐：右；}form>label>input{padding:5px10px;}form>input[type=reset],form>input[type=button]{width:130px;高度：30px；字体大小：18px；游标：指针；：#fff；边框：无；}form>input[type=reset]{背景颜色：橙色；}form>input[type=button]{背景颜色：浅绿色；回到浏览器，我们看到，表单的整个范围都出现了，但内部内容并没有垂直排列。回到编辑器，继续写CSS定义选择器表单>标签声明样式：显示：块；底部边距：20px；返回浏览器查看效果。这时候label标签就变成了一个块元素，实现了垂直排列和排他行的特性，也实现了每行之间的距离。返回编辑，继续处理单行文本框控件和控件前面文本的特殊样式。定义选择器：form>label>span声明样式：display:inline-block;宽度：90px；文本对齐：右；在浏览器中查看效果，span中的文字已经右对齐了，现在的效果比之前有了很大的变化。当用户在表单中填写内容时，我们可以看到文本与表单边框之间的距离很小，需要对内边距进行处理才能达到完美的效果。回到编辑器，定义选择器：form>label>input，并声明样式：padding:5px10px;继续看效果，单行文本框之间的距离也实现了。继续完成按钮的修改。为了增加用户体验，我们需要分别设置按钮的宽高，并添加不同的颜色。定义选择器：form>input[type=reset],form>input[type=button]声明样式：width:130px;高度：30px；字体大小：18px；游标：指针；颜色：#fff；border:none;Defineselector:form>input[type=reset]Declarestyle:background-color:orange;Defineselector:form>input[type=button]Declarestyle:background-color:lightgreen;返回浏览器，按钮的造型完成，
