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

分析效果图

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

结构分析

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

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

制作页面

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

example21.html

电影影评网

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

制作头部信息

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

电影影评网

44.jpg

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

头部效果展示

制作导航链接

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

nav1.jpg

nav2.jpg

nav3.jpg

nav4.jpg

nav5.jpg

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

导航链接效果展示

制作文章内容区域

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

111.png

  • 《敢死队》

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

    444.jpg

  • 大众评分:65

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值