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

博学谷——让IT教学更简单，让IT学习更有效 PAGE 10 PAGE 5 补充案例—“谭木记”专题页面制作 一、案例描述 1、考核知识点 CSS字体样式及文本外观属性 CSS复合选择器 2、练习目标 掌握CSS字体样式及文本外观属性。 掌握CSS复合选择器。 3、需求分析 一个完整的网页通常包含很多元素，仅仅依靠CSS基础选择器很难完美的控制各个元素，相比之下，CSS复合选择器操作更方便。通过学习本案例可以进一步的巩固CSS复合选择器和字体样式及文本外观属性等相关知识点。 4、案例展示 效果如图3-1所示。 “谭木记”效果展示 二、布局及定义基础样式 1、效果分析 （1）HTML结构分析 “谭木记”专题页面从上到下可以分为4个模块，如图3-2所示。 “谭木记”结构分析 （2）CSS样式分析 页面中的各个模块居中显示，且页面中的所有字体大多为隶书，字体大小为16px，颜色为#303131，这些可以通过CSS公共样式进行定义。 2、页面布局 新建index03.html文件，在index03.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 !--head begin-- div class=head/div !--head 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、定义公共样式 为了清除各浏览器的默认样式，使得网页在各浏览器中显示的效果一致，在完成页面布局后，首先要做的就是对CSS样式进行初始化并声明一些通用的样式。在index03.html文件所在的文件夹内新建css文件夹用于存放样式表文件style03.css，使用链入式引入样式表文件。然后定义页面的基础样式，具体如下： /*重置浏览器的默认样式*/ *{margin:0;padding:0;} /*全局控制*/ body{font-family:隶书; font-size:16px; color:#303131;} 三、案例制作 1、制作头部模块 （1）HTML结构分析 “头部”模块由div标记定义，内部嵌套img标记用来添加logo图片。“头部”模块的具体结构如图3-3所示。 “头部”模块结构图 （2）样式分析 “头部”模块水平居中显示，背景颜色为#525252。 （3）搭建结构 在index03.html文件内书写“头部”模块的HTML结构代码。具体如下： !--head begin-- div class=header img src=images/logo.jpg/ /div !--head end-- （4）定义样式 在样式表文件style03.css中书写CSS样式代码，用于控制“头部”模块。具体如下： .header{ width:980px; height:114px; background-color:#525252; margin:0 auto; text-align: center; } 上述代码中，第5行代码用于设置“头部”模块在页面中居中显示。 保存index03.html与style03.css文件，刷新页面，效果如图3-4所示。 “头部”模块效果图 2、制作banner模块 （1）HTML结构分析 “banner”模块整体由div标记定义。内部嵌套h2标记和img标记分别用来定义标题和图片。 “banner”模块的具体结构如图3-5所示。 “banner”模块结构图 （2）样式分析 “banner”模块的图片在页面中居中显示，标题部分字体大小为18px，行高为40px。 （3）搭建结构 在index03.html文件内书写“banner”模块的HTML结构代码。具体如下： !--banner begin-- div class=banner h2原木时尚/h2 img src