## 一. 组件详解
1. 类footer组件，一般放在网页的底部，版权的上边。一般包括公司的一些常用信息，例如：公司电话，地址，公司邮箱等等。
2. 类footer是长条布局，其宽度与浏览器宽度相同，所以，类footer组件已模块规范相重叠。在阐述类footer组件的同时，会提到相关模块的一些规范。
3. 示例：
> 
* * * * *
## 二.功能描述
1. 方便用户集中修改公司的信息。
2. 美化页面。
* * * * *
## 三.代码规范
* 1.在该组件上添加 data-type=“banner”属性，标识这是一个横幅组件
* 2.**类footer组件是长条形布局的**，因此横幅组件同时也是一个模块。该组件的id 与class 应该同时遵循模块标准的定义 （id=“h5c_m_随机数”，class="h5c_name_随机数"，其组件的css必须含有position:relative，说明：name 是作者名字的简写，随机数去嗨创官网获取）。
* 3.其中文字部分应遵循**文字规范**（文字部分需添加data-effect="edit"属性）。
* 4.其中图片部分应添加**图片规范**（图片添加data-type="img"，onerror属性）。
* 5.应支持响应式布局（**建议用bootstrap**）。
* 6.其代码的简写如下：
> 
* * * * *
## 四.代码示例
#### 应用场景一：
* 代码：
~~~
<div style="background-color:#555555;padding: 20px 0 25px 0;" class="h5c_aXrKSJwixVaxx" data-type="likefooter"> //**规范1，规范2***
<style> //***模块中关于css描述***
.h5c_aXrKSJwixVaxx div.row h3 {
color: #fff;
font-family: "Bubblegum Sans",cursive;
}
.h5c_aXrKSJwixVaxx div.row p {
letter-spacing: 1px;
color: #fff;
padding: 5px 0;
}
.h5c_aXrKSJwixVaxx .send{
color: #000;
margin-top: 3%;
background-color: #fff;
border: 1px solid transparent;
cursor: pointer;
}
.h5c_aXrKSJwixVaxx .send:hover{
color: #fff;
background-color: transparent;
transition:all 0.4s ease-in-out;
border: 1px solid #fff;
}
</style>
<div class="container"> //***其他代码部分***
<div class="row" style="margin: 0;">
<div class="col-xs-12 col-md-6" style="margin: 0;padding: 0;">
<div class="col-xs-12 col-sm-6 col-md-6">
<h3 data-effect="edit">关注我们</h3> //***文字通用规范***
<img data-type="img" src="/diy/asyn.file/jsb/module/likefooter/likefooter-2/img/idnex-5.png" onerror="javascript:this.src='/diy/asyn.file/jsb/module/likefooter/likefooter-2/img/idnex-5.png'" class="img-responsive" alt=""/> //***图片通用规范***
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<h3 data-effect="edit">联系我们</h3>
<p style="" data-effect="edit">地址：北京市朝阳区建国路88号soho现代城25层</p>
<p data-effect="edit">邮箱：admin@0c0.com</p>
<p data-effect="edit">公众号： html5c</p>
</div>
</div>
<div class="col-xs-12 col-md-6" style="margin: 0;padding: 0;">
<div class="col-xs-12 col-sm-6 col-md-6">
<h3 data-effect="edit" >关于我们</h3>
<p style="padding-right: 3%;" data-effect="edit">1.符合潮流的H5技术和设计方式，逼格高、颜值高、跨多屏，令人眼前一亮。</p>
<p style="padding-right: 2%;" data-effect="edit">2.PC、Pad、手机多终端访问，同一网址可自动推送适应屏幕大小的网页。</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<h3 data-effect="edit">发送邮件</h3>
<input type="text" value="Email Address" class="col-xs-10" style="outline: none;border:1px solid #fff; padding:4% 20px;height: 40px;color: rgba(255,255,255,1);background:transparent;-webkit-appearance: none;">
<div class="col-xs-10 send" style="font-size:1.8vh;font-weight:700;text-align:center;padding:2% 18px;" data-effect="edit">
seed
</div>
</div>
</div>
</div>
</div>
</div>
~~~
* 效果：
> 
* * * * *
## 五.补充说明
按照规范开发的组件，嗨创将会为其提供以下功能
1.修改背影图
2.添加特效
3.修改文字
4.更换图片
5.调整高度
