Web前端开发精品课 HTML与CSS进阶教程

(副标题)：无 ;

(作者): 莫振杰 ;

内容简介：

​ 8.1　表单效果简介
表单，在实际开发中十分常见，几乎每一个网站都会涉及表单。一个表单是否美观，对用户体验来说非常重要。毕竟在一个站点中，表单是用户注册登录经常用到的东西。别看一个表单结构那么简单，有时候使用CSS操作起来是一件很头疼的事情。如果让我们来控制表单的外观，估计不少小伙伴会出现各种各样的问题，例如文本框与文字不能对齐，复选框与文字没有垂直居中，图8-1为绿叶学习网中的表单。

图8-1　绿叶学习网中的表单
这一章我们从以下三个方面来深入学习一下表单开发技巧。
（1）深入radio和checkbox。
（2）深入textarea。
（3）表单对齐。
在这一章我们只介绍表单中的CSS技巧，对于表单的动态操作，如文本框聚焦失焦、单复选框全选等，可以关注绿叶学习官网的JavaScript教程或jQuery教程。
8.2　深入radio和checkbox
radio指的是单选框，而checkbox指的是复选框。对于radio和checkbox，我们主要来学习一个方面就行了：单选框复选框与文字垂直居中对齐。
现在大部分网站的主流字体大小都是12px（如图8-2所示）或者14px（如图8-3所示）。在表单开发中，无论是12px，还是14px，文字与单选框或复选框都是不对齐的，感觉特别难看，用户体验比较差。

图8-2　字体大小为12px

图8-3　字体大小为14px
之前我们接触过vertical-align属性，单选框或复选框与文字默认情况下是以vertical-align:baseline的方式对齐的，这也是导致单选框或复选框与文字在垂直方向不居中对齐的原因。因此，我们可以使用vertical-align属性来解决。
语法：
vertical-align:像素值;
说明：
我们分两种情况考虑。
（1）当文字大小为12px时，我们

目录预览：

​ Web前端开发精品课 HTML与CSS进阶教程
第1章 HTML基础知识
第2章 语义化
第二部分 CSS进阶
第3章 CSS基础知识
第4章 CSS规范
第5章 盒子模型
第6章 display属性
第7章 文本效果
第8章 表单效果
8.1 表单效果简介
第9章 浮动布局
第10章 定位布局
第11章 CSS图形
第12章 性能优化
第13章 CSS技巧
第14章 重要概念
后记
欢迎来到异步社区！