第6章 浮动与定位_补充案例.docVIP

博学谷——让IT教学更简单，让IT学习更有效 第6章 补充案例 【案例6-1】 图文混排 一、案例描述 考核知识点 元素的浮动属性float 练习目标 了解float属性的用法。 能够运用float属性实现文本和图像的排列。 需求分析 在网页中存在各种各样的布局，例如文字环绕图像效果、图像在文字右侧显示等。要想实现这些效果就需要将图像进行浮动。本案例通过设置图像浮动和文本样式实现一个图文混排的效果。 案例分析 效果如图6-1所示。 图文混排 具体实现步骤如下所示： 在Dreamweaver中定义一个列表结构。 在列表项中添加文本和图像。 给文字设置左浮动，图像设置右浮动。 二、案例实现 1、制作页面结构 新建HTML页面，具体代码如下： !doctype html html head meta charset=utf-8 title应用浮动实现图文混排效果/title /head body dl dt a href=#img src=images/content.jpg width=110 height=137 //a /dt dd h3a href=#传智播客UI设计学院/a/h3 p”UI设计师(简称UID)“已经成为全球性知名IT企业招聘最热门的岗位，正逐渐成为大学毕业生所追捧的热门职业方向。传智播客UI设计学院花一份钱同时学习四门技术，针对平面设计、网页设计、UI设计、Web前端培训一步到位，让你从小白变大神，高薪就业！/p /dd /dl /body /html 2、定义CSS样式 使用内嵌式CSS样式表为页面添加样式，具体CSS代码如下： body, div, ul, li, ol, dl, dt, p, dd, img, input, a, span, h1, h2, h3, h4 { padding: 0; margin: 0; border: 0; list-style: none; } a { color: orange; text-decoration: none; } a:hover { text-decoration: underline; } body { background: #ccc; font-size: 12px; color: #3e3e3e; } dl { width: 530px; height: 210px; border:5px solid #F9C; border-radius:10px; background: #fff; margin: 50px auto; overflow: hidden; } dl dt { float: right; } dl dd { width: 180px; float: left; margin-left: 10px; margin-top: 10px; } dd p { margin-top: 10px; line-height: 20px; } 保存后，在谷歌浏览器中预览，效果如图6-2所示。 图文混排 注意： 在给元素设置浮动后必须为其清除浮动，后面的案例将会进行讲解。 【案例6-2】 浮动与清除浮动 一、案例描述 考核知识点 after伪对象清除浮动 练习目标 理解浮动属性float的用法。 掌握用after伪对象清除浮动的方法。 需求分析 当在HTML中应用浮动时，为了避免浮动元素影响其他元素的排版还需要为浮动元素清除浮动。清除浮动有多种方法，下面，本案例将运用after伪对象的方式进行具体演示。 案例分析 效果如图6-3所示。 清除浮动前 具体实现步骤如下所示： 在Dreamweaver默认文档中定义一个父级div。 在父级div中定义两个子级div，给第一个小div设置背景颜色和左浮动样式，给第二个小div设置背景颜色和右浮动样式。 接下来在页面中定义底部，设置宽高和背景等属性。 给父级div添加清除浮动属性，观察页面效果和清楚浮动前有什么区别。 二、案例实现 1、制作页面结构 新建HTML页面，具体代码如下： !doctype html html head meta charset=utf-8 title浮动与清浮动/title /head body div class=main clearfix div class=left/div div class=right/div /div div class=footer/div /body /html 2、定义CSS样式 使用内嵌式CSS样式表为页面添加样式，具体CSS代码如下： body, div, ul, li, ol, h1, h2, h3, h4, h5,