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

概要：    本文通过一个简单的例子来说明了ＣＳＳ＋ＤＩＶ＋ＸＭＬ＋ＸＳＬ的应用在文中我通过
       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文档主要给出了我用DIV做的内容页中的左右页面中的内容列表，分别为和

3。我们来给出显示用的两个XSL文档（xslLift.xsl，xslRight.xsl）
  3。1。xslLift.xsl（表现左边DIV中的内容的XSL文件）

    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

   
   
   
     
       

         

           
• 
               
                 
               
             

         

       

     
   
   

   3。2 xslRight.xsl（表现右边DIV中的内容的XSL文件）

    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

   
   
   
     
       

         

           
• 
               
                 
               
             

         

       

     
   
   

我也就不多说了，主要用到了结构
来读取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" %>

   
   

header

 

  

footer

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

 

看明白了吗这就是我们内容部分的架构，有的人可能会很迷糊
但是您如果熟悉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/

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