项目九 李白个人生平（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部分设置效果

设置效果

5. “故事””，ID为 “story “部分：

（1）竖直方向对齐：居上。

（2） 利用组合选择器，#content”中的段落 p>和#story 中的段落<p>：

1. 字体大小设置为：14px；
2. 首行文本的缩进设置为：2em；
3. 外边距设置为：10px 0；
4. 颜色设置为“#333333"；

（3） #story 部分的<div>：

1. 内边距设置为：20px；
2. 外边距设置为：上13px，右Opx，下13px，左13px；

（4） #story 部分的<em>：前景色设置为 “#BCBCBC”。

（5） #story 部分的<img>：

1. 宽度设置为：100px；
2. 高度设置为：100px；
3. 外边距设置为：10px；

（6） #story3”部分的 “ul li：

①列表项目标记放置在文本以内，且环绕文本根据标记对齐；

list-style-position: inside;

②字体大小设置为：14px；

#story部分设置完成后，如项目图9-8所示。

          项目图9-8#story设置完成效果图                                  项目图9-9“背景音乐”设计

6. "背景音乐 “部分

（1） body 的直接子代 aside （body>aside）：

1. 将定位设置为 "fixed”；
2. top设置为：200px；
3. lett 设置为：0；
4. 左边距设置为：-305px；
5. 鼠标放上后，将左边距设置为：0；当鼠标放在滚动字幕“背景音乐“上时，控制面板弹出，方便播放页面背景音乐。

（2） body 的直接子代aside 的<marquee>标签

1. 将定位设置为相对定位；
2. 字体大小设置为：18px；
3. 宽度设置为18px；
4. 背景颜色设置为“#0F1A52”；
5. display 设置为 inline-block；
6. 光标呈现为指示链接的指针（一只手）；
7. 阴影设置为：0 0 3px 颜色为"black"；
8. 颜色设置为"#f8e0b0"；