html广告位代码,一段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;

bottom: -5px;

}

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

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

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

本文最后更新于2018年5月17日，已超过 1 年没有更新，如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢！

html广告位代码,一段CSS代码让你的广告位“立起来”相关推荐

怎么让某段css代码只在Chrome 火狐 edge 浏览器生效
上网查了很多方法到现在ie其实已经没有了,所以都是兼容Edge浏览器(win10自带) 截图这段css代码只在火狐生效,其他不生效然后是谷歌和edge 试了很多种 /*只兼容谷歌*/ @medi ...
Web开发者不容错过的20段CSS代码
1.CSS Resets 网络上关于CSS重置的代码非常多.本段代码是根据Eric Meyer's reset codes进行改编的,里面包含一点响应式图片和所有核心元素的边界框设置,这样就可以保持页 ...
动态太极图html代码,用一个div加一段css代码画一个太极图
[摘要] 在王海达博客看到了这段代码,仅使用一个div和css就画出了一个标准的太极阴阳鱼图. 在王海达博客看到了这段代码,仅使用一个div和css就画出了一个标准的太极阴阳鱼图.看了下代码,发现其利 ...
Web开发者不容错过的20段CSS代码(转)
Web开发技术每年都在革新,浏览器已逐渐支持CSS3特性,并且网站设计师和前端开发者普遍采用这种新技术进行设计与开发.但仍然有一些开发者迷恋着一些CSS2代码. 本文将分享20段非常专业的CSS2/C ...
html如何有立体效果,一段CSS代码让div盒子有立体效果
先上效果图,再来代码: 上图是对一个336*280px大小的矩形进行了调整,给它增加了一个投影的效果,就好像它立了起来,有种立体的感觉,怎么做到的呢?其实也就是一段CSS的功夫.先确定下html结构, ...
html中导航条置顶的代码,一个DIV+CSS代码布局的简单导航条
一个蓝色主题的导航条结构案例,本CSS小实例,采取DIV CSS实现.同时不必图片做靠山,直接运用布景致完成,鼠标经由过程悬停对应栏目称说是对应背景蓝色变深. 导航条一小块成就截图通常导航条接纳ul ...
css常用代码大全,html+css代码
css常用代码大全,html+css代码 html+css可以很方便的进行网页的排版布局,还能减少很多不必要的代码. 一.文本设置 1.font-size: 字号参数 2.font-style: 字 ...
html 文字自动换行代码,自动换行的css代码与方法
自动换行的css教程代码与方法对于div,p等块级元素正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行 html < id= ...
30段超实用CSS代码
上周,研发频道发表了一篇" Web开发者不容错过的20段CSS代码",大家一致觉得很实用.该文是笔者对后30个的翻译,希望对大家有帮助. 1.花式连字符(&) 这个类应该在 ...

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

html广告位代码,一段CSS代码让你的广告位“立起来”相关推荐

最新文章

热门文章