## 一. 组件详解
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>
~~~
* * * * *
## 五.补充说明
* 符合规范组件嗨创提供：
* 新闻内容用户编辑后，组件拖拽到页面内容自动加载
* 新闻组建内所有模块均可删除
* 新闻组建内所有模块均可任意拖拽换位置
* 模版示例：
* 
* 
