html5+css3网页设计大作业_《HTML5+CSS3网页设计基础》之“心灵小屋美文”任务实战...

1.任务描述

用HTML5元素及属性实现图所示的“心灵小屋美文”网页制作，最终效果如图所示：

2.任务目标

该任务主要考察学生对HTML5 元素及属性的掌握长度。

3.实施步骤

(1)、搭建页面基本结构

我的爱心小屋

(2)、制作头部信息

保存并运行任务代码，效果如下图所示：

“心灵小美文”头部

(3)、制作导航信息

• 文章精选
• 内容收藏
• 心情列表

保存并刷新任务代码，效果如下图所示：

“心灵小美文”头部与导航

(4)、制作文章内容区域

文章精选

《致橡树》

我如果爱你——绝不像攀援的凌霄花，借你的高枝炫耀自己；我如果爱你——绝不学痴情的鸟儿为绿荫重复单调的歌

曲；也不止像泉源长年送来清凉的慰藉；也不止像险峰增加你的高度，衬托你的威仪。甚至日光。甚至春雨。不，这

些都还不够！我必须是你近旁的一株木棉，作为树的形象和你站在一起。根，紧握在地下，叶，相触在云里。每一阵

风吹过我们都互相致意，但没有人听懂我们的言语。你有你的铜枝铁干，像刀、像剑也像戟；我有我红硕的花朵像沉

重的叹息，又像英勇的火炬。我们分担寒潮、风雷、霹雳；我们共享雾霭、流岚、虹霓。仿佛永远分离，却又终身相

依。这才是伟大的爱情，坚贞就在这里：不仅爱你伟岸的身躯，也爱你坚持的位置，脚下的土地。

显示更多

《致橡树》

我如果爱你——绝不像攀援的凌霄花，借你的高枝炫耀自己；我如果爱你——绝不学痴情的鸟儿为绿荫重复单调的歌

曲；也不止像泉源长年送来清凉的慰藉；也不止像险峰增加你的高度，衬托你的威仪。甚至日光。甚至春雨。不，这

些都还不够！我必须是你近旁的一株木棉，作为树的形象和你站在一起。根，紧握在地下，叶，相触在云里。每一阵

风吹过我们都互相致意，但没有人听懂我们的言语。你有你的铜枝铁干，像刀、像剑也像戟；我有我红硕的花朵像沉

重的叹息，又像英勇的火炬。我们分担寒潮、风雷、霹雳；我们共享雾霭、流岚、虹霓。仿佛永远分离，却又终身相

依。这才是伟大的爱情，坚贞就在这里：不仅爱你伟岸的身躯，也爱你坚持的位置，脚下的土地。

保存并刷新任务代码，效果如下图所示：

“心灵小屋美文”网页

当点击“显示更多”后效果如下图所示：

(5)、制作导航信息

心灵成长值

今日：80%

保存并刷新任务代码，效果如下图所示：