ＣＳＳ＋ＤＩＶ＋ＸＭＬ＋ＸＳＬ小解

来源：互联网发布：知乎经历爆菊编辑：程序博客网时间：2024/06/06 12:24

概要：    本文通过一个简单的例子来说明了ＣＳＳ＋ＤＩＶ＋ＸＭＬ＋ＸＳＬ的应用在文中我通过
       DIV定义了一个上中下结构的的窗体，其中中间部分又被两个DIV分成了左右两部分我通过定义
       一个XML文件来存储中间两部分的数据，通过两个XSL来表现数据，并用C#语法动态的加载数据
       展现在了中间的DIV部分，这就是本文说明的一种表现层的数据于页面的分离。用这种机制大大
       提高了页面布局的灵活性，你可以很方便的改变页面展现的内容（通过操作XML文件）你也可以
       很方便的体现不同的数据展现（通过修改XSL），可以修改样式属性（通过修改CSS），您还可以
       方便的改变整体的架构布局（通过模板），当然这些操作都是独立进行的，这才是它的精华，你
       了解了吗？有人就要提问了，那我要是把页面分成50快，那我不是要写50个XSL来展现这样会不
       会对网站的性能影响太的，哈哈，那我回大你不会太大基于XSL+XML的展现做的是很完美的，你
       可以不用太担心（当然肯定会有损失，它不可能和静态页媲美的），再者我做两个XSL文件主要是
       为了说明你可以把网页分块独立的特性，当你觉得没必要的时候你大可以只写一个XSL，在XSL里
       完成DIV布局。
          有人又要问那为什么用多个XSL那？你想想吧，这样当然是为了满足需要经常修改的特性了
       你可以把主页面当成一个摸版，你想吧它关联到那就关联到那，这就实现了动态布局，是非常奇妙的
       客户体验哦，你想明白了吗？奇妙在什么地方，仔细想象吧
总结：
       结构1：单XML+单XSL（描述页面结构DIV）+单CSS（其中CSS对XSL文档用运）
              优点：表现层数据表现分离，方便修改页面数据，样式
       结构2：单XML+多XSL（描述单模块结构）+多CSS（对XSL和模板描述样式）+模板（描述页面结构DIV）
              优点：表现层数据表现分离，方便修改页面数据，样式；结构于内容分离，方便修改内容

注意：本文是描述一个简单个结构2例子
1。首先，在阅读本问之前请先自行熟悉XML，XSL，CSS相关知识，应为这些知识网上一搜一大堆我就
   不罗嗦了
2。我先给出本文的XML文档（xml.xml）
   <?xml version="1.0" encoding="utf-8" ?>
<documents>
<document1>
    <left>
      <litem>我的连接</litem>
    </left>
    <left>
      <litem>我的连接</litem>
    </left>
    <left>
      <litem>我的连接</litem>
    </left>
    <left>
      <litem>我的连接</litem>
    </left>
    <left>
      <litem>我的连接</litem>
    </left>
    <left>
      <litem>我的连接</litem>
    </left>
    <left>
      <litem>我的连接</litem>
    </left>
</document1>
<document2>
    <right>
      <litem>让我们开始神秘的ＣＳＳ＋ＤＩＶ＋ＸＭＬ＋ＸＳＬ之旅吧</litem>
    </right>
    <right>
    　<litem>让我们开始神秘的ＣＳＳ＋ＤＩＶ＋ＸＭＬ＋ＸＳＬ之旅吧</litem>
    </right>
    <right>
       <litem>让我们开始神秘的ＣＳＳ＋ＤＩＶ＋ＸＭＬ＋ＸＳＬ之旅吧</litem>
    </right>
    <right>
    　<litem>让我们开始神秘的ＣＳＳ＋ＤＩＶ＋ＸＭＬ＋ＸＳＬ之旅吧</litem>
    </right>
    <right>
      <litem>让我们开始神秘的ＣＳＳ＋ＤＩＶ＋ＸＭＬ＋ＸＳＬ之旅吧</litem>
    </right>
    <right>
      <litem>让我们开始神秘的ＣＳＳ＋ＤＩＶ＋ＸＭＬ＋ＸＳＬ之旅吧</litem>
    </right>
    <right>
      <litem>让我们开始神秘的ＣＳＳ＋ＤＩＶ＋ＸＭＬ＋ＸＳＬ之旅吧</litem>
    </right>
    <right>
      <litem>让我们开始神秘的ＣＳＳ＋ＤＩＶ＋ＸＭＬ＋ＸＳＬ之旅吧</litem>
    </right>
</document2>
</documents>

本XML文档主要给出了我用DIV做的内容页中的左右页面中的内容列表，分别为<document1>和<document2>

3。我们来给出显示用的两个XSL文档（xslLift.xsl，xslRight.xsl）
3。1。xslLift.xsl（表现左边DIV中的内容的XSL文件）
<?xml version="1.0" encoding="utf-8"?>

<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
    <html>
    <body>
    
      <xsl:for-each select="documents/document1/left">
        <div width="100%" border="0">
          <ul>
            <li>
              <a href="#" style="padding-top:40px">
                <xsl:value-of select="litem"/>
              </a>
            </li>
          </ul>
        </div>
      </xsl:for-each>
    </body>
    </html>
</xsl:template>

</xsl:stylesheet>
3。2 xslRight.xsl（表现右边DIV中的内容的XSL文件）
<?xml version="1.0" encoding="utf-8"?>

<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
    <html>
    <body>
    
      <xsl:for-each select="documents/document2/right">
        <div width="100%" border="0">
          <ul>
            <li>
              <a href="#" style="padding-top:40px">
                <xsl:value-of select="litem"/>
              </a>
            </li>
          </ul>
        </div>
      </xsl:for-each>
    </body>
    </html>
</xsl:template>

</xsl:stylesheet>

我也就不多说了，主要用到了<xsl:for-each select="documents/document2/right"></xsl:for-each>结构
来读取XML中的内容

4。下面我们介绍关键的技术：
   先来看段代码：
      public StringWriter getHTMLstrWrite(string xmlPath, string xslPath)
       {
        //get the xsl as a string
        StreamReader xslr = new StreamReader(xslPath);
        string xslStr = xslr.ReadToEnd();

        //get the xml as a string
        StreamReader sr = new StreamReader(xmlPath);
        string inStr = sr.ReadToEnd();

        // Load the style sheet.
        StringReader xslReader = new StringReader(xslStr);
        XmlReader xslRdr = XmlReader.Create(xslReader);
        XslCompiledTransform xslt = new XslCompiledTransform();
        xslt.Load(xslRdr);

        //Load the xml
        StringReader strReader = new StringReader(inStr);
        StringWriter strWriter = new StringWriter();
        XmlReader reader = XmlReader.Create(strReader);

        // Transform
        xslt.Transform(reader, null, strWriter);
        return strWriter;
    }

现在我来给大家解释
   1，string xmlPath, string xslPath分别是我们要给出的参数也就是你的XML和XSL的文件路径
   2，StreamReader xslr = new StreamReader(xslPath);
       string xslStr = xslr.ReadToEnd();
      读取XSL文件到xslStr中
   3， StreamReader sr = new StreamReader(xmlPath);
        string inStr = sr.ReadToEnd();
      读取 XML文件到inStr中
   4 StringReader xslReader = new StringReader(xslStr);
        XmlReader xslRdr = XmlReader.Create(xslReader);
        XslCompiledTransform xslt = new XslCompiledTransform();
        xslt.Load(xslRdr);
     这是最重要的一步，通过XslCompiledTransform 来载入XSL文件并提供关联XML文件的功能
     有关详细解释查看帮助
   5，StringReader strReader = new StringReader(inStr);
        StringWriter strWriter = new StringWriter();
        XmlReader reader = XmlReader.Create(strReader);
     载入XML文档没什么可说的
   6， xslt.Transform(reader, null, strWriter);
       就想4步所说的提供关联XML和XSL文档的功能（是动态的哦，会很有用）

现在我们准备好了一切，马上我们开始够建主页面吧！（Default.aspx）
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>
    <link rel="stylesheet" rev="stylesheet" href="css.css" _fcksavedurl=""css.css"" _fcksavedurl=""css.css"" type="text/css" media="all" title="001" />
</head>
<body>
<div id="header">header</div>
<div id="content1">
<div id="right" runat="server">

</div>
<div id="left" runat="server">

</div>
</div>
<div id="footer">footer</div>
</body>
</html>

有人看了就要问（大哥别开玩笑了这也能当主页面你玩那吧你）
哈哈，您别着急啊你看到了我一共用了五组DIV其中第一组是也头最后一组是页尾
现在让我们看看中间吧中间部分用一个DIV里嵌套两个DIV的形式出现
<div id="content1">
<div id="right" runat="server">

</div>
<div id="left" runat="server">
看明白了吗这就是我们内容部分的架构，有的人可能会很迷糊
但是您如果熟悉CSS您将不会再有任何疑问了

好了让我们来看看CSS文件把（css.css)
body{
background:#999;
text-align:center;
color: #333;
font-family:arial,verdana,sans-serif;
}
#header{
width:776px;
margin-right: auto;
margin-left: auto;
padding: 0px;
background: #EEE;
height:60px;
text-align:left;
}
#content1
{
    WIDTH:776px;
    MARGIN-RIGHT: auto;
    margin-left : auto;
    padding : 0px;
    background:#ffffff;
    border-left:1px solid #9662A9;
    border-right:1px solid #9662A9;
    text-align:left;
    height:303px;
    overflow: hidden;。//益处自动隐藏
}
#right
{
FLOAT:right;//在左侧浮动
width:590px;
text-align:left;
height:303px;
}
#left
{
text-align:center;
padding-top:6px;
height:303px;
}
#footer
{
clear:both;
width:776px;
margin-right: auto;
margin-left: auto;
padding: 0px;
background: #EEE;
height:60px;
}
.text{margin:0px;padding:20px;}
不用多说了吧自己看看吧
下载本例ＤＥＭＯ：http://download.csdn.net/user/desertFishToHeaven/

（名为ＣＳＳ＋ＤＩＶ＋ＸＭＬ＋ＸＳＬ之旅）