🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
## 一. 组件详解 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.更换版权时,信息可同步已经编好的信息