教你如何用XML做网页，例子一个

最新推荐文章于 2024-06-15 17:23:18 发布

chruan

最新推荐文章于 2024-06-15 17:23:18 发布

阅读量2.1w

点赞数 3

分类专栏： xml web 文章标签： xml xsl 公告 stylesheet encoding border

web 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

xml

12 篇文章 0 订阅

订阅专栏

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"> 
   </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;
}

chruan

关注

3
点赞
踩
35

收藏

觉得还不错? 一键收藏
5
评论
教你如何用XML做网页，例子一个

http://hi.baidu.com/tianfan/blog/item/0925c42a8413b62dd52af14c.html总共有三个文件分别为index.xml index.xsl index.css保存在同一个目录下，使用浏览器打开index.xml文件即可浏览。文件一：index.xml 日志首页
复制链接

扫一扫