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>
   <heading>This is a Heading</heading>
   <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;
  padding:10px;
  border-style:solid; border-width:2px; border-color:#000000;}
heading {
  position:fixed;
  width:100%; padding:20px;
  top:0px; left:0px;
  color:#FFFFFF; background-color:#666666;  
  font-family:arial, verdana, sans-serif; font-size:22px;}
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