三、【技能锤炼】
【案例5-1】 百度歌曲排行榜
一、案例描述
1、考核知识点
盒子的宽与高
边框属性
设置背景图像
2、练习目标
Ø 掌握盒子的宽与高的设置方法
Ø 掌握边框属性的设置
Ø 掌握背景图像的设置
Ø 理解list-style-position属性
Ø 复习有序列表的应用方法
3、需求分析
盒子模型和背景图像的设置是制作页面的基础，为了便于初学者的理解和掌握，接下来，通过制作一个百度音乐排行榜的案例做具体演示。
4、案例分析
1) 效果如图5-1所示。
图5-1 百度音乐排行榜
2) 具体实现步骤如下：
a) 定义有序列表<ol>。
b) 设置有序列表的宽高和内部嵌套的<li>标记的宽高等样式。
c) 设置背景颜色及图片样式。
二、案例实现
1、制作页面结构
新建HTML页面，代码如下：
2、定义CSS样式
使用内嵌式CSS样式表为页面添加样式，具体CSS代码如下：
1
保存后，在谷歌浏览器中预览，效果如图5-2所示。
图5-2 百度音乐排行榜
注意：
1、 背景样式可以通过背景复合属性设置，不必单独设置。
【案例5-2】背景对联效果-恭贺新禧
一、案例描述
1、考核知识点
背景的复合属性
2、练习目标
Ø 熟悉盒子的嵌套使用。
Ø 掌握调整背景图像位置的方法。
Ø 锻炼同学们的发散思维。
3、需求分析
一个页面，左右两边为对联的上联和下联图像，顶部为对联的横批图像，中间为一张“福”字图像。这样就需要定义四个不同的背景图像。
4、案例分析
1) 效果如图5-3所示。
图5-1 恭贺新禧对联效果
2) 具体实现步骤如下：
a) 需要定义4个盒子，它们层层嵌套。
b) 新建一个大盒子，背景为上联图像，不平铺，居左对齐。
c) 在大盒子里嵌套一个同样大小的盒子（第二个盒子），背景为下联图像，居右对齐，不 平铺。
d) 在第二个盒子里嵌套一个同样大小的盒子（第三个盒子），背景图像为横批，水平居中 垂直居上对齐，不平铺。
e) 在第三个盒子里嵌套一个同样大小的盒子（第四个盒子），背景为“福”字图像，居中显示。
二、案例实现
1、制作页面结构
新建HTML页面，代码如下：
2、定义CSS样式
使用内嵌式CSS样式表为页面添加样式，具体CSS代码如下：
保存后，在谷歌浏览器中预览，效果如图5-4所示。
图5-2 恭贺新禧效果
【案例5-3】 水调歌头
一、案例描述
1、考核知识点
Ø <div>标记
Ø盒子的宽与高
Ø边框属性
Ø box-sizing属性
Ø 背景属性
2、练习目标
Ø 掌握盒子宽与高的使用方法。
Ø 掌握边框的设置方法。
Ø 掌握背景属性的使用方法。
3、需求分析
古代诗歌往往寄托深刻的感情色彩，为诗歌添加相合意境的背景图片，更能使读者融入诗歌的情感当中。接下来，通过为《水调歌头》这首词添加背景图片，来进一步学习背景的设置。
4、案例分析
1) 效果如图5-3所示。
图5-3 水调歌头效果展示
2) 具体实现步骤如下：
a) 在页面主体<body>中添加<div>标记。
b) 指定盒子的宽度和高度。
c) 为盒子设置背景边框样式。
d) 通过<h2>标记定义标题，<p>标记定义诗歌内容，<cite>标记定义作者名。
e) 定义文字样式。
二、案例实现
1、制作页面结构
新建HTML页面，代码如下：
2、定义CSS样式
使用内嵌式CSS样式表为页面添加样式，具体CSS代码如下：
保存后，在谷歌浏览器中预览，效果如图5-6所示。
图5-4 水调歌头效果展示
注意：
1、opacity属性能够使任何元素呈现出透明效果。
