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

博学谷——让IT教学更简单，让IT学习更有效 PAGE 16 PAGE 4 项目5 补充案例—“家居网”首页面制作 一、案例描述 1、考核知识点 列表与超链接` 2、练习目标 掌握无序列表、有序列表及定义列表。 掌握链接伪类。 3、需求分析 列表形式在网站设计中占有比较大的比重，显示信息非常整齐直观，便于用户理解。通过学习本案例可以使初学者进一步的巩固列表与超链接等相关知识点。 4、案例展示 效果如图5-1所示。 “西式甜品网”效果展示 二、布局及定义基础样式 1、效果分析 （1）HTML结构分析 “家居网”首页面从上到下可以分为5个模块，如图5-2所示。 “家居网”结构分析 （2）CSS样式分析 页面中的各个模块居中显示，页面的版心为980px。另外，页面中的所有字体均为微软雅黑，字体大小为16px，颜色为#404042，这些可以通过CSS公共样式进行定义。 2、页面布局 新建index05.html文件，在index05.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、定义公共样式 为了清除各浏览器的默认样式，使得网页在各浏览器中显示的效果一致，在完成页面布局后，首先要做的就是对CSS样式进行初始化并声明一些通用的样式。在index05.html文件所在的文件夹内新建css文件夹用于存放样式表文件style05.css，使用链入式引入样式表文件。然后定义页面的基础样式，具体如下： /*重置浏览器的默认样式*/ *{margin:0;padding:0;border:0;list-style: none;} /*全局控制*/ body{font-family: 微软雅黑;font-size: 16px;color:#404042;} a{text-decoration: none;color:#fff;} 三、案例制作 1、制作头部模块 （1）HTML结构分析 “头部”模块整体由一个大盒子div进行控制。内部嵌套2个div分别用来搭建左侧logo和右侧文字内容部分。“头部”模块的具体结构如图5-3所示。 “头部”模块结构图 （2）样式分析 “头部”模块的宽为980px，通过设置外边距属性使其在页面中居中显示。左侧logo和右侧文字内容部分分别设置左右浮动，最后还需设置鼠标悬浮时a链接的文字样式等。 （3）搭建结构 在index05.html文件内书写“头部”模块的HTML结构代码。具体如下： !--head begin-- div class=header div class=leftimg src=images/logo.png//div div class=righta href=#登录/a | a href=#注册/a/div /div !--head end-- （4）定义样式 在样式表文件style05.css中书写CSS样式代码，用于控制“头部”模块。具体如下： .header{ width:980px; margin:0 auto; padding-top: 20px; overflow: hidden; } .header .left{float: left;} .header .right{ float: right; line-height: 80px; } .header a{color: #404042;} .header a:hover{color:#da5454;} 上述代码中，第3行代码用于设置“头部