CSS技巧:一段CSS代码让你的广告位“立起来”

投稿   雅兮网  2018-05-22 07:36:57  236 人阅读  28 条评论

很多网站上都会投放广告,但一般情况下广告都不那么“好看”,如果我们对广告位稍微进行美化,说不定能出人意料呢。今天就跟大家分享一段 CSS 代码让你的广告位“立起来”。

广告对于网站来说一直是一把双刃剑,既能给网站带来利益又很有可能影响用户体验,特别是广告联盟,你永远不知道下一个广告会是什么内容。有时候我们稍微对广告模块就行美化,在一定程度上能够增色不少。

比如飞鸟就对一个 336*280px 大小的矩形广告进行了调整,给它增加了一个投影的效果,就好像它立了起来,有种立体的感觉,如下图所示:

CSS技巧:一段CSS代码让你的广告位“立起来” 海纳百川 第1张

怎么做到的呢?其实也就是一段 CSS 的功夫。先确定下 html 结构,在你的广告 div 盒子里增加一个 class 为 ad-shadow 的 div 区块

  1. <div class="ad-warp">
  2. <div class="ad-shadow"></div>
  3. <!-- 这里是广告内容,或图片或 js 代码 -->
  4. </div>

然后加入 css 代码

  1. .ad-warp {
  2. margin20px auto;
  3. width346px;
  4. height290px;
  5. positionrelative;
  6. border5px solid #d2d2d2;
  7. -webkit-box-sizing: border-box;
  8. -moz-box-sizing: border-box;
  9. box-sizing: border-box;
  10. }
  11. .ad-shadow {
  12. border-color#e9e9e9 #fff #fff;
  13. border-stylesolid;
  14. border-width130px 0 0 130px;
  15. height: 0;
  16. width: 0;
  17. positionabsolute;
  18. left: -135px;
  19. bottombottom: -5px;
  20. }

本文是以一个 336*280px 的矩形广告为例,你可以根据你的广告尺寸来调整 css 中的代码。

主要原理还是利用 css 常见的 border 属性,通过设置其上下左右的尺寸和颜色来达到透视的效果,本文就不赘述了,有兴趣研究的朋友可以自行百度 border 样式。

至于好不好看,这个仁者见仁了,飞鸟只是本着分享的态度写出来。当然不仅仅是只能用于广告,其他的版块也可以使用这种 CSS 方法,看你怎么用了~

历史上的今天:

如果文章对你有帮助,请赞赏支持作者继续创作!

文章标签: ,   ,   ,  
原文地址:https://www.yaxi.net/2018-05-17/1799.html
温馨提示:文章内容仅代表作者个人观点,不代表boke112导航赞同其观点和对其真实性负责!
版权声明:本文为投稿文章,感谢 雅兮网 的投稿,版权归原作者所有,欢迎分享本文,转载请保留出处!
雅兮网

相关文章 分类热门分类热评最新问答

 发表评论

中国赞表情摊手表情吃瓜表情笑哭表情偷笑表情衰表情汗表情思考表情费解表情抓狂表情晕表情流泪表情疑问表情嘻嘻表情吃惊表情鼓掌表情

  1. 宋子宪博客
    宋子宪博客 @回复

    不错 [赞]

  2. 80后记忆
    80后记忆 @回复

    折腾累了,还是简单点好。

  3. w4ctech
    w4ctech @回复

    脑洞真大。

  4. 曹操吉祥三宝
    曹操吉祥三宝 @回复

    这个出乎人意料了

  5. 九叶子
    九叶子 @回复

    支持一下,博客非常好

  6. 大事记
    大事记 @回复

    很赞,这个非常使用啊。

  7. 邮票目录
    邮票目录 @回复

    这个技巧才知道,不错

  8. 善记事博客
    善记事博客 @回复

    弱弱问下,改成这样广告点击率有增加吗

  9. 清秋暖冬
    清秋暖冬 @回复

    好玩,等博客恢复以后尝试一下

  10. 闲鱼
    闲鱼 @回复

    雅兮大佬好会玩,赞赞

  11. 呆毛网
    呆毛网 @回复

    [嘻嘻] 酷炫就是不得了。

  12. 网站建设
    网站建设 @回复

    真个有用,我试试看

  13. 明月登楼
    明月登楼 @回复

    呵呵,广告会看着很炫酷!

  14. 青山
    青山 @回复

    会代码就是厉害

  15. 优文库
    优文库 @回复

    我又来了,这篇文章不错。

  16. 官仁博客
    官仁博客 @回复

    好看,但是感觉没多大用

  17. 靠谱学生兼职网
    靠谱学生兼职网 @回复

    好玩,但还是不要折腾这个了

  18. 趣知识
    趣知识 @回复

    这个有点意思

  19. 我就爱旅游
    我就爱旅游 @回复

    不错的特效,不只可以用在广告上,其他很多小模块也可以用

  20. 手机赚钱
    手机赚钱 @回复

    代码玩的6

  21. 里维斯社
    里维斯社 @回复

    会写代码的就是这么炫酷,厉害 [赞]

  22. 心动科技
    心动科技 @回复

    [嘻嘻] 可以收藏了,谢谢分享!

  23. 云顶天的世界
    云顶天的世界 @回复

    然而并没有广告~不过可以用在网站上其他豆腐块形式的内容上~

  24. 沈唁志
    沈唁志 @回复

    好是挺好的 但是广告哪里来 谷歌广告联盟都没加入 [偷笑] [偷笑] [偷笑]

  25. 券都有
    券都有 @回复

    读者一看,恩~这博主有点水平,哈哈

  26. 橙子VIP视频
    橙子VIP视频 @回复

    广告收入是每个站长坚持下来的动力!美化广告让用户忍不住好奇的去点击,从而增加了站长的收益!不过目前很多广告联盟主要以WAP漂浮为主。

  27. 白锌网络
    白锌网络 @回复

    一个广告都弄的这么好看

  28. 银色月航
    银色月航 @回复

    广告位都能搞得这么炫,cooooool~