CSS+DIV-CSS与XML

14-1.xml

xml version ="1.0" encoding ="gb2312" ?>
< 四大名著 >
   < 三国演义 >
     < 作者 >罗贯中 作者 >
     < 人物 >曹操 人物 >
     < 人物 >诸葛亮 人物 >
     < 人物 >刘备 人物 >
     < 人物 >孙权 人物 >
   三国演义 >
   < 红楼梦 >
     < 作者 >曹雪芹 作者 >
     < 人物 >贾宝玉 人物 >
     < 人物 >林黛玉 人物 >
     < 人物 >王熙凤 人物 >
     < 人物 >刘姥姥 人物 >
   红楼梦 >
   < 水浒传 >
     < 作者 >施耐庵 作者 >
     < 人物 >宋江 人物 >
     < 人物 >林冲 人物 >
     < 人物 >李逵 人物 >
     < 人物 >武松 人物 >
   水浒传 >
   < 西游记 >
     < 作者 >吴承恩 作者 >
     < 人物 >唐僧 人物 >
     < 人物 >孙悟空 人物 >
     < 人物 >猪八戒 人物 >
     < 人物 >沙和尚 人物 >
   西游记 >
四大名著 >

14-2.html

< html >
< head >
< style type ="text/css" >

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 >[email protected] 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 >
  
computor >

14-4.xml

xml version ="1.0" encoding ="gb2312" ?>
  
  
  
  
]>
< 长辈 >
   < 父亲 >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" ?>
  
]>
< 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网页样式与布局 》