xml网页例子(有注释) 关键要熟悉xslt 文件一：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; }