概要： 本文通過一個簡單的例子來說明了ＣＳＳ＋ＤＩＶ＋ＸＭＬ＋ＸＳＬ的應用在文中我通過
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/
（名為ＣＳＳ＋ＤＩＶ＋ＸＭＬ＋ＸＳＬ之旅）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
