概要： 本文通过一个简单的例子来说明了ＣＳＳ＋ＤＩＶ＋ＸＭＬ＋ＸＳＬ的应用在文中我通过 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> <!-- This is an XSLT template file. Fill in this area with the XSL elements which will transform your XML to XHTML. --> <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> <!-- This is an XSLT template file. Fill in this area with the XSL elements which will transform your XML to XHTML. --> <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/
（名为ＣＳＳ＋ＤＩＶ＋ＸＭＬ＋ＸＳＬ之旅）
