【项目目标】
• 灵活运用弹性容器进行页面布局。
【项目内容】
- 利用flex 标签完成杜甫页面的弹性布局。
- 练习CSS 常用属性的使用。
【项目步骤】
本部分素材文件是项目六的结果文件，目的是利用 flex 布局完成杜甫个人成就页面的弹
性布局。
1.添加图片
Html部分中存在4个空的类名为"textBox"的div，在它们内部添加 img 标签。从上到下依次添加"images"文件夹中的“textBoxlmgl.jpg"textBoxlmg2.jpg"textBoxlmg3jpg”和
"textBoxlmg4.jpg".
2. guidance 部分
（1） ＜guidance>中的div 部分：添加新内容，外边距设置为 30px 属性值为 “auto”；
（2） nav2 中的ul部分：
1.display 设置为 “flex"；
2.宽度设置为450px；
3。外边距属性值为 “auto”；
4.1.justify-content 设置为：space-between；
背景颜色设置为：#c7d2d4
（3） nav2 中的ul li 部分：
- 宽度设置为：150px；
- 2高度设置为：50px；
- 3行高设置为：50px；
- list-style-position 设置为：inside
（4） nav2 中的ul li 部分在鼠标指针放上后：
1.背景颜色设置为：#134857；
2.前景色颜色
以上部分完成后，效果如项目图10-1所示：
项目图10-1guidance部分效果图
3. main 部分的初步设置
（1） maln 部分的编写：
1.display 设置为：flex；
2.flex-direction 设置为：column；
3.justify-content 设置为：space-around；
（2） 对section 中的h2进行进一步编写：
1.宽度设置为：110px；高度设置为：110px；
2.外边距设置为0属性值为 “auto”
3.背景图片设置內 “images” 文件夹中的 “h2BG.png”图片设置为不重复
4.background-size 设置为“110px”
5.文字对齐方式设置为：居中对齐、行高设置为：100px；
（3） 同时对类为 “text”与类为 “textBox”的样式进行设置：
1.display 设置为：flex；
2.flex-direction 设置为：row；
3.flex-wrap 设置为：wrap；
4.justify-content 设置为：space-between；
（4） 对类为 “textBox” 样式进行设置：
- 边框样式设置为：10px solid；
- 边框背景设置为："images” 文件夹中的“10-border.png” 文件
- 边框向内偏移设置为：10%10%10%10%；
- 外边距设置为：10px0；
（5） 对类为 “textBox” 样式中的 “p”标签进行进一步设置：align-self设置为"center"以上部分完成后，效果如项目图10-2所示：
项目图10-2main初步设置效果图
4.main部分的弹性设置
将此处设计为弹性布局。
- section:nth-of-type（1）.text.textBox:nth-of-type（1）的宽度设置为：60%。
- section:nth-of-type（1）.text.textBox:nth-of-type（2）的宽度设置为：35%
- section:nth-of-type（1）.text.textBox:nth-of-type（3） img 的宽度没置：360px
- section:nth-of-type(1) text .textBox:nth-of-type(4) 的宽度设置为: 65%.
- section:nth-of-type(2) text .textBox:nth-of-type(1) 的宽度设置为: 35%.
- section:nth-of-type(2) text .textBox:nth-of-type(2) 的宽度设置为: 35%.
- section:nth-of-type(2) text textBoxinth-of-type(3) img 的宽度设置为: 250px.
- section:nth-of-type(3) .text .textBox:nth-of-type(1) 的宽度设置为: 60%
- section:nth-of-type(3) text .textBoxinth-of-type(2) img 的宽度设置为: 420px.
- section:nth-of-type（3）.text.textBox:nth-of-type（3） img 的宽度设置为：420px
- section:nth-of-type（3）.text .textBox:nth-of-type（4）的宽度设置为：60%。
以上部分完成后，效果如项目图10-3所示：
项目图10-3页面整体效果图
未修改的网页源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>杜甫-个人成就</title>
<link rel="stylesheet" href="./css/main.css">
<link rel="stylesheet" href="./css/dufu-achievement.css">
</head>
<style>
body{
background-image: url(./images/boat.png);
background-position: 95% 95%;
background-repeat: no-repeat;
}
#top{
width: 100%;
height: 50px;