给网站添加一个好看的文字广告代码 - Kirin博客

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

作者: Bee

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

标签:

代码

特别声明:部分文章为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系站长!请勿违法!本站文章仅供学习了解!技术无罪!

今天站长也是弄了一个文字广告来维持一下生活,有条件的大哥们可以来支持一下,我把代码分享一下,效果你们自己看首页就好了。背景可以设置渐变颜色,可以自己修改。

html代码:

  1. <!--首页文字广告-->
  2. <div class="text-gg">
  3. <a target="_blank" href="http://www.dufengvip.cn">
  4. <div>
  5. <p>广告招租3RMB</p>
  6. <p>点击访问</p>
  7. </div>
  8. </a>
  9. <a target="_blank" href="javascript:;">
  10. <div>
  11. <p>广告招租3RMB</p>
  12. <p>点击访问</p>
  13. </div>
  14. </a>
  15. <a target="_blank" href="javascript:;">
  16. <div>
  17. <p>广告招租3RMB</p>
  18. <p>点击访问</p>
  19. </div>
  20. </a>
  21. <a target="_blank" href="javascript:;">
  22. <div>
  23. <p>广告招租3RMB</p>
  24. <p>点击访问</p>
  25. </div>
  26. </a>
  27. <a target="_blank" href="javascript:;">
  28. <div>
  29. <p>广告招租3RMB</p>
  30. <p>点击访问</p>
  31. </div>
  32. </a>
  33. <a target="_blank" href="javascript:;">
  34. <div>
  35. <p>广告招租3RMB</p>
  36. <p>点击咨询</p>
  37. </div>
  38. </a>
  39. <a target="_blank" href="javascript:;">
  40. <div>
  41. <p>广告招租3RMB</p>
  42. <p>点击咨询</p>
  43. </div>
  44. </a>
  45. <a target="_blank" href="javascript:;">
  46. <div>
  47. <p>广告招租3RMB</p>
  48. <p>点击咨询</p>
  49. </div>
  50. </a>
  51. <a target="_blank" href="javascript:;">
  52. <div>
  53. <p>广告招租3RMB</p>
  54. <p>点击咨询</p>
  55. </div>
  56. </a>
  57. <a target="_blank" href="javascript:;">
  58. <div>
  59. <p>广告招租3RMB</p>
  60. <p>点击咨询</p>
  61. </div>
  62. </a>
  63. </div>
css代码:
	
  1. .text-gg{/*文字广告*/
  2. width: 100%;
  3. overflow: hidden;
  4. display: flex;
  5. flex-wrap: wrap;
  6. border-radius:10px;
  7. }
  8. .text-gg a{
  9. color: rgba(0,0,0,.6);
  10. font-size: 14px;
  11. font-weight: bold;
  12. line-height: 30px;
  13. text-align: center;
  14. text-decoration: none;
  15. display: block;
  16. width: 20%;
  17. height: 30px;
  18. overflow: hidden;
  19. position: relative;
  20. margin: 1px 0;
  21. }
  22. .text-gg a div{
  23. width: 100%;
  24. height: 60px;
  25. padding: 1px;
  26. box-sizing: border-box;
  27. position: absolute;
  28. top: 0;
  29. left: 0;
  30. transition: all .2s;
  31. }
  32. .text-gg a:hover div{
  33. transition: all .3s;
  34. color: #fff;
  35. top: -40px;
  36. text-shadow: 0 2px 3px rgba(0,0,0,.6);
  37. }
  38. .text-gg a div :nth-child(1){
  39. background: linear-gradient(to right,#ffc0cb, #fff,#ffc0cb);
  40. }
  41. .text-gg a div :nth-child(2){
  42. background: linear-gradient(to right,#aedefc,#b4b4ff);
  43. }
代码放到网站头部就可以使用了,css你可以写入全局加载里面,也可以直接写在头部,不过要加一个<style>标签
本文最后更新于2020-12-26,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!
分享到:
加入交流群
未经允许不得转载:

作者: Bee, 转载或复制请以 超链接形式 并注明出处 Kirin博客
原文地址: 《给网站添加一个好看的文字广告代码》 发布于2020-12-26

切换注册

登录

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

切换登录

注册

觉得文章有用就加入交流群吧

QQ扫一扫