CSS+DIV-CSS与XML

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网页样式与布局 》