14-1.xml
<?xml version="1.0" encoding="gb2312"?>
<四大名著>
  <三国演义>
    <作者>罗贯中</作者>
    <人物>曹操</人物>
    <人物>诸葛亮</人物>
    <人物>刘备</人物>
    <人物>孙权</人物>
  </三国演义>
  <红楼梦>
    <作者>曹雪芹</作者>
    <人物>贾宝玉</人物>
    <人物>林黛玉</人物>
    <人物>王熙凤</人物>
    <人物>刘姥姥</人物>
  </红楼梦>
  <水浒传>
    <作者>施耐庵</作者>
    <人物>宋江</人物>
    <人物>林冲</人物>
    <人物>李逵</人物>
    <人物>武松</人物>
  </水浒传>
  <西游记>
    <作者>吴承恩</作者>
    <人物>唐僧</人物>
    <人物>孙悟空</人物>
    <人物>猪八戒</人物>
    <人物>沙和尚</人物>
  </西游记>
</四大名著>
14-2.html
<html>
<head>
<style type="text/css">
<!--
p{
  font-family:Arial;
  font-size:15px;
}
-->
</style>
<script language="javascript" event="onload" for="window">
  var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
  xmlDoc.async="false";
  xmlDoc.load("14-2.xml");  //调用数据
  var nodes = xmlDoc.documentElement.childNodes;    
  title.innerText = nodes.item(0).text;
  author.innerText = nodes.item(1).text;
  email.innerText = nodes.item(2).text;
  date.innerText = nodes.item(3).text;
</script>
<title>在HTML中调用XML数据</title>
     </head>
<body>
  <p><b>标题:</b> <span id="title"></span></p>
  <p><b>作者:</b> <span id="author"></span></p>
  <p><b>信箱:</b> <span id="email"></span></p>
  <p><b>日期:</b> <span id="date"></span></p>
</body>
</html>
14-2.xml
<?xml version="1.0" encoding="gb2312"?>
<book>
  <title>CSS</title>
  <author>isaac</author>
  <email>demo@demo.com</email>
  <date>20070624</date>
</book>
14-3.xml
<?xml version="1.0" encoding="gb2312"?>
<computor bit="32">
  <mainboard brand="ASUS" price="expensive" />
  <harddisk brand="IBM">240G</harddisk>
  <user name="isaac"></user>
  <!-- mainboard与user均为空标记 -->
</computor>
14-4.xml
<?xml version="1.0" encoding="gb2312"?>
<!DOCTYPE 长辈[
  <!ELEMENT 长辈 (父亲,母亲)>
  <!ELEMENT 父亲 (#PCDATA)>
  <!ELEMENT 母亲 (#PCDATA)>
  <!ATTLIST 母亲 年龄 CDATA #REQUIRED>
]>
<长辈>
  <父亲>zeng</父亲>
  <母亲 年龄="50">chen</母亲>
</长辈>
14-5.css
hello{
  font-size:30px;
  font-family:Arial;
  font-weight:bold;
  color:#0093ff;
}
14-5.xml
<?xml version="1.0" encoding="gb2312"?>
<?xml-stylesheet type="text/css" href="14-5.css"?>
<!DOCTYPE hello[
  <!ELEMENT hello (#PCDATA)>
]>
<hello>Hello World!</hello>
14-6.css
shadow{
  font-family:Arial;
  font-size:80px;
  font-weight:bold;
}
char1{
  position:absolute;  /* 绝对定位 */
  /*color:#003765;*/
  color:#FFFF00;
  top:10px;
  left:15px;
  z-index:2;      /* 高低关系 */
  border:2px solid #222222;
  padding:0px 10px 0px 10px;
}
char2{
  position:absolute;  /* 绝对定位 */
  top:15px;
  left:20px;
  /*color:#9A9A9A;*/
  color:#ff0000;
  z-index:1;      /* 高低关系 */
  padding:0px 10px 0px 10px;
  /*background-color:#d2eaff;*/
  background-color:#7c0000;
}
14-6.xml
<?xml version="1.0" encoding="gb2312"?>
<?xml-stylesheet type="text/css" href="14-6.css"?>
<shadow>
  <char1>XML文字阴影</char1>
  <char2>XML文字阴影</char2>
</shadow>
14-7.css
poem{
  margin:0px;
  background:url(poem.jpg) no-repeat;  /*添加背景图片 */
  width:360px;
  height:490px;
  position:absolute;  /* 绝对定位 */
  left:0px; top:0px;
}
title{
  font-size:19px;
  color:#FFFF00;
  position:absolute;
  left:62px;
  top:150px;
}
author{
  font-size:12px;
  color:#4f2b00;
  position:absolute;
  left:100px;
  top:176px;
}
verse{
  position:absolute;  /* 绝对定位 */
  color:#FFFFFF;
  font-size:14px;
  left:55px;
  top:200px;
  line-height:20px;  /* 行间距 */
}
br{
  display:block;    /* 让诗句分行显示 */
}
14-7.xml
<?xml version="1.0" encoding="gb2312"?>
<?xml-stylesheet type="text/css" href="14-7.css"?>
<poem>
  <title>静夜思</title>
  <author>唐 李白</author>
  <verse>
  床前明月光<br/>
  疑是地上霜<br/>
  举头望明月<br/>
  低头思故乡</verse>
</poem>
14-8.css
list{
  font-family:Arial;
  font-size:14px;
  position:absolute;      /* 绝对定位 */
  top:0px; left:0px;
  padding:4px;        /* 适当的调整位置 */
}
caption{
  margin-bottom:3px;
  font-weight:bold;
  font-size:1.4em;
  display:block;        /* 块元素 */
}
title{
  background-color:#4bacff;
  display:block;        /* 块元素 */
  border:1px solid #0058a3;  /* 边框 */
  margin-bottom:-1px;      /* 解决边框重叠的问题 */
  padding:4px 0px 4px 0px;
}
title name, title class, title birth, title constell, title mobile{  
  color:#FFFFFF;        /* 行名称颜色 */
  font-weight:bold;
  padding:0px 8px 0px 8px;
}
student{
  display:block;        /* 块元素 */
  background-color:#eaf5ff;  /* 背景色 */
  border:1px solid #0058a3;  /* 边框 */
  margin-bottom:-1px;      /* 解决边框重叠的问题 */
  padding:4px 0px 4px 0px;  /* firefox不支持行内元素的padding */
                /* 只支持block元素的padding */
                /* 为了尽量统一两个浏览器 */
                /* 因此padding-top和bottom放到这里设置 */
}
student.altrow{
  background-color:#c7e5ff;  /* 隔行变色 */
}
name, class, birth, constell, mobile{
  padding:0px 8px 0px 8px;
}
name{              /* firefox不支持行内元素的width属性 */
  width:105px;
}
class{
  width:60px;
}
birth{
  width:80px;
}
constell{
  width:110px;
}
mobile{
  width:100px;
}
14-8.xml
<?xml version="1.0" encoding="gb2312"?>
<?xml-stylesheet type="text/css" href="14-8.css"?>
<list>
  <caption>Member List</caption>
  <title>
    <name>Name</name>
    <class>Class</class>
    <birth>Birthday</birth>
    <constell>Constellation</constell>
    <mobile>Mobile</mobile>
  </title>
  <student>
    <name>isaac</name>
    <class>W13</class>
    <birth>Jun 24th</birth>
    <constell>Cancer</constell>
    <mobile>1118159</mobile>
  </student>
  <student class="altrow">
    <name>girlwing</name>
    <class>W210</class>
    <birth>Sep 16th</birth>
    <constell>Virgo</constell>
    <mobile>1307994</mobile>
  </student>
  <student>
    <name>tastestory</name>
    <class>W15</class>
    <birth>Nov 29th</birth>
    <constell>Sagittarius</constell>
    <mobile>1095245</mobile>
  </student>
  <student class="altrow">
    <name>lovehate</name>
    <class>W47</class>
    <birth>Sep 5th</birth>
    <constell>Virgo</constell>
    <mobile>6098017</mobile>
  </student>
  <student>
    <name>slepox</name>
    <class>W19</class>
    <birth>Nov 18th</birth>
    <constell>Scorpio</constell>
    <mobile>0658635</mobile>
  </student>
  <student class="altrow">
    <name>smartlau</name>
    <class>W19</class>
    <birth>Dec 30th</birth>
    <constell>Capricorn</constell>
    <mobile>0006621</mobile>
  </student>
  <student>
    <name>whaler</name>
    <class>W19</class>
    <birth>Jan 18th</birth>
    <constell>Capricorn</constell>
    <mobile>1851918</mobile>
  </student>
  <student class="altrow">
    <name>shenhuanyan</name>
    <class>W25</class>
    <birth>Jan 31th</birth>
    <constell>Aquarius</constell>
    <mobile>0621827</mobile>
  </student>
  <student>
    <name>tuonene</name>
    <class>W210</class>
    <birth>Nov 26th</birth>
    <constell>Sagittarius</constell>
    <mobile>0091704</mobile>
  </student>
  <student class="altrow">
    <name>ArthurRivers</name>
    <class>W91</class>
    <birth>Feb 26th</birth>
    <constell>Pisces</constell>
    <mobile>0468357</mobile>
  </student>
  <student>
    <name>reconzansp</name>
    <class>W09</class>
    <birth>Oct 13th</birth>
    <constell>Libra</constell>
    <mobile>3643041</mobile>
  </student>
  <student class="altrow">
    <name>linear</name>
    <class>W86</class>
    <birth>Aug 18th</birth>
    <constell>Leo</constell>
    <mobile>6398341</mobile>
  </student>
  <student>
    <name>laopiao</name>
    <class>W41</class>
    <birth>May 17th</birth>
    <constell>Taurus</constell>
    <mobile>1254004</mobile>
  </student>
  <student class="altrow">
    <name>dovecho</name>
    <class>W19</class>
    <birth>Dec 9th</birth>
    <constell>Sagittarius</constell>
    <mobile>1892013</mobile>
  </student>
  <student>
    <name>shanghen</name>
    <class>W42</class>
    <birth>May 24th</birth>
    <constell>Gemini</constell>
    <mobile>1544254</mobile>
  </student>
  <student class="altrow">
    <name>venessawj</name>
    <class>W45</class>
    <birth>Apr 1st</birth>
    <constell>Aries</constell>
    <mobile>1523753</mobile>
  </student>
  <student>
    <name>lightyear</name>
    <class>W311</class>
    <birth>Mar 23th</birth>
    <constell>Aries</constell>
    <mobile>1002908</mobile>
  </student>
</list>

来源：《精通CSS+DIV网页样式与布局》