#### 水平導航

代碼示例:
```
<div class="win-nav win-clearfix">
<ul class="win-left">
<li class="win-nav-item win-this">
<a href="javascript:void(0);">形式</a>
</li>
<li class="win-nav-item">
<a href="javascript:void(0);">導航</a>
</li>
<li class="win-nav-item">
<a href="javascript:void(0);">紐扣</a>
</li>
<li class="win-nav-item">
<a href="javascript:void(0);">內容</a>
</li>
<li class="win-nav-item">
<a href="javascript:void(0);">移動</a>
</li>
<li class="win-nav-item">
<a href="javascript:void(0);">線框</a>
</li>
</ul>
<div class="win-right win-nav-right">
<a class="win-nav-search" href="javascript:;">
<i class="win-icon win-icon-search"></i>
<input type="search" class="win-hide" />
</a>
</div>
</div>
```
*****
#### 水平導航帶登錄

代碼示例:
```
<div class="win-nav win-clearfix">
<ul class="win-left">
<li class="win-nav-item win-this">
<a href="javascript:void(0);">形式</a>
</li>
<li class="win-nav-item">
<a href="javascript:void(0);">導航</a>
</li>
<li class="win-nav-item">
<a href="javascript:void(0);">紐扣</a>
</li>
<li class="win-nav-item">
<a href="javascript:void(0);">內容</a>
</li>
<li class="win-nav-item">
<a href="javascript:void(0);">移動</a>
</li>
<li class="win-nav-item">
<a href="javascript:void(0);">線框</a>
</li>
</ul>
<div class="win-right win-nav-right win-nav-login">
<a class="win-nav-search" href="javascript:;">
<i class="win-icon win-icon-search"></i>
<input type="search" class="win-hide" />
</a>
<a href="javascript:;">登錄</a>
<span>|</span>
<a href="javascript:;">注冊</a>
</div>
</div>
```
*****
#### 水平導航已登錄狀態

代碼示例:
```
<div class="win-nav win-clearfix">
<ul class="win-left">
<li class="win-nav-item win-this">
<a href="javascript:void(0);">形式</a>
</li>
<li class="win-nav-item">
<a href="javascript:void(0);">導航</a>
</li>
<li class="win-nav-item">
<a href="javascript:void(0);">紐扣</a>
</li>
<li class="win-nav-item">
<a href="javascript:void(0);">內容</a>
</li>
<li class="win-nav-item">
<a href="javascript:void(0);">移動</a>
</li>
<li class="win-nav-item">
<a href="javascript:void(0);">線框</a>
</li>
</ul>
<div class="win-right win-nav-right">
<a class="win-nav-logined win-relative" href="javascript:;">
<input type="search" placeholder="請輸入" />
<i class="win-icon win-icon-search"></i>
</a>
<a href="javascript:;" style="padding: 0 8px;">
<img src="../img/avatar.png" />
</a>
</div>
</div>
```
*****
#### 側欄

代碼示例:
```
<ul class="win-nav win-nav-tree win-left" style="margin-right: 10px;">
<li class="win-nav-item win-this">
<a href="javascript:void(0);">一級欄目</a>
</li>
<li class="win-nav-item">
<a href="javascript:void(0);">解決方案</a>
</li>
<li class="win-nav-item">
<a href="javascript:void(0);">選中欄目</a>
</li>
<li class="win-nav-item">
<a href="javascript:void(0);">鼠標經過效果</a>
</li>
<li class="win-nav-item">
<a href="javascript:void(0);">播放效果</a>
</li>
</ul>
<ul class="win-nav win-nav-tree win-left">
<li class="win-nav-item win-nav-first win-nav-itemed">
<a href="javascript:void(0);">默認展開
<span class="win-icon win-icon-down win-nav-more"></span>
</a>
<dl class="win-nav-child">
<dd>
<a href="javascript:void(0);">解決方案</a>
</dd>
<dd>
<a href="javascript:void(0);">選中欄目</a>
</dd>
<dd>
<a href="javascript:void(0);">鼠標經過效果</a>
</dd>
</dl>
</li>
<li class="win-nav-item win-nav-first win-nav-itemed">
<a href="javascript:void(0);">播放歷史</a>
</li>
</ul>
```