飞六网

 找回密码
 飞六网用户注册邮箱验证
搜索
热搜: 系统 工具
查看: 170|回复: 0

分享最简单的打赏代码

[复制链接]

452

主题

467

帖子

1775

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1775
发表于 2019-8-21 08:20:49 | 显示全部楼层 |阅读模式
[飞六网]-[网站建设]:网络打赏很流行,很多网友想在网站加入微信或支付宝打赏,这里给大家分享最简单的打赏代码直接复制代码加入要显示的页面即可!
  1. <STYLE type="text/css">

  2. *,*:before,*:after {
  3.          -webkit-box-sizing: border-box;
  4.          -moz-box-sizing: border-box;
  5.          -ms-box-sizing: border-box;
  6.          box-sizing: border-box
  7. }

  8. .reward {
  9.          padding: 5px 0
  10. }

  11. .reward .reward-notice {
  12.          font-size: 14px;
  13.          line-height: 14px;
  14.          margin: 15px auto;
  15.          text-align: center
  16. }

  17. .reward .reward-button {
  18.          font-size: 28px;
  19.          line-height: 58px;
  20.          position: relative;
  21.          display: block;
  22.          width: 60px;
  23.          height: 60px;
  24.          margin: 0 auto;
  25.          padding: 0;
  26.          -webkit-user-select: none;
  27.          text-align: center;
  28.          vertical-align: middle;
  29.          color: #fff;
  30.          border: 1px solid #f1b60e;
  31.          border-radius: 50%;
  32.          background: #fccd60;
  33.          background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#fccd60),color-stop(100%,#fbae12),color-stop(100%,#2989d8),color-stop(100%,#207cca));
  34.          background: -webkit-linear-gradient(top,#fccd60 0,#fbae12 100%,#2989d8 100%,#207cca 100%);
  35.          background: linear-gradient(to bottom,#fccd60 0,#fbae12 100%,#2989d8 100%,#207cca 100%)
  36. }

  37. .reward .reward-code {
  38.          position: absolute;
  39.          top: -220px;
  40.          left: 50%;
  41.          display: none;
  42.          width: 350px;
  43.          height: 200px;
  44.          margin-left: -175px;
  45.          padding: 15px;
  46.          border: 1px solid #e6e6e6;
  47.          background: #fff;
  48.          box-shadow: 0 1px 1px 1px #efefef;
  49.          
  50. }

  51. .reward .reward-button:hover .reward-code {
  52.          display: block
  53. }

  54. .reward .reward-code span {
  55.          display: inline-block;
  56.          width: 150px;
  57.          height: 150px
  58. }

  59. .reward .reward-code span.alipay-code {
  60.          float: left
  61. }

  62. .reward .reward-code span.alipay-code a {
  63.          padding: 0
  64. }

  65. .reward .reward-code span.wechat-code {
  66.          float: right
  67. }

  68. .reward .reward-code img {
  69.          display: inline-block;
  70.          float: left;
  71.          width: 150px;
  72.          height: 150px;
  73.          margin: 0 auto;
  74.          border: 0
  75. }

  76. .reward .reward-code b {
  77.          font-size: 14px;
  78.          line-height: 26px;
  79.          display: block;
  80.          margin: 0;
  81.          text-align: center;
  82.          color: #666
  83. }

  84. .reward .reward-code b.notice {
  85.          line-height: 2rem;
  86.          margin-top: -1rem;
  87.          color: #999
  88. }

  89. .reward .reward-code:after,.reward .reward-code:before {
  90.          position: absolute;
  91.          content: '';
  92.          border: 10px solid transparent
  93. }

  94. .reward .reward-code:after {
  95.          bottom: -19px;
  96.          left: 50%;
  97.          margin-left: -10px;
  98.          border-top-color: #fff
  99. }

  100. .reward .reward-code:before {
  101.          bottom: -20px;
  102.          left: 50%;
  103.          margin-left: -10px;
  104.          border-top-color: #e6e6e6
  105. }

  106. </STYLE>

  107. <!DOCTYPE html>
  108. <html>
  109. <head>
  110. <meta charset="utf-8">
  111. <title>飞六网打赏代码</title>

  112. </head>
  113. <body>
  114. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  115. <div class="reward">
  116.          <div class="reward-button">赏 <span class="reward-code">
  117.                  <span class="alipay-code"> <img class="alipay-img wdp-appear" src="http://www.fly666.com/dashang/img/alipayimg.jpg"><b>支付宝打赏</b></span>
  118.                  <span class="wechat-code"> <img class="wechat-img wdp-appear" src="http://www.fly666.com/dashang/img/weipayimg.jpg"><b>微信打赏</b> </span> </span>
  119.          </div>
  120.          </div>
  121. </body>
  122. </html>
复制代码
回复

使用道具 举报

本版积分规则

Archiver|手机版|小黑屋|飞六网 ( 粤ICP备12045999号 )

GMT+8, 2019-11-22 15:44 , Processed in 0.101584 second(s), 20 queries .

Powered by Discuz! X3

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表