3
阶段3：任务攻坚

3-1 【任务分析】

1.根据网页效果图，实现“网友交流”模块，主要训练要点包括水平分割线设置、图文混排和文字样式设置，如图1-10所示。

2.根据网页效果图，实现“页脚”模块，主要训练要点为段落和文字样式设置，如图1-11所示。

3-2 【实践训练】

1.通过观察，可以对“网友交流”模块的第一条评论做结构划分，如图1-12所示。

根据结构分析，可以分析出HTML代码结构，参考代码结构如下：

根据第一条评论结构，可以完成其他评论结构。

2 .“页脚”模块的每一行参考代码结构如下：

请根据样图和代码结构，独立练习完成“网友交流”模块，注意字号、行间距以及图片与文字的位置关系。

3-3 【知识扩展】

使用HBuilderX拾取屏幕颜色的步骤：

1.在代码区域利用有颜色属性的标记，先随意输入颜色的RGB值，将光标悬浮放在颜色值上，按alt键加鼠标左键就可以调出颜色选择面板，如图1-13所示。

2.点击“拾取屏幕颜色”按钮，鼠标变成“十”字形状，悬浮在需要拾取的颜色上，即可在“颜色选择面板”中的“HTML”中生成对应的RGB值，点击“OK”按钮即可，如图1-14所示。