CSS + DIV + XML + XSL small Solution

Summary: This article uses a simple example to illustrate the application of CSS + Div + XML + XSL.
Div defines a form with the upper and lower structures. The middle part is divided into the left and right parts by the two divs.
An XML file is used to store the data in the middle. The two XSL files are used to represent the data and the C # syntax is used to dynamically load the data.
The DIV is shown in the middle, which is a form of presentation layer data separated by pages described in this article. With this mechanism
This improves the flexibility of page layout. You can easily change the content displayed on the page (by operating the XML file). You can also
It is very convenient to reflect different data presentation (by modifying XSL), you can modify style attributes (by modifying CSS), you can also
You can easily change the overall architecture layout (through the template). Of course, these operations are performed independently. This is the essence of it.
Do you understand? Someone is asking a question. If I divide the page into 50 faster, I don't need to write 50 XSL to show it.
It will affect the performance of the website too much. Haha, you will not be very great when I go back to large. It is perfect to present it based on XSL + XML. You
You don't have to worry too much (of course there will be a loss, and it won't be comparable to static pages). Furthermore, I made two XSL files mainly:
To demonstrate the feature that you can separate web pages, you can write only one XSL when you think it is unnecessary.
Complete the DIV layout.
Someone asks why I use multiple XSL? Think about it. Of course, this is to meet the needs of frequently modified features.
You can regard the home page as a touch version. If you want to associate it with it, it will be associated with it. This achieves dynamic layout, which is amazing.
Customer Experience, do you want to understand? Where is it? Think about it.
Summary:
Structure 1: single XML + single XSL (describe the Page Structure Div) + single CSS (in which CSS applies to the XSL document)
Advantage: The presentation layer separates the data performance to facilitate modification of page data and styles.
Structure 2: single XML + multiple XSL (describe the structure of a single module) + multiple CSS (describe the style of XSL and templates) + template (describe the Page Structure Div)
Advantage: The presentation layer separates the data presentation, making it easy to modify page data and styles. The structure is in content separation to facilitate content modification.

Note: This document describes a simple structure 2 example.
1. First, please familiarize yourself with XML, XSL, and CSS knowledge before reading this question.
No worries
2. I will first give the XML document (XML. XML) in this article)
<? XML version = "1.0" encoding = "UTF-8"?>
<Documents>
<Document1>
<Left>
<Litem> my connections </litem>
</Left>
<Left>
<Litem> my connections </litem>
</Left>
<Left>
<Litem> my connections </litem>
</Left>
<Left>
<Litem> my connections </litem>
</Left>
<Left>
<Litem> my connections </litem>
</Left>
<Left>
<Litem> my connections </litem>
</Left>
<Left>
<Litem> my connections </litem>
</Left>
</Document1>
<Document2>
<Right>
<Litem> let's start a mysterious journey of CSS + DIV + XML + XSL </litem>
</Right>
<Right>
<Litem> let's start a mysterious journey of CSS + DIV + XML + XSL </litem>
</Right>
<Right>
<Litem> let's start a mysterious journey of CSS + Div + XML + XSL </litem>
</Right>
<Right>
<Litem> let's start a mysterious journey of CSS + Div + XML + XSL </litem>
</Right>
<Right>
<Litem> let's start a mysterious journey of CSS + Div + XML + XSL </litem>
</Right>
<Right>
<Litem> let's start a mysterious journey of CSS + Div + XML + XSL </litem>
</Right>
<Right>
<Litem> let's start a mysterious journey of CSS + Div + XML + XSL </litem>
</Right>
<Right>
<Litem> let's start a mysterious journey of CSS + DIV + XML + XSL </litem>
</Right>
</Document2>
</Documents>

This XML document mainly provides the content list on the left and right pages of the content page I made using DIV, which are <document1> and <document2>

3. We will provide two XSL documents used for display (short lift. xsl, short right. xsl)
3. 1. XslLift. xsl (the XSL file that represents the content in the Left DIV)
<? Xml version = "1.0" encoding = "UTF-8"?>

<Xsl: stylesheetversion = "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
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 right. XSL (representing the XSL file of the content in the Right Div)
<? XML version = "1.0" encoding = "UTF-8"?>

<XSL: stylesheetversion = "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
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>

I will not talk about it much. I mainly use the <XSL: For-each select = "Documents/Document2/right"> </XSL: For-each> structure.
To read the content in XML.

4. The following describes the key technologies:
Let's take a look at the code section:
Public stringwriter gethtmlstrwrite (string xmlpath, string character path)
{
// Get the XSL as a string
Streamreader export r = new streamreader (export path );
String reverse STR = reverse R. readtoend ();

// Get the XML as a string
Streamreader sr = new streamreader (xmlpath );
String instr = Sr. readtoend ();

// Load the style sheet.
Stringreader internal reader = new stringreader (internal STR );
Xmlreader internal RDR = xmlreader. Create (external reader );
Extends compiledtransform XSLT = new extends compiledtransform ();
XSLT. Load (datagrdr );

// 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;
}

Now let me explain it to you.
1. String xmlpath and string xmlpath are the file paths of your XML and XSL parameters.
2. streamreader export r = new streamreader (export path );
String reverse STR = reverse R. readtoend ();
Read the XSL file to the sorted Str
3. streamreader sr = new streamreader (xmlpath );
String instr = Sr. readtoend ();
Read XML files to instr
4 stringreader internal reader = new stringreader (internal STR );
Xmlreader internal RDR = xmlreader. Create (external reader );
Extends compiledtransform XSLT = new extends compiledtransform ();
XSLT. Load (datagrdr );
This is the most important step. You can use compiledtransform to load the XSL file and provide the function of associating XML files.
For more information, see help.
5, stringreader strreader = new stringreader (instr );
Stringwriter strwriter = new stringwriter ();
Xmlreader reader = xmlreader. Create (strreader );
There is nothing to say about loading XML documents.
6. XSLT. Transform (reader, null, strwriter );
I just want to provide the function of associating XML and XSL documents in Step 4 (dynamic and useful)

Now we have everything ready. Now let's get started with building the homepage! (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> No title page </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>

Someone needs to ask after reading it. (Don't be kidding me. You can also play with it on the homepage)
Haha, don't worry. You saw that I used a total of five groups of Divs. The first group is the beginning and the last group is the end of the page.
Now let's take a look at the middle part. The middle part appears in the form of a DIV nested with two divs.
<Div id = "content1">
<Div id = "right" runat = "server">

</Div>
<Div id = "Left" runat = "server">
Do you understand? This is the structure of our content. Some may be confused.
However, if you are familiar with CSS, you will not have any questions.

Let's take a look at the cssfile (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 ;. // Automatically hide benefits
}
# Right
{
Float: Right; // float on the left
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 ;}
Let's just take a look.
Download this demo: http://download.csdn.net/user/desertFishToHeaven/

(Journey to CSS + Div + XML + XSL)