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

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

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

比如对一个 336*280px 大小的矩形广告进行了调整,给它增加了一个投影的效果,就好像它立了起来,有种立体的感觉,如下图所示:
一段CSS代码让你的广告位“立起来”-云模板怎么做到的呢?其实也就是一段 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.     margin: 20px auto;
  3.     width: 346px;
  4.     height: 290px;
  5.     position: relative;
  6.     border: 5px 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-style: solid;
  14.     border-width: 130px 0 0 130px;
  15.     height: 0;
  16.     width: 0;
  17.     position: absolute;
  18.     left: -135px;
  19.     bottombottom: -5px;
  20.     }

本文是以一个 336*280px 的矩形广告为例,你可以根据你的广告尺寸来调整 css 中的代码。主要原理还是利用 css 常见的 border 属性,通过设置其上下左右的尺寸和颜色来达到透视的效果,本文就不赘述了,有兴趣研究的朋友可以自行百度 border 样式。至于好不好看,这个仁者见仁了,只是本着分享的态度写出来。当然不仅仅是只能用于广告,其他的版块也可以使用这种 CSS 方法,看你怎么用了~

原创文章,作者:DavidWu,如若转载,请注明出处:https://www.davidwu.net/archives/97737

WordPress安全防护插件
服务项目 服务内容 收费标准(元)
开发定制 WordPress主题/插件开发定制 (以最终需求为准)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

电子邮件地址不会被公开。 必填项已用*标注

51建站客服微信二维码
点击这里购买