## 一. 組件詳解
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連接地址由用戶在嗨創平臺中編輯
* 友情鏈接組件內所有模塊均可刪除
* 友情鏈接組件內所有模塊均可任意拖拽換位置
* 友情鏈接組件內模塊可以增加
