项目九李白个人生平（2）（资源）

 【项目目标】

• 灵活运用 float+position 进行页面布局。
• 掌握常用的页面布局。

【项目内容】

• 熟悉各种页面布局的方法。
• 练习CSS 常用属性的使用。

【项目步骤】

本项目主要完成李白个人生平页面的布局。该页面的 html 部分已经在项目五中完成，

因此项目五的结果文件就是本项目的素材。

用 sublime 编辑器打开素材文件夹中的 libai-experience.html 页面，使用<link>标记引入css 文件夹中的“main.css”与"libai-experience.css”两个css文件。打开样式文件

"libai-experience.css”，并按照下列要求编写样式规则。

1. 整体布局

分析项目五的网页结构，将项目图9-1进行左右布局

项目图9-1“李白个人生平”页面HTML结构图 

 项目图9-2“李白个人生平”网页布局

（1）＜main>部分：内边距1px；边框粗细是2px，直线，颜色#e0d4af；注意：在前面
的项目中，在main.css文件已经将其宽度设置为1200px。
（2）＜header>部分设置宽度为1200px，其他设置遵循main.css中的样式。 

（3）id为content部分：宽度750px；边框粗细是1px，直线，颜色#e0d4af；左浮动。
（4）id为story部分：宽度350px；边框粗细是1px，直线，颜色#e0d4af；左浮动。
（5）story中的div部分：边框粗细是1px，直线，颜色#eOd4af。
理想的效果如项目图9-3所示，但现实中的效果如项目图9-4所示。 

             项目图9-3整体布局理想效果项目                                    项目图9-4整体布局现实效果 

      将项目图9-4进行局部放大，如项目图9-5所示。分析其原因，由于<main>部分的两 个子元素#content和#story均被设置为浮动，会脱离文档流，造成main中没有任何内容用 以撑起高度，footer部分就跟着排在了只剩下一条线的main下面，这就是布局塌陷。在本章介绍了几种解决的方法，在本项目中使用新增空div的方式。 

项目图9-5“布局塌陷” 

（6）在libai-experience.html文件的</main>行之上，添加<divstyle="clear:both”>，清
除浮动后，就可以得到项目图9-3的效果图了。
下面就进行各个部分细节样式的设计。
2.＜main>部分
<main>的<img>图片：设置为左浮动，完成后如项目图9-6所示。 

项目图9-6<main>部分的图片浮动效果 

3.左侧内容，ID为 “content” 部分（1）外边距：12px；内边距：30px。

（2）边框阴影：003px#7c7151。

（3） 行高设置为：23px。

（4） #content 中 h1>部分：

1. 字体大小设置为：32px；
2. 高度设置为50px；
3. 字体样式设置为：normal；

（6）#content 中的<img>，但不包括#daodu 部分的<img>：

1. 宽度设置为：300px；
2. 外边距设置为：5px；

4.“导读〞，ID为 “daodu" 部分：

（1）高度：100px。

（2）上下边框：宽度1px，边框线的类型：实线，颜色：“#aaa”。

（3） #daodu 中的 “pre" 部分：

1. 行高：30px；
2. 字体设置为：“inherit”；
3. 自动换行设置为“break-word”；
4. 颜色设置为“#7C6854"；
5. 让html 浏览器显示空白空格符；
6. 外边距设置为：20px40px20px140px；

（4）#daodu中的<img>：高度设置为100px。完成后如项目图9-7所示。

项目图9-7<content>及#daodu部分设置效果

设置效果