frs右侧规范（aside）

上下图文对象

主要应用于吧主，友情贴吧等模块
使用方式： 直接copy下面的DOM结构

<ul class="aside-media-horizontal clearfix">
  <li class="media-vertical">
    <a class="media-top" href="#" target="" title="">
      <img src="6060.jpg" alt="image"></a>
    <div class="text-overflow media-bottom">
      <a href="#" target="_blank" class="" title="一不小心爱上你">一不小心爱上你</a>
    </div>
  </li>
</ul>

上下图文对象

目前平台化使用较多
使用方式： 直接copy下面的DOM结构

<a class="aside-thumbnail-120">
    <img src="http://p6.qhimg.com/dr/360_210_/t019df57088b7ca51ab.jpg" alt="image">
</a>
<ul class="unordered-list-dot">
    <li class="text-overflow"><a href="#">自定义文字自定义文字自定义文字自定义文字</a></li>
</ul>

左右图文对象

略
使用方式： 直接copy下面的DOM结构
在规范中，支持两种图片尺寸的图文对象（6060）或者（8060）,只需要更换aside-media-vertical-60为aside-media-vertical-80即可，
如果想支持更多尺寸的图片，请如下设置

<ul class="yours-demo clearfix">
</ul>
.yours-demo{
    &:extend(.aside-media-vertical-60 all);
    li{
        .make-horizontal-media(80px, 60px, 10px);
    }
}

<ul class="aside-media-vertical-60 clearfix">
    <li class="media-horizontal clearfix">
        <a class="media-left">
          <img src="http://imgsrc.baidu.com/forum/pic/item/aa64034f78f0f7362a4f09e20855b319eac4139b.jpg" alt="image" />
          <span class="media-caption"></span>
        </a>
        <div class="media-right">
          <a class="text-overflow title">自定义文字自定义文字自定义文字</a>
          <p>自定义文字自定义文字自定义文字</p>
        </div>
    </li> 
</ul>

列表

<ul class="unordered-list-dot">
    <li class="text-overflow"><a href="#">自定义文字自定义文字</a></li>
    <li class="text-overflow"><a href="#">自定义文字自定义文字</a></li>
    <li class="text-overflow"><a href="#">自定义文字自定义文字</a></li>
</ul>

frs头部规范（head）

1. 1. frs右侧规范（aside）
   1. 1.1. 上下图文对象
   2. 1.2. 上下图文对象
   3. 1.3. 左右图文对象
   4. 1.4. 列表
2. 2. frs头部规范（head）