## 一. 组件详解
1. 友情链接组件分为俩种
I.全部文字
> 组件中全部由文字组成
II.全部图片
> 组件中全部由图片组成
2. 组件由模块组成，每个模块含有一个或多个`<a>`连接【四.代码示例详解"模块"】
3. 友情链接组件html布局基于Bootstrap栅格布局,每个模块最外层容器一定要有`col-xx-xx`class来自适应手机端
* * * * *
## 二.功能描述
1. 组件的主要目的是展示合作，广告等用户希望跳转的链接
2. 组件可以是简洁，大气等不同风格
* * * * *
## 三.代码规范
* 1.模板最外层容器加入 class=**"h5c_zj_linkOuter"**，图片型友情链接同时加入 class=**"linkOuter_Img"**。（识别为友情链接组件）
* 2.每个模块必须在同一个**.row**或者一个容器里，例：**`<div>，<li>`**。
* 3.代码需每个模块DOM结构必须相同且每个模块最外层容器添加 **data-linkOuterMark="this"**。
* 4.每个a标签href属性默认为 **javascript:void(0);**
* 5.每个a标签添加**target="\_blank"**。
* 6.每个a标签里文字必须嵌套**`<span>`**标签。
* 7.`<span>`标签里所有文字统一为：**链接名称**。
* 8.每个a标签添加css样式 **display : block;**。
* 9.友情链接组则每个模块必须相同！包括文字大小，颜色，对齐方式，等。图片同理。CSS样式同理，包括边框，底色，padding,magin等。
* 10.友情连接全是图片组件，图片需要增加onerror事件
* * * * *
## 四.代码示例
>完整的一个DOM如下所示（**纯文字**）
~~~
<div class="h5c_zj_linkOuter">//**规范1所示**
<div class="row">//**规范2所示**
//以下一个div就是一个“模块”
<div data-linkOuterMark="this">//**规范3，9所示**
<a href="javascript:void(0)" target="_blank"><span>链接名称</span></a>//**规范4，5，6，7所示**
<a href="javascript:void(0)" target="_blank"><span>链接名称</span></a>//**规范4，5，6，7所示**
<a href="javascript:void(0)" target="_blank"><span>链接名称</span></a>//**规范4，5，6，7所示**
</div>//**规范9所示**
//以下一个div也是一个“模块”，此示例由俩个模块组成
<div data-linkOuterMark="this">//**规范3，9所示**
<a href="javascript:void(0)" target="_blank"><span>链接名称</span></a>
<a href="javascript:void(0)" target="_blank"><span>链接名称</span></a>
<a href="javascript:void(0)" target="_blank"><span>链接名称</span></a>
</div>//**规范9所示**
</div>
</div>
~~~
>完整的一个DOM如下所示（**纯图片**）
~~~
<div class="h5c_zj_linkOuter linkOuter_Img">//**规范1所示**
<div class="row" >//**规范2所示**
//以下一个div就是一个“模块”
<div data-linkOuterMark="this">//**规范3，9所示**
<a href="javascript:void(0)" ><img onerror="javascript:this.src=1.jpg'" src="1.jpg" /></a>//**规范4，5，10所示**
<a href="javascript:void(0)" target="_blank"><div class="xxy_mask"></div></a>//**规范4，5，10所示**
</div>//**规范3，9所示**
//以下一个div也是一个“模块”，此示例由三个模块组成
<div data-linkOuterMark="this">
<a href="javascript:void(0)" ><img onerror="javascript:this.src=2.jpg'" src="2.jpg" /></a>
<a href="javascript:void(0)" target="_blank"><div class="xxy_mask"></div></a>
</div>
<div data-linkOuterMark="this">
<a href="javascript:void(0)" ><img onerror="javascript:this.src=3.jpg'" src="3.jpg" /></a>
<a href="javascript:void(0)" target="_blank"><div class="xxy_mask"></div></a>
</div>
</div>
</div>
~~~
>[danger] 此图片友情链接在图片层级上有一层定位DIV，DIV宽高等同于图片，图片被遮住，此时同样需要给定位DIV增加`<a>`标签。`<a>`标签遵守友情链接规范。
* * * * *
## 五.补充说明
* 符合规范组件嗨创提供：
* 友情链接组件中a连接地址由用户在嗨创平台中编辑
* 友情链接组件内所有模块均可删除
* 友情链接组件内所有模块均可任意拖拽换位置
* 友情链接组件内模块可以增加
