1
我正在用xml + xslt做一個基本的「選擇你自己的冒險」遊戲。這是它目前的樣子： 
玩家可以選擇的不同答案是灰色區域。 它看起來不錯，只有我希望答案出現在不同的行上，如果需要的話。就像，如果有超過3個答案。如果超過3則在不同的行中放置td
這裏是XSLT後有關HTML轉換：
<div id="cadre" style=" height:800px; width:800px; margin-left :auto; margin-right :auto; overflow:hidden; ">
<div ID="1" style="stuff">
<img style="stuff" src="images/sexylama.gif"/>
<p>Es-tu prête pour une aventure pleine de passion ?</p>
<table style="margin-left:auto;margin-right:auto;width:500px;margin-top:40px;">
<tr>
<td style=" padding : 5px; width:auto; height:100px; text-align:center; background:#eeeeee; ">
<a href="#4" style="stuff">Oui</a></td>
<td style="padding : 5px; width:auto; height:100px; text-align:center; background:#eeeeee; ">
<a href="#2" style="stuff">Non</a> </td>
<td style=" padding : 5px; width:auto; height:100px; text-align:center; background:#eeeeee; ">
<a href="#2" style="stuff">Jt'en pose des questions ?</a> </td>
<td style=" padding : 5px; width:auto; height:100px; text-align:center; background:#eeeeee; ">
<a href="#2" style="text-decoration:none;color:black;font-size:1.2em;">stuff</a> </td>
</tr>
</table>
</div>
<div ID="2" style="stuff">
<img style="stuff" src="images/somethingelse.gif"/>
<p>Here is another question</p>
<table style="margin-left:auto;margin-right:auto;width:500px;margin-top:40px;">
<tr>
<td style=" padding : 5px; width:auto; height:100px; text-align:center; background:#eeeeee; ">
<a href="#4" style="stuff">yes</a></td>
<td style="padding : 5px; width:auto; height:100px; text-align:center; background:#eeeeee; ">
<a href="#2" style="stuff">No</a> </td>
</tr>
</table>
</div>
....
性感的駱駝與當前的問題和當前的答案顯示的唯一的東西。事實上，在其他問題/答案/駱駝都存在，如果你可以滾動，但他們都隱藏着高度固定+溢出：隱藏
的XML看起來是這樣的：
<gameofdoom>
<etape ID="1">
<texte>Es-tu prête pour une aventure pleine de passion ?</texte>
<image>images/sexylama.gif</image>
<choix cible="4">Oui</choix>
<choix cible="2">Non</choix>
<choix cible="2">Jt'en pose des questions ?</choix>
<choix cible="2">T'as pas peur de péter ta mise en page pourrie en mettant des choix trop longs ?</choix>
</etape>
<etape ID="2">
<texte>Préférez-vous celle des trois minces grands échalas ?</texte>
<choix cible="16">Oui</choix>
<choix cible="3">Non</choix>
</etape>
...
</gameofdoom>
在這裏，你會得到主要部分，xslt表：
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"
xmlns="http://www.w3.org/1999/xhtml">
<xsl:template match="/gameofdoom">
<html>
<head>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="rien.css" type="text/css"/>
<title>DAT DATIN SIM OF DOOM</title>
</head>
<body style="text-align:center;">
<!-- this deals with showing one "etape" at a time-->
<div id="cadre" style="
height:800px; width:800px;
margin-left :auto;
margin-right :auto;
overflow:hidden;
">
<xsl:apply-templates select="etape"/>
</div>
</body>
</html>
</xsl:template>
<xsl:template match="etape">
<!-- shows the etape-->
<div ID="{@ID}" style="
height: 800px;
margin-bottom:500px;
padding:30px;
text-align:center;
">
<!-- image -->
<xsl:apply-templates select="image"/>
<!-- shows the text of the etape -->
<p><xsl:value-of select="texte"/></p>
<!-- table for showing different answer choices next to another -->
<table style="margin-left:auto;margin-right:auto;width:500px;margin-top:40px;">
<tr>
<xsl:for-each select="choix">
<!-- one choice answer -->
<td style="
padding : 5px;
width:auto;
height:100px;
text-align:center;
background:#eeeeee;
">
<xsl:apply-templates select="."/>
</td>
</xsl:for-each>
</tr>
</table>
</div>
</xsl:template><!--/etape-->
<xsl:template match="choix">
<a href="#{@cible}" style="text-decoration:none;color:black;font-size:1.2em;">
<xsl:value-of select="."/>
</a><xsl:text> </xsl:text>
</xsl:template>
<xsl:template match="image">
<img style="margin-left:auto;margin-right:auto;width:300px;margin-top:30px;" src="{.}"></img>
</xsl:template>
</xsl:stylesheet>
對不起，所有在法國的代碼，我會翻譯任何需要的。
謝謝大家寶貴的時間！
完美，謝謝！我有更多的想法，把2個細胞一排，但這也適用。 – 2014-12-06 19:31:34