给网站添加一个好看的文字广告 - 旺仔先森博客

给网站添加一个好看的文字广告

作者: 旺仔

全网最全的网络资源分享网站

手机扫码查看

标签:

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系wangzaibk@qq.com!

分享

今天本站也是弄了一个文字广告来维持一下生活,有条件的大哥们可以支持一下,我把代码分享一下,效果你们自己看首页就好了。

背景可以设置渐变颜色,可以自己修改。

给网站添加一个好看的文字广告

html代码

 <!--首页文字广告-->        <div class="text-gg">    <a target="_blank" href="https://www.v6g.cn"> <div> <p>广告招租3RMB</p> <p>点击访问</p> </div> </a> <a target="_blank" href="javascript:;"> <div> <p>广告招租3RMB</p> <p>点击访问</p> </div> </a> <a target="_blank" href="javascript:;"> <div> <p>广告招租3RMB</p> <p>点击访问</p> </div> </a> <a target="_blank" href="javascript:;"> <div> <p>广告招租3RMB</p> <p>点击访问</p> </div> </a> <a target="_blank" href="javascript:;"> <div> <p>广告招租3RMB</p> <p>点击访问</p> </div> </a> <a target="_blank" href="javascript:;"> <div> <p>广告招租3RMB</p> <p>点击咨询</p> </div> </a> <a target="_blank" href="javascript:;"> <div> <p>广告招租3RMB</p> <p>点击咨询</p> </div> </a> <a target="_blank" href="javascript:;"> <div> <p>广告招租3RMB</p> <p>点击咨询</p> </div> </a> <a target="_blank" href="javascript:;"> <div> <p>广告招租3RMB</p> <p>点击咨询</p> </div> </a> <a target="_blank" href="javascript:;"> <div> <p>广告招租3RMB</p> <p>点击咨询</p> </div> </a></div>

css代码

.text-gg{/*文字广告*/ width: 100%; overflow: hidden; display: flex; flex-wrap: wrap; border-radius:10px; } .text-gg a{ color: rgba(0,0,0,.6); font-size: 14px; font-weight: bold; line-height: 30px; text-align: center; text-decoration: none; display: block; width: 20%; height: 30px; overflow: hidden; position: relative; margin: 1px 0; } .text-gg a div{ width: 100%; height: 60px; padding: 1px; box-sizing: border-box; position: absolute; top: 0; left: 0; transition: all .2s; } .text-gg a:hover div{ transition: all .3s; color: #fff; top: -40px; text-shadow: 0 2px 3px rgba(0,0,0,.6); } .text-gg a div :nth-child(1){     background: linear-gradient(to right,#ffc0cb, #fff,#ffc0cb); } .text-gg a div :nth-child(2){     background: linear-gradient(to right,#aedefc,#b4b4ff); }

代码放到网站头部就可以使用了,css你可以写入全局加载里面,也可以直接写在头部,不过要加一个<style>tag

分享到:
打赏

本站开启投稿功能注册账号即可投稿


文章版权信息

阅读时间:  发布于:2020-11-26

本文标题:给网站添加一个好看的文字广告

本文链接:http://52ooooo.com/post-737.html

版权声明:文章为《 旺仔》原创,转载请保留出处!

标签:

相关推荐

评论

切换注册

登录

您也可以使用第三方帐号快捷登录

切换登录

注册

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

Sitemap    58.11ms1505
网站代码 给网站添加一个好看的文字广告
今天本站也是弄了一个文字广告...
扫描二维码阅读原文
旺仔先森博客 January, 01
初始化 ×