ＣＳＳ＋ＤＩＶ＋ＸＭＬ＋ＸＳＬ小解
概要： 本文通过一个简单的例子来说明了ＣＳＳ＋ＤＩＶ＋ＸＭＬ＋ＸＳＬ的应用在文中我通过
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文件）
3。2 xslRight.xsl（表现右边DIV中的内容的XSL文件）
我也就不多说了，主要用到了
来读取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" %>
有人看了就要问（大哥别开玩笑了这也能当主页面 你玩那吧你）
哈哈 ，您别着急啊 你看到了我一共用了五组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/
（名为ＣＳＳ＋ＤＩＶ＋ＸＭＬ＋ＸＳＬ之旅）