XML应用开发（软件品牌）-1期 使用CSS布局属性显示XML文档-环绕文本和插入图 4.11 案例分析-使用CSS布局属性显示XML文档-环绕文本和插入图片.doc

《XML应用开发》教学案例 软件学院 第 PAGE 2 页 = numpages 4 2 2 页 《单元四 使用CSS显示XML文档》教学案例 ——4.11 使用CSS布局属性显示XML文档-环绕文本和插入图片 知识点 文本环绕、插入图片。 技能点 能正确使用CSS布局属性显示XML文档。 知识介绍 1、环绕文本 CSS中，一个元素的文本可以环绕另一个元素的文本，就像HTML中的文本能够环绕图片一样。文本环绕方式使用float属性。 2、插入图片 使用“background:url(图片文件路径)”插入图片。 【文件】:book.xml ?xml version=1.0 encoding=gb2312? ?xml-stylesheet type=text/css href=bookFramework.css? Book Title软件工程（第二版）/Title Author邓良松 刘海岩 陆丽娜/Author PubInfo Publisher西安电子科技大学出版社/Publisher PubDate2004-9-1/PubDate ISBN7-5606-0924-4/ISBN Price Unit￥/Unit Amount22.00/Amount /Price /PubInfo Picture ID=image1/ Abstract本书比较系统全面地介绍了软件工程的瀑布模型、增量模型、结构化方法、Jackson方法、面向对象开发方法。全书共16章。概述了软件工程、各种生存周期模型和开发方法/Abstract /Book 案例1：使用float属性进行文本环绕设置。 【案例分析】： 让价格标记独立成块状显示，设置颜色“#2f4f4f”，字体显示为粗体字，使用“float:right;”使得价格浮动在“Abstract”元素数据的右侧。 【代码实现】： Price{ display:block; color:#2f4f4f; font-weight:bold; float:right; } 案例2：使用background属性插入图片。 【案例分析】： 标签Picture ID=image1/在Book.xml文档中位于PubInfo和Abstract标签之间，使用“display:block;”使得Picture元素单独成块显示，使用“background:url(cover1.jpg);”引入外部图片文件，使用“float:left;”将图片显示在“摘要”的右侧。查看图片的像素为79*110，设置图片的宽度为79px，图片的高度为110px。 【代码实现】： #image1{ display:block; background:url(cover1.jpg); float:left; width:79px; height:110px; }