## 一. 組件詳解
1. 最完整的新聞組件含有：標題，簡介，縮略圖，時間。
2. 新聞組件可以標題，簡介，縮略圖，時間中的一個或者倆個組合
3. 新聞組按模塊劃分，每個模塊中標題，縮略圖，簡介組合完全相同【四.代碼示例詳解"模塊"】
4. 圖片組html布局基于Bootstrap柵格布局,每個模塊里最外層容器一定要有`col-xx-xx`class來自適應手機端
5. 組件中縮略圖后臺輸出比例為4：3，html模版中盡量滿足此比例，可以相似不用完全精確4：3
6. 示例：
>縮略圖與標題組合的新聞組 
> 完整的新聞組建
* * * * *
## 二.功能描述
1. 組件的主要目的是將用戶上傳的新聞，文章，報告，用不同風格展示出來
2. 美化頁面
* * * * *
## 三.代碼規范
* 1.最外層容器加入class=**"h5c_zj_newsGroup"**空類別，JS按鈕定位識別使用。
* 2.每個模塊DOM結構必須相同且每個模塊里最外層容器添加 **data-newsGroupMark="this"**,并且此層一定要有CSS樣式position:relative。
* 3.每個標題，簡介，圖片。都要在外層嵌套**a**標簽。
* 4.a標簽鏈接為**javascript:void(0)**, 并且添加a標簽屬性 **target="\_blank”**。
* 5.簡介a標簽添加**data-newsGroup="introduces"**，**data-newsGroupIntroducesNumber="50”** (數字為簡介的字數)，簡介的a標簽添加 **text-decoration:none; word-break:break-word**; css屬性。
* 6.如果模板有時間顯示，不用在**時間**外層嵌套**a**標簽，只用嵌套**span**標簽，但是請留夠橫向距離，輸出時間格式為：**年月日時分秒**。 **span**帶上**data-newsGroup="time”**屬性。
* 7.圖片外a標簽添加**data-newsGroup="img”** 。
* 8.標題a標簽添加**data-newsGroup="title"**。（字數不要太多，后臺獲取輸出后只顯示10個字，其他都被 .... 代替。）
* 9.**新聞組則每塊必須相同**包括文字大小，顏色，對齊方式，等。圖片同理。CSS樣式同理，包括邊框，底色，padding,magin等。且包含在同一個.row或者div或者其他容器里。
* * * * *
## 四.代碼示例
>完整的一個DOM如下所示
~~~
<div class="h5c_zj_newsGroup">//**規范1所示**
<ul class="row">//**規范9所示**
//以下一個li為一個新聞組“模塊”
<li data-newsGroupMark="this" class="col-xs-12">//**規范2所示**
<ul>
<li>
<a target="_blank" href="javascript:void(0)" data-newsGroup="introduces" data-newsGroupIntroducesNumber="48">//**規范3,4,5所示**
這里填寫新聞內容簡介里填寫新聞內容簡介這里填寫新聞內容簡介里填寫新聞內容簡介這里填寫新聞內容簡介
</a>//**規范3,4,5所示**
</li>
<li>
<span data-newsGroup="time">//**規范6所示**
2014 年 11 月 30 日
</span>
</li>
</ul>
<div>
<a target="_blank" href="javascript:void(0)" data-newsgroup="img">//**規范7所示**
<img src="xx/pic.jpg"/>
</a>
</div>
<a target="_blank" href="javascript:void(0)" data-newsgroup="title"></a>//**規范8所示**
</li>
//以下一個li為一個新聞組“模塊”,示例由倆個相同“模塊”組成
<li data-newsGroupMark="this" class="col-xs-12">
<ul>
<li>
<a target="_blank" href="javascript:void(0)" data-newsGroup="introduces" data-newsGroupIntroducesNumber="48">
這里填寫新聞內容簡介這里填寫新聞內容簡介里填寫新聞內容簡介這里填寫新聞內容簡介里填寫新聞內容簡介這
</a>
</li>
<li>
<span data-newsGroup="time">
2014 年 11 月 30 日
</span>
</li>
</ul>
<div>
<a target="_blank" href="javascript:void(0)" data-newsgroup="img">
<img src="xx/pic.jpg"/>
</a>
</div>
<a target="_blank" href="javascript:void(0)" data-newsgroup="title"></a>
</li>
</ul>
</div>
~~~
* * * * *
## 五.補充說明
* 符合規范組件嗨創提供：
* 新聞內容用戶編輯后，組件拖拽到頁面內容自動加載
* 新聞組建內所有模塊均可刪除
* 新聞組建內所有模塊均可任意拖拽換位置
* 模版示例：
* 
* 
