很多网站上都会投放广告,但一般情况下广告都不那么“好看”,如果我们对广告位稍微进行美化,说不定能出人意料呢。今天就跟大家分享一段 CSS 代码让你的广告位“立起来”。
广告对于网站来说一直是一把双刃剑,既能给网站带来利益又很有可能影响用户体验,特别是广告联盟,你永远不知道下一个广告会是什么内容。有时候我们稍微对广告模块就行美化,在一定程度上能够增色不少。
比如飞鸟就对一个 336*280px 大小的矩形广告进行了调整,给它增加了一个投影的效果,就好像它立了起来,有种立体的感觉,如下图所示:

怎么做到的呢?其实也就是一段 CSS 代码的功夫。先确定下 html 结构,在你的广告 div 盒子里增加一个 class 为 ad-shadow 的 div 区块
然后加入 css 代码
.ad-warp {
margin: 20px auto;
width: 346px;
height: 290px;
position: relative;
border: 5px solid #d2d2d2;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.ad-shadow {
border-color: #e9e9e9 #fff #fff;
border-style: solid;
border-width: 130px 0 0 130px;
height: 0;
width: 0;
position: absolute;
left: -135px;
bottombottom: -5px;
}
本文是以一个 336*280px 的矩形广告为例,你可以根据你的广告尺寸来调整 css 中的代码。
主要原理还是利用 css 常见的 border 属性,通过设置其上下左右的尺寸和颜色来达到透视的效果,本文就不赘述了,有兴趣研究的朋友可以自行百度 border 样式。
免责声明:
1、网站资源均通过网络等合法渠道获取,该资料仅作为学习交流,其版权归出版社或者原作者所有,下载后请于24小时内删除,如有真实需要请支持正版!因下载本站任何资源造成的损失,全部责任由使用者本人承担!本网站不对所涉及的版权问题负责。网站售卖的价格绝对不是商品价格,而是整理资料的成本。
2、如果你是版权方,认为本文内容对您的权益有所侵犯,请联系博主, 侵删联系 的说明提交相应的证明材料,待博主进行严格地审查后,情况属实的将在三天内将本文删除或修正。
3、博主是利用读书、参考、引用、抄袭、复制和粘贴等多种方式打造成自己资源文章,请原谅博主成为一个文档搬运工!
4、本站虚拟货币充值或数字资源购买后,均不可以任何理由退换!购买前(请慎重考虑)
5、附注:根据二○○二年一月一日《计算机软件保护条例》规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬。
6、数字千年版权法案(DMCA)DT模板网网站接受受版权保护的内容DMCA侵权通知。
联系客服