## 一. 组件详解
1. 网站横幅是整个网站中最重要、最显著的视觉元素，成功的网站开发中，网站横幅的设计开发使用着严格的开发流程和规则。
2. 因为所有横幅都是一个长条形的布局，其宽度与浏览器的宽度相同，所以，横幅组件与横幅**模块的规范**有重叠。我们在阐述横幅组件的同时，会提到相关的模块的一些规范。
3. 示例：
> 
* * * * *
## 二.功能描述
1. 横幅在用户访问页面所停留的7秒钟时间内，高效完成引导用户关注网站主题思想的任务。
* * * * *
## 三.代码规范
* 1.在该组件上添加 data-type=“banner”属性，标识这是一个横幅组件。
* 2.横幅组件是长条形布局的，因此横幅组件同时也是一个模块。该组件应该同时遵循**模块规范** （id=“h5c_m_随机数”，class="h5c_name_随机数"，其组件的css必须含有position:relative，说明：name 是作者名字的简写，随机数去嗨创官网获取）。
* 3.其中文字部分应遵循**文字规范**（文字部分需添加data-effect="edit"属性）。
* 4.其中图片部分应添加**图片规范**（图片添加data-type="img"，onerror属性）。
* 5.应支持响应式布局（**建议用bootstrap**）。
* 6.规范图解：
> 
* * * * *
## 四.代码示例
#### 应用场景一：
* 代码
~~~
<div id="h5c_htmlb_m_news1" class="h5c-htmlb-m-fix" data-type="banner" style="background: url('/diy/asyn.file/jsb/module/banner/banner-3/img/b4.jpg') no-repeat left;background-size: cover;">//**规范1，规范2***
<style> //***模块中关于css描述***
@media (min-width: 993px){
.h5c-htmlb-m-fix-3{
background-attachment: fixed !important;
}
}
</style>
<div class="container">
<div class="row" style="margin: 0;">
<div class="col-xs-12 text-center" style="margin: 20% 0;">
<img src="/diy/asyn.file/jsb/module/banner/banner-3/img/flower1.png" class="img-responsive" alt="" style="display: inline-block;"/> //****img通用规范***
<h2 style="margin:0;color:#fff;font: normal normal normal 50px/1.4em 'eb garamond',serif;letter-spacing: 0.1em;" data-effect="edit">CHARLOTTE McCOY</h2> //***文字通用规范***
<p style="line-height:170%;font: normal normal normal 20px/1.4em raleway,sans-serif;color: #fff;margin: 1% 0 10% 0;box-sizing: border-box;letter-spacing: 0.1em;" data-effect="edit">WEDDING PHOTOGRAPHY</p> //***文字通用规范***
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
~~~
* 效果：
> 
* * * * *
## 五.补充说明
按照规范开发的组件，嗨创将会为其提供以下功能
1.修改背影图
2.添加特效
3.修改文字
4.修改文字
5.调整高度
