-
很多网站上都会投放广告,但一般情况下广告都不那么“好看”,如果我们对广告位稍微进行美化,说不定能出人意料呢。今天就跟大家分享一段 CSS 代码让你的广告位“立起来”。
广告对于网站来说一直是一把双刃剑,既能给网站带来利益又很有可能影响用户体验,特别是广告联盟,你永远不知道下一个广告会是什么内容。有时候我们稍微对广告模块就行美化,在一定程度上能够增色不少。
下面就对一个 336*280px 大小的矩形广告进行了调整,给它增加了一个投影的效果,就好像它立了起来,有种立体的感觉,如下图所示:
怎么做到的呢?其实也就是一段 CSS 的功夫。先确定下 html 结构,在你的广告 div 盒子里增加一个 class 为 ad-shadow 的 div 区块。
<div class="ad-warp"> <div class="ad-shadow"></div> <!-- 这里是广告内容,或图片或 js 代码 --> </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 样式。
至于好不好看,这个仁者见仁了,这里只是本着分享的态度写出来。当然不仅仅是只能用于广告,其他的版块也可以使用这种 CSS 方法,看你怎么用了。
一段CSS代码让你的广告位“立起来”
4754人参与 |分类: 站长百科|时间: 2018年02月08日
相关文章
- 2020-01-10作为站长应该懂得的7大搜索引擎站长平台
- 2019-10-22个人博客网站用什么程序比较好?
- 2019-10-12头条搜索站长平台如何添加网站和sitemap文件?附图文教程
- 2019-09-26PHP环境下是选择Apache和Nginx?
- 2019-09-11网站运维人员必做的7项网站维护工作
- 2019-08-26现在还要必要坚持做PC网站或个人博客吗?
- 2019-08-03宝塔面板+云锁nginx自编译web防护的图文教程
- 2019-07-08解决国内主机服务器 WordPress 后台异常卡顿的问题
- 2019-07-02网站启用SSL自动301跳转到HTTPS教程
- 2019-06-06宝塔/BT面板内存占用MySQL频繁崩溃自动重启方法