第5章 CSS盒子模型_补充案例.docxVIP

博学谷——让IT教学更简单，让IT学习更有效 PAGE 2 第5章 补充案例 【案例5-1】 百度歌曲排行榜 一、案例描述 考核知识点 盒子的宽与高 边框属性 设置背景图像 练习目标 掌握盒子的宽与高的设置方法 掌握边框属性的设置 掌握背景图像的设置 理解list-style-position属性 复习有序列表的应用方法 需求分析 盒子模型和背景图像的设置是制作页面的基础，为了便于初学者的理解和掌握，接下来，通过制作一个百度音乐排行榜的案例做具体演示。 案例分析 效果如图5-1所示。 百度音乐排行榜 具体实现步骤如下： 定义有序列表ol。 设置有序列表的宽高和内部嵌套的li标记的宽高等样式。 设置背景颜色及图片样式。 二、案例实现 1、制作页面结构 新建HTML页面，代码如下： !doctype html html head meta charset=UTF-8 title百度歌曲排行榜/title /head body ol li小苹果span筷子兄弟/span/li li class=one后会有期span佚名/span/li li因为爱情span佚名/span/li li class=one会不会span佚名/span/li li古柏span佚名/span/li /ol /body /html 2、定义CSS样式 使用内嵌式CSS样式表为页面添加样式，具体CSS代码如下： style type=text/css *{ margin:0px; padding:0px;} ol{ width:300px; height:200px; margin:20px auto; border:#f1f1f1 1px solid; } li{ width:290px; height:30px; color:#519B9F; padding:10px 0 0 10px; list-style-position:inside; background:url(images/up.jpg) no-repeat 170px 14px; } .one{background:#F3F3F3 url(images/down.jpg) no-repeat 170px 14px;} /style 保存后，在谷歌浏览器中预览，效果如图5-2所示。 百度音乐排行榜 注意： 1、背景样式可以通过背景复合属性设置，不必单独设置。 【案例5-2】背景对联效果-恭贺新禧 一、案例描述 考核知识点 背景的复合属性 练习目标 熟悉盒子的嵌套使用。 掌握调整背景图像位置的方法。 锻炼同学们的发散思维。 需求分析 一个页面，左右两边为对联的上联和下联图像，顶部为对联的横批图像，中间为一张“福”字图像。这样就需要定义四个不同的背景图像。 案例分析 效果如图5-3所示。 恭贺新禧对联效果 具体实现步骤如下： 需要定义4个盒子，它们层层嵌套。 新建一个大盒子，背景为上联图像，不平铺，居左对齐。 在大盒子里嵌套一个同样大小的盒子（第二个盒子），背景为下联图像，居右对齐，不 平铺。 在第二个盒子里嵌套一个同样大小的盒子（第三个盒子），背景图像为横批，水平居中 垂直居上对齐，不平铺。 在第三个盒子里嵌套一个同样大小的盒子（第四个盒子），背景为“福”字图像，居中显示。 二、案例实现 1、制作页面结构 新建HTML页面，代码如下： !doctype html html head meta charset=UTF-8 title背景对联效果-恭贺新禧/title /head body div class=box-big div class=box-two div class=box-three div class=box-four /div /div /div /div /body /html 2、定义CSS样式 使用内嵌式CSS样式表为页面添加样式，具体CSS代码如下： style type=text/css .box-big{ height:927px; background:url(images/left.jpg) top left no-repeat; } .box-two{ height:927px; background:url(images/right.jpg) top right no-repeat; } .box-three{ height:927px; background:url(images/top.jpg) top center no-repeat; }