1、对网页设计非常有用，通用性强，循环性强、可控性强，高度优化。
2、如此结构还有一个好处就是代码干净整洁。
3、这种强大的结构，根本不亚于商业模板，有过之而无不及。
4、这里只讲结构大框，不讲具体，也没法讲清楚，不然得写论文。
5、以图片说明为主，举例为辅，这样能达到一目了然的效果。
6、三个部分：总揽、XHTML 和 CSS。
7、只要稍稍理解一点，做一个WP Theme 简直绰绰有余。

总揽：

图一、首先我们看一下Vicuna CMS的总体结构。

在WordPress平台上，调用XHTML，再加载CSS的方式构成一个WP Theme，同样你会发现用CSS控制模板样式，而且其样式多样化。

XHTML：

图二、核心BODY的构成。

我这篇文章的大标题就是H1，首页罗列的各个文章标题就是H2，我这里没有启用Class，默认的wp.Viucna模板带description这个Class。

图三、DIV用法之一。

– 这里先讲讲我用的一个FORM，参考我的header部分的Search form，BODY ->DIV ->P ->Search Form这种形式，图二和图三结合起来看。

– 看完图请看下面代码，你会发现DIV,H3,UL是如何使用的，而这些使用远比图片丰富的多，还使用了H4，LI，SPAN。

这段代码就是我的首页Left Sidebar《休闲娱乐》展开以后的结果，当然class可以自行设定，从下段代码你会看出图三和图四是结合起来使用的（其他的原理都大同小异，仅仅以此说明）。

<div id="utilities" class="section">

<div class="section xxx yyy">
<h3>腾 信 家</h3>

 <div class="section ccc">
   <h4>休闲娱乐</h4>
     <ul class="lesson">
     <li><span class="subject">
<a href="/entertainment"/>娱乐无限</a></span>
      <ul>
         <li class="course">
<a href="/movie"/>经典影片</a></li>
         <li class="course">
<a href="/music"/>音乐欣赏</a></li>
         <li class="course lastChild">
<a href="/youtube"/>YouTube</a></li>
      </ul>
    </li>
    <li><span class="subject">
<a href="/joke"/>开心一刻</a></span></li>
    </ul>
 </div>

图四、DIV用法之二。

请注意：UL和LI是反复使用，反复嵌套的。

图五、DIV用法之三。

请看右边的Sidebar就是用的图五方式（图七更加具体），同样UL下还可以用LI，也可以像图四一样反复使用UL和LI。而且wp.Vicuna的Comment.php也大量使用了这种DL,DT,DD的方式。

这样写法的好处就是可以无限制的增加代码，并且反复使用UL和LI，定义CSS也非常方便，任何一个小细节都能具体定义。

图六、wp.Vicuna的整体布局。

图七、wp.Vicuna的默认Sidebar构成。提供的默认模板都采用这种方式，DD下面可以增加UL,LI的，和图五结合着看。

至此XHTML部分基本结束。循环性非常强。下面讲可控性强的CSS部分。

CSS:

图八、wp.Vicuna的CSS基本结构及其扩展性。

从上图中很容易看的出来，通过外部导入CSS来增加定义，再倒入Module的方式变换样式，达到模板多样化，独栏、两栏、三栏，以及各种 eyeCatch 都是这样变化的。

图九、从Moudule引申，利用Subskin 进一步扩展CSS。

图十、这么多CSS是如何起到定义作用的，如何相互影响的。（局部和广域的优先度）

图十一、导入的基本CSS是如何使其不冲突，并进一步具体定义。

图十二、CSS定义的、涉及到的各种效果是如何实现的。

不但有这种效果还有其他Table效果、Code效果等，可以参考我的网页收藏页面，也可以参考wp.Vicuna用法。

至此，Vicuna CMS的总体结构基本讲述完毕。

其实他这种效果是两张图片叠加的效果，前面我们看到的主图片是在(X)HTML里调过来的，而图片周围流水效果是其background-image(是动画GIF)，而背景图片显示的范围只有我们留出的padding空隙那么大，他只能显示那部分。效果看起来像流动的线条。

这里还是借用一下俄罗斯美女Janaina，请先看效果。图片1.始终让其显示流水效果，图片2.只有在OnMouse的时候显示，也就是hover。

（点击可以看大图，是Highslide图片特效）

想要达到这种效果必须要用这图片bg_current.gif —-> ：

(X)HTML下调用
   <img src="xxx.jpg" alt="" />
CSS下调用
img {
    background-image: url(bg_current.gif);
    padding: 1px;
}
OnMouse
.pict a img {
    padding: 1px;
}
.pict a:hover img {
    background-image: url(bg_current.gif);
    padding: 1px;
}

这里最重要的就是padding:1px; 我们留出这空隙就是为了在此范围内显示背景图片，其他是不可见的。当然你也可以加 border:2px solid #ccc; 等，上图我是加了的。

值得注意的是：这效果在WIN IE6下是显示不出效果的，因为IE6不支持padding属性。
但是我们可以利用图片亲元素<p>或<div>来细化CSS的方法来达到图片1.的显示效果。
像下面这样写代码，它就会兼容IE6。

.pict {
    background-image: url(bg_current.gif);
    padding: 1px;
    display: inline;
    _width: 100px; /*For WIN IE6*/
}
.pict{
    display:table;
}
.pict img {
    vertical-align: bottom;
}

遗憾的是图片2.的显示效果（也就是OnMouse时）在IE6下是无论如何达不到的。
在IE7，Opera，Safari，Firefox，Chrome下好用，因为都支持padding属性。
愿WIN IE7早点普及，之前只能辛勤细化CSS啦。

至于Highslide图片特效和图片流水效果结合（即同时调用）很简单，调用Highslide的JS库（class=”highslide”），又调用上面给出的CSS（class=”pict”）而CSS在后台调用背景图片（动画GIF），当然(X)HTML是少不了的，他调用前面的主图片，包括highslide点击以后的大图片。（应要求具体写之）

<div class="pict"><a class="highslide" onclick="return hs.expand(this)"
href="photo.jpg">
<img src="photothumb.jpg" alt="" /></a></div>