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網頁樣式與佈局 》