下载掌阅APP，畅读海量书库
立即打开
1.根据网页效果图，实现“标题”模块，训练要点包括CSS选择器选择和命名、div基础布局、图文混排和CSS控制文字样式设置，如图2-14所示。
图2-14 “标题”模块效果图
2.根据网页效果图，实现“三军风采”模块，训练要点包括CSS选择器选择和命名、div基础布局、图片排版设置，如图2-15所示。
图2-15 “三军风采”模块效果图
1 .“标题”模块网页HTML参考代码如下：
2 .“标题”模块的div的CSS样式选择器名为．banner，样式包括：
（1）宽度980px；
（2）水平方向居中。
3.标题文字“三军风采”的CSS样式包括：
（1）字号14px；
（2）行间距42px。
4.段落文字的CSS样式包括：
（1）行间距30px；
（2）文字居中；
（3）字号18px。
5.其CSS参考代码如下：
要记得在对应的div标记中引用CSS样式。
6 .“三军风采”模块网页HTML参考代码如下：
7 .“三军风采”模块div的CSS样式选择器名为．bestshow，样式包括：
（1）宽度980px；
（2）水平方向居中。
8.图片展示的CSS样式选择器名为．img1，样式为水平方向居中。
9.其CSS参考代码如下：
1.使用后代选择器，可以为网页的不同元素之间建立关系和层次结构，具有以下几个好处。
（1）灵活性和可维护性：使用后代选择器可以非常方便地选择特定元素内的子元素，而无须给每个元素都添加独立的类或ID。这样可以减少样式代码的冗余，并使样式表更加简洁和易于维护。
（2）代码重用：后代选择器可以在选择器中嵌套使用，从而利用父元素的选择器来影响子元素。这意味着可以重用已经定义的样式规则，避免重复编写样式代码。
（3）增加样式层级：后代选择器可以通过嵌套选择器来增加样式的层级。这样可以更容易地管理和调整不同元素之间的样式关系。
（4）语义化表达：使用后代选择器可以更好地表达元素之间的语义关系，提高代码的可读性和可理解性。总之，使用后代选择器可以提高代码的灵活性、可维护性和可读性，使样式表更加简洁、清晰和易于管理。
但需要注意的是，过度嵌套选择器可能会导致选择器的特殊性增加，从而影响样式的优先级，因此在使用后代选择器时应注意保持适度和合理性。
2.要使图片在div区域中居中，需要了解元素类型转换display属性：
display属性：通过display属性可以改变元素的显示方式。
常用的属性值包括：
block：将元素显示为块级元素，独占一行。
inline：将元素显示为内联元素，与其他元素在一行内显示。
inline-block：将元素显示为内联块级元素，既具有块级元素的特性，又能与其他元素在一行内显示。
none：隐藏元素，不进行显示。
例25：
在上面的示例中，我们定义了四个不同的类名，分别为＂ block＂、＂inline＂、＂inline -block＂和＂none＂，然后使用＂ display＂属性将元素的显示类型分别设置为块级元素（block）、行内元素（inline）、行内块级元素（inline-block）和隐藏（none）。通过这个示例可以看到，不同的＂ display＂属性值会改变元素在页面中的显示方式。
这样，通过设置不同的＂ display＂属性值，可以实现对HTML元素的类型转换，从而达到不同的布局效果和展示形式。