## 一. 组件详解
1. 版权组件一般出现在footer中,网站的最后。
2. 版权组件由英文和中文部分组成,以英文部分声明为主。
3. 版权组建示例:
> ![](https://box.kancloud.cn/c10276ce5c54d896200eb2e6ab80c140_847x245.png)
* * * * *
## 二.功能描述
1. 声明网站的版权。
* * * * *
## 三.代码规范
* 1.版权组件用data-type="copyright"标识。
* 2.版权组件英文部分用data-type="copy-usa"标识。
* 3.版权组件中文部分用data-type="copy-china"标识。
* 4.dom结构如下:
~~~
<p data-type="copyright">
<span data-type="copy-usa">Copyright ©2013-2016 h5create.com. All Rights Reserved.</span>
<span data-type="copy-china">嗨创版权所有</span>
</p>
~~~
* 5.规范图解:
> ![](https://box.kancloud.cn/05dff6e85ce16ba14c9ffaa6818f6c70_935x109.png)
* * * * *
## 四.代码示例
#### 应用场景一:
* 代码:
~~~
<footer style="background-color: #000;">
<ul style="text-align: center;padding: 60px 0 30px 0;margin-bottom: 0;">
<li style="display: inline-block;margin: 10px 30px;"><img src="/diy/asyn.file/jsb/module/copyright/copyright-1/img//QQ.png" class="img-responsive" style="display: inline-block;margin-right: 15px;" alt=""/><span data-effect="edit" style="color: #fff;">QQ</span></li>
<li style="display: inline-block;margin: 10px 30px;"><img src="/diy/asyn.file/jsb/module/copyright/copyright-1/img/weixin.png" class="img-responsive" style="display: inline-block;margin-right: 15px;" alt=""/><span data-effect="edit" style="color: #fff;">微信</span></li>
<li style="display: inline-block;margin: 10px 30px;"><img src="/diy/asyn.file/jsb/module/copyright/copyright-1/img/weibo.png" class="img-responsive" style="display: inline-block;margin-right: 15px;" alt=""/><span data-effect="edit" style="color: #fff;">微博</span></li>
<li style="display: inline-block;margin: 10px 30px;"><img src="/diy/asyn.file/jsb/module/copyright/copyright-1/img/renren.png" class="img-responsive" style="display: inline-block;margin-right: 15px;" alt=""/><span data-effect="edit" style="color: #fff;">人人</span></li>
<li style="display: inline-block;margin: 10px 30px;"><img src="/diy/asyn.file/jsb/module/copyright/copyright-1/img/facebook.png" class="img-responsive" style="display: inline-block;margin-right: 15px;" alt=""/><span data-effect="edit" style="color: #fff;">Facebook</span></li>
</ul>
/**************以下是版权组件***********/
<p class="text-center" style="color: #fff;padding: 0 10px 30px 10px;margin: 0;" data-type="copyright">
<span data-type="copy-usa">Copyright ©2013-2016 h5create.com. All Rights Reserved.</span>
<span data-type="copy-china" style="" >嗨创 版权所有</span>
</p>
/************以上是版权组件*************/
</footer>
~~~
* 效果:
> ![](https://box.kancloud.cn/2ee8e51abef247989b19cf54645e580d_1363x180.png)
* * * * *
## 五.补充说明
按照规范开发的组件,嗨创将会为其提供以下功能
1.分别编辑中文和英文版权信息
2.为该网站所有页面统一替换版权信息
3.更换版权时,信息可同步已经编好的信息