www.baike369.com
百科369 > XML教程 > XML使用CSS样式表设置元素的浮动定位时遇到的重叠现象

XML使用CSS样式表设置元素的浮动定位时遇到的重叠现象


XML使用CSS样式表设置元素的浮动定位时遇到的重叠现象

1. XML文档name.xml的源代码如下:

<?xml version="1.0" encoding="UTF-8" ?>
<?xml-stylesheet type="text/css" href="name.css" ?>
<review>
   <title>The Wrox Review</title>
   <pullQuote>If you want to learn XML, this is the book. You can get it from all good book shops or online at one of the major eTailers.</pullQuote>
   <paragraph1>Extensible Markup Languages is a rapidly maturing technology
     with powerful real-world applications, particularly for the management,
     display, and transport of data. Together with its many related
     technologies, it has become the standard for data and document delivery
     on the web. <reference>Beginning XML</reference> is for any developer
     who is interested in learning to use <keyword>XML</keyword> in web,
     e-commerce, or data storage applications. Some knowledge of mark up,
     scripting, and/or object oriented programming languages is
     advantageous, but not essential, as the basis of these techniques is
     explained as required.</paragraph1>
   <paragraph2>Extensible Markup Lnaguages is a rapidly maturing technology
     with powerful real-world applications, particularly for the management,
     display, and transport of data. Together with its many related
     technologies, it has become the standard for data and document delivery
     on the web. <reference>Beginning XML</reference> is for any developer
     who is interested in learning to use <keyword>XML</keyword> in web,
     e-commerce, or data storage applications. Some knowledge of mark up,
     scripting, and/or object oriented programming languages is
     advantageous, but not essential, as the basis of these techniques is
     explained as required.</paragraph2>
</review>

2. CSS样式表文件name.css的源代码如下:

review {
   display:block;
   padding:10px;
   margin:10px;
   border-style:solid; border-width:4px; border-color:#000000;}
title {
   display:block;
   font-size:24px;
   padding:5px;
   color:#FFFFFF; background-color:#000000;}
pullQuote {
   float:left;
   width:20%;
   font-style:italic;
   padding:10px; margin:10px;
   border:solid; border-width:4px; border-color:#CCCCCC;}
paragraph1, paragraph2 {
   display:block;
   padding:10px;
   border:solid; border-width:4px; border-color:#CCCCCC;}
keyword {
   display:inline;
   font-weight:bold;
   color:#990000;
   border:solid; border-width:2px; border-color:#CCCCCC;}

3. 在浏览器中显示name.xml文档的效果。如下图所示:

XML使用CSS样式表设置元素的浮动定位时遇到的重叠现象

Copyright© 2011-2016 www.baike369.com All Rights Reserved