B2主题柒比贰主题美化Html引导卡片,底部客服引导样式。
效果如图:
使用方法:首页新建广告位模块,将代码直接复制进去即可!
<!-- 版本:1.2 更新:2020.02.18 --> <section class="buy-container"> <div class="buy-box"> <div class="slogan"> <h3>几分钟,让您属于自己的站点</h3> <p>发现优质源码,路人丁网欢迎您的加入!</p> </div> <ul class="actions"> <li> <a href="https://jq.qq.com/?_wv=1027&k=50y0L7A" target="_blank" class="buy-button primary" rel="noopener noreferrer">主题咨询</a> </li> <li> <a href="https://www.dungei.com/vips" target="_blank" class="demo-button" rel="noopener noreferrer">成为会员</a> </li> </ul> </div> <span class="tips">如果点击咨询购买按钮无法唤起QQ(请注明主题咨询)</span> </section> <style type="text/css"> .buy-container { color: #ccc; padding: 60px 40px 50px 40px; margin: 0 auto; background: rgb(224,32,140); /*下述两行代码为兼容浏览器用,建议同步修改,亦可删除(不建议)*/ background: -moz-linear-gradient(left, rgb(224,32,140) 0%, rgb(250,100,0) 100%); background: -webkit-linear-gradient(left, rgb(224,32,140) 0%,rgb(250,100,0) 100%); /*请更改此行代码,颜色为rgb模式*/ background: linear-gradient(to right, rgb(224,32,140) 0%, rgb(250,100,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0208c', endColorstr='#fa6400',GradientType=1 ); -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; } .buy-container .buy-box { display: -webkit-box; display: flex; -webkit-box-pack: justify; justify-content: space-between; -webkit-box-align: center; align-items: center; max-width: 900px; margin: 0 auto; } @media screen and (max-width: 700px) { .buy-container .buy-box { display: block; text-align: center; } .buy-container .buy-box .slogan { margin-bottom: 30px; } } .buy-container .buy-box .slogan h3 { color: #fff; font-size: 26px; margin: 0 0 10px 0; } @media screen and (max-width: 800px) { .buy-container .buy-box .slogan h3 { font-size: 24px; } } @media screen and (max-width: 500px) { .buy-container .buy-box .slogan h3 { font-size: 20px; } } @media screen and (max-width: 400px) { .buy-container .buy-box .slogan h3 { font-size: 18px; } } .buy-container .buy-box .slogan p { color: #fff; font-size: 14px; font-weight: bold; margin: 10px 0; } .buy-container .buy-box .actions { display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; list-style-type: none; margin: 0; padding: 0; } @media screen and (max-width: 700px) { .buy-container .buy-box .actions { -webkit-box-pack: justify; justify-content: center; } } .buy-container .buy-box .actions li { margin: 0; } .buy-container .buy-box .actions li:last-child { margin-left: 10px; } .buy-container .buy-box .actions li a { position: relative; color: #fff !important; font-size: 14px; font-weight: bold; line-height: 1; text-decoration: none; padding: 10px 20px; background-color: rgba(255, 255, 255, .1); -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; -webkit-transition: .2s; -moz-transition: .2s; -o-transition: .2s; transition: .2s; } .buy-container .buy-box .actions li a:hover { -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); -webkit-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2); -moz-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2); -o-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2); box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2); opacity: 1 !important; } @media screen and (max-width: 330px) { .buy-container .buy-box .actions li a { font-size: 12px; } } .buy-container .buy-box .actions li a:not(.primary):before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-box-shadow: inset 0 0 0 1px currentColor; -moz-box-shadow: inset 0 0 0 1px currentColor; -o-box-shadow: inset 0 0 0 1px currentColor; box-shadow: inset 0 0 0 1px currentColor; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; -khtml-opacity: .3; -moz-opacity: .3; opacity: .3; } .buy-container .buy-box .actions li a:after { display: none; } .buy-container .buy-box .actions li a.primary { color: #ff3b30 !important; background-color: #fff; } .buy-container .tips { border-top: 1px solid rgba(255, 255, 255, .1); display: block; color: #fff; font-size: 12px; text-align: center; max-width: 900px; margin: 30px auto 0 auto; padding-top: 30px; } </style>