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.</pullQuote>
   <paragraph>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.</paragraph>
</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;}
paragraph {
   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