www.baike369.com
百科369 > XML教程 > XML CSS样式表使用:before属性建立项目符号列表

XML CSS样式表使用:before属性建立项目符号列表


XML CSS样式表使用:before属性建立项目符号列表

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

<?xml version="1.0" encoding="UTF-8" ?>
<?xml-stylesheet type="text/css" href="name.css" ?> 
<page>
  <paragraph>The effect of a bulleted list is created using CSS.</paragraph>
  <list>
    <bulletPoint>Item one</bulletPoint>
    <bulletPoint>Item two</bulletPoint>
    <bulletPoint>Item three</bulletPoint>
     <list>
       <bulletPoint>Item three point one</bulletPoint>
       <bulletPoint>Item three point two</bulletPoint>
    </list>
    <bulletPoint>Item four</bulletPoint>
  </list>
</page>

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

page {
  display:block;
  padding:10px;
  color:#000000; background-color:#FFFFFF;
  border-style:solid; border-width:2px; border-color:#000000;}
paragraph {
  display:block;
  font-family:arial, verdana, sans-serif; font-size:20px;
  padding:20px;
  color:#000000; background-color:#FFFFFF;}
list {
  display:block;
  padding-left:20px;}
bulletPoint {display:block;}
bulletPoint:before {content:"+ ";}

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

XML CSS样式表使用:before属性建立项目符号列表


提示

这种方法在IE浏览器中不起作用,因为它们并不支持自动生成内容。要在IE中生成项目列表,要使用display:list属性。

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