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