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" ?>
<page>
   <column1>
      <paragraph>This is a paragraph inside column one. Column one is designed to appear on the left hand side of the page.</paragraph>
      <paragraph>This is a paragraph inside column one. Column one is designed to appear on the left hand side of the page.</paragraph>
      <paragraph>This is a paragraph inside column one. Column one is designed to appear on the left hand side of the page.</paragraph>
   </column1>
   <column2>
      <paragraph>This is a paragraph inside column two. Column two is designed to appear on the right hand side of the page.</paragraph>
      <paragraph>This is a paragraph inside column two. Column two is designed to appear on the right hand side of the page.</paragraph>
      <paragraph>This is a paragraph inside column two. Column two is designed to appear on the right hand side of the page.</paragraph>
   </column2>
</page>

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

page {
  display:block;
  width:470px;
  height: 400px;
  padding:10px;
  border-style:solid; border-width:2px; border-color:#000000;}
column1 {
  position:absolute;
  left:10px; top:10px;
  width:200px;
  padding:10px;
  border-style:solid; border-width:2px; border-color:#CCCCCC;}
column2 {
  position:absolute;
  left:250px; top:10px;
  width:200px;
  padding:10px;
  border-style:solid; border-width:2px; border-color:#CCCCCC;}
paragraph {
  display:block;
  padding-bottom:10px;}

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

XML CSS样式表使用绝对定位创建元素的多栏文本

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