网页开发与制作 HTML5页面元素及属性 2-21综合案例.docVIP

分析效果图 本网页可以分为3部分：头部、导航和内容。如图2-28所示。 结构分析 其中，头部信息通过header元素定义，内部由img/标记插入图片。导航链接由nav元素定义，内部嵌套无序列表ul。文章内容由article元素定义，内部由details元素进行划分，其中动作电影、科幻电影部分均为插入的图片，由details元素内部的summary元素定义，以实现点击这两个图片时，分别显示details元素内部的其他内容。页面中的评分进度条效果由meter元素来实现。 制作页面 根据上面的分析，使用相应的HTML元素来搭建网页结构，如例2-21所示。 example21.html !doctype html html lang=en head meta charset=UTF-8 title电影影评网/title /head body !--header begin-- header/header !--header end-- !--nav begin-- nav/nav !--nav end-- !--article begin-- article/article !--article end-- /body /html 在例2-21中，第9、12、15行代码分别定义了页面的头部信息、导航链接以及文章内容部分。接下来分步来实现页面的制作。 制作头部信息 在网页结构代码example21.html中添加header模块的结构代码，具体如下： !--header begin-- header h2 align=center电影影评网/h2 p align=center img src=images/44.jpg /p /header !--header end-- 运行例2-21，效果如图2-29所示。 头部效果展示 制作导航链接 在网页结构代码example21.html中添加nav模块的结构代码，具体如下： !--nav begin-- nav P align=center img src=images/nav1.jpg img src=images/nav2.jpg img src=images/nav3.jpg img src=images/nav4.jpg img src=images/nav5.jpg /P /nav !--nav end-- 保存example21.html文件，刷新页面，效果如图2-30所示。 导航链接效果展示 制作文章内容区域 在网页结构代码example22.html中添加article模块的结构代码，具体如下： !--article begin-- article details summary img src=images/111.png/summary ul contenteditable=true li figcaption《敢死队》/figcaption p今天看了全天唯一一场原声的mark《敢死队》/mark。有好事者统计，这群肌肉大叔的年龄加起来是439岁，平均年龄超过了50岁，其中岁数最大的mark史泰龙/mark64岁，岁数最小的mark杰森·斯坦森/mark也有38岁，堪称老男人团。一帮纯爷们拍出的电影，当然是没有什么剧情，从头劲爆到尾。 旁边有个陌生的软妹睡死过去。全场的男性都异常亢奋。廉颇老矣，尚能饭否。当然是宝刀未老了。mark史泰龙/mark全程曾哥附....../p img src=images/444.jpg /li li/li li 大众评分：meter value=65 min=0 max=100 low=60 high=80 title=65分 optimum=10065/meter /li li 媒体评分：meter value=80 min=0 max=100 low=60 high=80 title=65分 optimum=10065/meter /li li