## 一. 組件詳解
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.調整高度
