html5网页综合案例制作,网页开发与制作 HTML5页面元素及属性 2-21综合案例（6页）-原创力文档...

分析效果图

本网页可以分为3部分：头部、导航和内容。如图2-28所示。

结构分析

其中，头部信息通过元素定义，内部由标记插入图片。导航链接由元素定义，内部嵌套无序列表

• 。文章内容由元素定义，内部由元素进行划分，其中动作电影、科幻电影部分均为插入的图片，由元素内部的元素定义，以实现点击这两个图片时，分别显示元素内部的其他内容。页面中的评分进度条效果由元素来实现。

制作页面

根据上面的分析，使用相应的HTML元素来搭建网页结构，如例2-21所示。

example21.html

电影影评网

在例2-21中，第9、12、15行代码分别定义了页面的头部信息、导航链接以及文章内容部分。接下来分步来实现页面的制作。

制作头部信息

在网页结构代码example21.html中添加header模块的结构代码，具体如下：

电影影评网

运行例2-21，效果如图2-29所示。

头部效果展示

制作导航链接

在网页结构代码example21.html中添加nav模块的结构代码，具体如下：

保存example21.html文件，刷新页面，效果如图2-30所示。

导航链接效果展示

制作文章内容区域

在网页结构代码example22.html中添加article模块的结构代码，具体如下：

• 《敢死队》

  今天看了全天唯一一场原声的《敢死队》。有好事者统计，这群肌肉大叔的年龄加起来是439岁，平均年龄超过了50岁，其中岁数最大的史泰龙64岁，岁数最小的杰森·斯坦森也有38岁，堪称老男人团。一帮纯爷们拍出的电影，当然是没有什么剧情，从头劲爆到尾。 旁边有个陌生的软妹睡死过去。全场的男性都异常亢奋。廉颇老矣，尚能饭否。当然是宝刀未老了。史泰龙全程曾哥附......

  

• 大众评分：65