《HTML5网页设计》补充案例5.docVIP

博学谷——让IT教学更简单，让IT学习更有效 PAGE 14 PAGE 2 补充案例—“萌宠俱乐部”注册页面制 一、案例描述 1、考核知识点 表格与表单` 2、练习目标 掌握表格样式的控制。 掌握表单相关标记。 3、需求分析 表格和表单在互联网上随处可见，一般多用于登录和注册页面的制作。通过学习本案例可以使初学者进一步的巩固表格与表单等相关知识点。 4、案例展示 效果如图6-1所示。 “萌宠俱乐部”效果展示 二、布局及定义基础样式 1、效果分析 （1）HTML结构分析 “萌宠俱乐部”首页面从上到下可以分为5个模块，如图6-2所示。 “萌宠俱乐部”结构分析 （2）CSS样式分析 页面中的各个模块居中显示，页面的版心为980px。另外，页面中的所有字体均为微软雅黑，字体大小为16px，这些可以通过CSS公共样式进行定义。 2、页面布局 新建index06.html文件，在index06.html文件内书写HTML结构代码，具体代码如下。 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml xml:lang=en head meta http-equiv=Content-Type content=text/html;charset=UTF-8 title萌宠俱乐部/title /head body !--header begin-- div class=header/div !--header end-- !--nav begin-- div class=nav/div !--nav end-- !--banner begin-- div class=banner/div !--banner end-- !--content begin-- div class=content/div !--content end-- !--footer begin-- div class=footer/div !--footer end-- /body /html 在上述代码中，通过给div添加不同的类名来定义页面中的各个模块。 3、定义公共样式