3
阶段3：任务攻坚

3-1 【任务分析】

1.根据网页效果图，实现“兵器大观”模块，训练要点为CSS选择器选择和命名、div布局、图片排版、背景图片设置，如图2-16所示。

2.根据网页效果图，实现“页脚”模块，训练要点为CSS选择器选择、div布局、图文混排设置，如图2-17所示。

3-2 【实践训练】

1 .“兵器大观”模块的HTML参考代码结构如下：

2 .“兵器大观”模块的CSS样式选择器名为．show，样式包括：

（1）宽度1500px；

（2）水平方向居中，上下间距50px。

3 .“兵器大观”模块指定背景图片，选择器名为．background1，样式包括：

（1）添加背景图片；

（2）宽度1500px，高度980px；

（3）水平方向居中。

4.为背景颜色添加半透明效果

可以通过自行查询资料，尝试完成，在浏览器中验证效果。在【知识拓展】中，有介绍相应方法。

5 .“页脚”模块的HTML参考代码结构如下：

6 .“页脚”模块的文字CSS样式与“标题”模块相同，图片CSS样式与“三军风采”模块相同。

请根据样图和代码结构，独立练习完成“兵器大观”模块和“页脚”模块。

3-3 【知识扩展】

在网页中设置图片半透明效果的方法主要有以下4种。

1.使用CSS的opacity属性：通过设置图片的opacity属性，可以实现整个图片的透明效果。取值范围为0到1，0表示完全透明，1表示完全不透明。

如：img ｛

2.使用CSS的rgba颜色值：可以通过使用rgba颜色值来设置图片的背景颜色，并在rgba值中设置透明通道的值。通过设置背景颜色的透明度，就可以实现图片的半透明效果。

如：img ｛

3.使用CSS的linear-gradient背景渐变：通过设置图片的背景颜色为一个透明度逐渐变化的线性渐变，可以实现图片的半透明效果。

如：img ｛

4.使用CSS的mix-blend-mode属性：如果图片的父级元素有其他的元素叠加在图片上面，可以使用mix-blend-mode属性来设置混合模式，实现图片与其他元素的半透明混合效果。

如：img ｛

这些方法可以单独使用，也可以结合使用，要根据具体的需求选择适合的方法来实现图片的半透明效果。 8zHrHn61cRa6TrLjzGOUp+x7xVtJVAeV8PgsCOpieJfFqzdNvMB37v80ts98MI3n