#### 水平导航
代码示例：
```
<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>
```
