项目十一 首页（资源）

 【项目目标】

• 熟练掌握盒模型与相关属性。

• 灵活应用浮动与定位。

• 灵活应用各类网页布局。

• 了解并掌握部分 CSS3的新增属性。

【项目内容】

• 练习CSS的复杂样式。
• 学习利用盒模型进行浮动与定位等实现网页布局。
• 练习并掌握 CSS3的过渡、转换、动画等属性。

        本项目已提供首页 index.html 素材，需要在 index.css 中完成CSS 的布局和动画特效设置。在 index.html 文件中添加 CSS文件夹中的 index.css 与 main.css 两个 CSS文件。打开index.css 文件，完成以下步骤。

1. index.html 网页结构分析

        如项目图11-1所示，整个页面分为首部 header、花树 flower、主体 main和尾部footer。

其中 main 部分由 content 和 poets组成，content由文字段fommer和latter组成。

 项目图11-1页面结构图

        其中主导航和页尾等部分均已被main.css修饰，根据此结构分析，要做出项目图11-2
所示的最终页面效果。

项目图11-2效果图

2. main 主体部分

此部分的设置主要由 main.css 完成，这里只需设置其上边距为 60px。

3. content部分

（1） id 为 “content”部分。

1. position 设置为相对定位。
2. 宽度设置为“1100px”
3. 高度设置为“450px。
4. 外边距设置为“0”，属性值设置为 “auto”。
5. 背景设置为“images” 文件夹中的“mask.png” 图片。
6. 背景尺寸设置为：1100px 450px

（2） 对 id= “content”部分中的 “pre” 进行进一步编写：

1. 颜色设置为 "#fbeee2"。
2. 字体设置为 "inherit"

完成后部分效果如项目图11-3所示

项目图11-3 content局部效果展示1

“content” 部分主要包括了“fommer”和 “latter”两个文字段。

（3） id= “fommer”部分。

1. position 设置为相对定位。
2. 设置左外边距为“-30px”。
3. top设置为“10px”。
4. 使用百分比设置行高为“20px”。
5. 设置字体大小为“14px”。

（4） id= “latter”部分。

1. position 设置为相对定位。
2. top 设置为“25%”。
3. 设置左外边距为“-20px”。

（5） id= “latter” 部分中的 “h3” 标签：

将其 display属性设置为："inline"。完成后部分效果如项目图11-4所示：

项目图11-4content局部效果展示2

（6） 定义关键帧动画：“showContentImg"，将其透明度设置为从 “0”到“1”。

（7） ia= “latter” 部分中的“h3” 标签。id= “content” 部分中的 “img” 标签。

1. position 设置为绝对定位。
2. 堆叠顺序设置为“-1”。
3. right设置为“100px"。
4. bottom 设置为“0”。
5. 宽度设置为“500px”。
6. animation执行动画“showContentl

完成后部分效果如项目图11-5所示：

项目图11-5content整体效果展示

4. poets 部分

（1） id= “poets” 部分。

1. position 设置为相对定位。
2. 高度设置为“300px"。
3. 宽度设置为“1100px”。
4. 外边距设置为 “10px auto 0 auto”。
5. display设置为"flex"。
6. justify-content设置为 “space-around”。
7. align-items 设置为 “center”。

（2） class= “poet” 部分。

1. position 设置为相对定位。
2. 宽度设置为“250px。
3. 高度设置为“200px”。
4. 阴影设置为“00 2px black”。
5. overflow 设置为 “hidden"。

（3） class= “poet” 部分中的 “img” 标签。

1. position 设置为绝对定位。
2. 宽度设置为“250px”。
3. 高度设置为 “200px”。
4. transition 设置为 “all 1s”。

完成后部分效果如项目图11-6所示：

项目图11-6   poets阶段效果展示1

（4） class= “poem” 部分。

1. position 设置为绝对定位。
2. writing-mode设置为：垂直方向内容从上到下，水平方向从左到右。
   writing-mode: vertical-Ir;
3. 字体大小设置为“20px”。
4. 文本颜色设置为 “white”。
5. 滤镜（flter）设置为：给图像设置一个 drop-shadow 阴影效果，数值为 "00 2px pink"。
6. right设置为 “60px”。
7. top 设置为“30px”。
8. 透明度设置为“0”。
9. transition 设置为 “all 1s”。

（5） 同时对 class=poet 部分的 hover 与 class=intro 部分（.poet:hover.intro）设置。

①transform 设置为：定