教你如何用XML做網頁，例子一個
http://hi.baidu.com/tianfan/blog/item/0925c42a8413b62dd52af14c.html
總共有三個檔案
分別為index.xml
index.xsl
index.css
儲存在同一個目錄下，使用瀏覽器開啟index.xml檔案即可瀏覽。
檔案一：index.xml
<?xml version="1.0" encoding="GB2312"?>
<?xml-stylesheet type="text/xsl" href="index.xsl"?>
<myblog>
<menu>
<topmenu>
<item>日誌首頁</item>
<hyperlink>index.xml</hyperlink>
</topmenu>
<topmenu>
<item>留言板</item>
<hyperlink>guestbook.xml</hyperlink>
</topmenu>
<topmenu>
<item>站長資料</item>
<hyperlink>aboutme.xml</hyperlink>
</topmenu>
<topmenu>
<item>訂閱RSS2.0</item>
<hyperlink>rss2.xml</hyperlink>
</topmenu>
</menu>
<bulletin>
<content>經過六七個鐘頭的苦戰，這個頁子模型算是可以告一段落了，版本號定為Ver0.01，歡迎大家批評</content>
<time>2006-3-20 上午 01:48:11</time>
</bulletin>
<copyright>
<author>程式:天凡</author>
<time>2006年3月20日</time>
<version>version:0.02</version>
<email>arrbo#163.com請自行將#換成@</email>
</copyright>
<aboutmysite>
<content>
<![CDATA[ 公告公告，這裡是公告欄。
]]>
</content>
</aboutmysite>
<mytitlelist>
<titlelist>
<item>標題一</item>
<hyperlink>http://www.aaa..com/bbb.xml</hyperlink>
</titlelist>
<titlelist>
<item>標題二</item>
<hyperlink>http://www.aaa..com/bbb.xml</hyperlink>
</titlelist>
</mytitlelist>
<myfriendlink>
<friendlink>
<item>友情連結文字一</item>
<hyperlink>http://www.aaa.com</hyperlink>
</friendlink>
<friendlink>
<item>友情連結文字二</item>
<hyperlink>http://www.aaa.com</hyperlink>
</friendlink>
<friendlink>
<item>友情連結文字三</item>
<hyperlink>http://www.aaa.com</hyperlink>
</friendlink>
</myfriendlink>
<mybloglist>
<bloglist>
<title>繼續更新</title>
<time>2006年3月21日1時03分</time>
<kind>分類</kind>
<item><![CDATA[內容縮略一內容縮略一.......]]></item>
<hyperlink>http://www.aaa.com/aaa.xml</hyperlink>
<clicknum>點選數9</clicknum>
</bloglist>
<bloglist>
<title>終於完成了0.01版的部分基本結構</title>
<time>2006年3月20日1時40分</time>
<kind>分類</kind>
<item>
<![CDATA[ 內容縮略二內容縮略二.......。
]]>
</item>
<hyperlink>http://www.aaa.com/aaa.xml</hyperlink>
<clicknum>點選數1</clicknum>
</bloglist>
</mybloglist>
</myblog>
檔案二
index.xsl
<?xml version="1.0" encoding="GB2312"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:template match="/">
<html>
<head>
<title>天凡的小窩</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<link type="text/css" media="all" rel="stylesheet" href="index.css"/>
</head>
<body>
<div id="top">
<div id="menu"> <!--頂部選單-->
<ul>
<xsl:apply-templates select="//menu"/>
</ul>
</div>
</div>
<div id="logoarea"> <!--logo和banner-->
</div>
<div id="main"><!--主體部分-->
<div id="mainleft"><!--主體左側-->
<div id="leftbulletin"><!--左側公告-->
<xsl:apply-templates select="//bulletin"/>
</div>
<div><!--關於本站-->
<xsl:apply-templates select="//aboutmysite"/>
</div>
<div><!--新文章列表-->
<div class="lefttitle">新日誌列表</div>
<div class="listul">
<ul>
<xsl:apply-templates select="//mytitlelist"/>
</ul>
</div>
</div>
<div><!--友情連結-->
<div class="lefttitle">友情連結</div>
<div class="listul">
<ul>
<xsl:apply-templates select="//myfriendlink"/>
</ul>
</div>
</div>
</div>
<div><!--主體右側-->
<ul>
<xsl:apply-templates select="//mybloglist"/>
</ul>
</div>
</div>
<div id="bottom"><!--底部版權部分-->
<xsl:apply-templates select="//copyright"/>
</div>
</body>
</html>
</xsl:template>
<xsl:template match="//menu">
<xsl:for-each select="child::topmenu">
<li>
<a target="_blank">
<xsl:attribute name="href">
<xsl:value-of select="hyperlink"/>
</xsl:attribute>
<xsl:value-of select="item"/>
</a>
</li>
</xsl:for-each>
</xsl:template>
<xsl:template match="//bulletin">
<div class="lefttitle">本站公告</div>
<div class="left2">
<xsl:value-of select="content"/>
</div>
<div id="bulletintime">
<xsl:value-of select="time"/>
</div>
</xsl:template>
<xsl:template match="// aboutmysite">
<div class="lefttitle">關於本站</div>
<div class="left2">
<xsl:value-of select="content"/>
</div>
<div id="bulletintime">
<xsl:value-of select="time"/>
</div>
</xsl:template>
<xsl:template match="mytitlelist">
<xsl:for-each select="child::titlelist">
<li>
<a target="_blank">
<xsl:attribute name="href">
<xsl:value-of select="hyperlink"/>
</xsl:attribute>
<xsl:value-of select="item"/>
</a>
</li>
</xsl:for-each>
</xsl:template>
<xsl:template match="//myfriendlink">
<xsl:for-each select="child::friendlink">
<li>
<a target="_blank">
<xsl:attribute name="href">
<xsl:value-of select="hyperlink"/>
</xsl:attribute>
<xsl:value-of select="item"/>
</a>
</li>
</xsl:for-each>
</xsl:template>
<xsl:template match="//mybloglist">
<xsl:for-each select="child::bloglist">
<li class="bloglist">
<div>標題：<xsl:value-of select="title"/></div>
<div>日誌發表時間：<xsl:value-of select="time"/>日誌類別：<xsl:value-of select="kind"/></div>
<div class="myblogcontent">內容摘要：
<a target="_blank">
<xsl:attribute name="href">
<xsl:value-of select="hyperlink"/>
</xsl:attribute>
<xsl:value-of select="item"/>
</a>
</div>
<div>瀏覽量：<xsl:value-of select="clicknum"/></div>
</li>
</xsl:for-each>
</xsl:template>
<xsl:template match="//copyright">
<div><xsl:value-of select="author"/></div>
<div><xsl:value-of select="time"/>
<xsl:value-of select="version"/></div>
<div>E-mail:<xsl:value-of select="email"/></div>
</xsl:template>
</xsl:stylesheet>
檔案3
index.css
/*主體*/
body{
margin:0;
font-size:12px;
text-align:center;
color:#000;
font-family:'Lucida Grande','Lucida Sans Unicode','宋體','新宋體',arial,verdana,sans-serif;
}
#top{
position:relative;
margin-left:auto;
margin-right:auto;
width:760px;
height:24px;
}
#menu{
position:relative;
margin-left:-2px;
}
#menu ul{
margin:0,0,0,-2px;
TEXT-ALIGN: center;
display:inline;
}
#menu li{
display:block;
width:80px;
float:left;
list-style-type:none;
MARGIN: 1px;
TEXT-ALIGN: center;
BORDER:#000 1px solid;
LINE-HEIGHT:20px;
}
#menu li a{
display: block;
width: 100%;
color: #cc33cc;
text-decoration: none;
background-color:#e9fafe;
}
#menu li a:hover {
background-color:#ffffff;
}
#main{
width:760px;
position:relative;
text-align:center;
margin-left:auto;
margin-right:auto;
margin-top:0px;
border:1px solid #000;
display:table;
}
#mainleft{
position:relative;
text-align:left;
float:left;
width:200px;
margin:4px;
border:1px dotted #999;
}
.bloglist{
width:500px;
list-style-type:none;
MARGIN: 4px;
PADDING:2px;
TEXT-ALIGN: left;
BORDER:#999 1px dotted;
LINE-HEIGHT:20px;}
#logoarea{
height:100px;
width:760px;
border:1px solid #000;
position:relative;
margin-left:auto;
margin-right:auto;
background:url("images/logo.jpg") #fff no-repeat;
}
.lefttitle{
position:relative;
height:18px;
line-height:18px;
display:block;
font-size:13px;
text-align:center;
font-weight:500;
background:#001A7D;
color:#fff;
}
.left2{
text-indent: 2em;
background:#D5DDFB;
line-height:18px;
}
.listul{
margin-top:-14px;
margin-left:-40px;
}
.listul li{
width:197px;
height:22px;
list-style-type:none;
TEXT-ALIGN: left;
LINE-HEIGHT:20px;
}
.listul li a{
display: block;
width: 100%;
color: #cc33cc;
text-decoration: none;
text-indent:1em;
background-color:#fff;
}
.listul li a:hover {
border:1px solid #999;
}
#bulletintime
{
text-align:right;
background:#D5DDFB;
}
#bottom{
clear:both;
margin:10px;
}