仿google adsense广告特效

仿 Google Adsense 广告特效 因为站内上了大量的广告，现对外销售，所以在每个广告的右下角都会留一个链接，链接 指向广告自助投放系统，根据链接地址自动判断广告来源的页面，技术上的问题不多做讨 论，主要说一下仿 Google Adsense 右下角的特效。 Google Adsense 右下角的弹出隐藏效果应该是用 Flash 实现的，不太适合移植和批量使用， 这是个缺点。个人一向喜欢用最少的代码实现最好的效果，所以发挥 DIY 的精神，用 CSS 来实现了这种效果，先看效果再讲代码。 Google Adsense 的效果： 模仿的效果： 下面说一下实现的方法： 1、主要是使用了相对定位和绝对定位，以及 Z-index，使用这三个属性，可以制作层层叠 起的效果，之前在”“这篇文章也讲过这个使用方法，使用这三个属性给 Flash 加链接，方 法在此就不多说了，可以到这里看一下方法： 2、第一步解决了定位问题，第二步就是做展开折叠的效果，这个效果其实很简单，利用了 A 的属性，默认情况下显示的是小图，当鼠标放在上面，利用了 A 的 a:hover 属性来替换 图片即可实现。 在这一步中，图片的设计很重要也很关键，一开始是用了一大一小两张图片，后来发现鼠 标移动上去的时候在 IE6 下会出问题（又是该死的 IE6） ，于是重新思考了一下，重新设计 了图片，使用两张大小相同的图片来替换，其中的妙处各位自己体会喽。 3、页面实现代码 职场白领该如何贷 款最快速？ 月收入 2000 如何 快速拿贷款？ 急需 30 万? 创业从 此不用愁 加入展贷通 贷款 成交提高 7 倍 具体的意思可参考附件中的展示效果，在此不多说。 4、CSS 代码编写： /* put in button */ .putbtn, .putbtntext, .putbtnindextext, .putbtnmortext, .putbtnrichtext, .putbtns100100, .putbtn260100, .putbtn260200, .putbtn27065, .putbtn410100， .putbtn680100 position:relative; display:inline-block; .putbtn .ShowR, .putbtn .title right:0; bottom:0; text-align:right; .putbtn .ShowT top:0; left:0; .putbtn .ShowR, .putbtn .title, .putbtn .ShowT z-index:100; position:absolute; .putbtn .putlist z-index:-100; position:absolute; .putbtn .putlist ul padding-left:0; .ShowR a .span90X14, .ShowR a:link .span90X14, .ShowR a:visited .span90X14 width:90px; height:14px; display:inline-block; background:url(/Gbimages/putin/t1_90X14.gif) no-repeat; .ShowR a:hover .span90X14 background:url(/Gbimages/putin/t2_90X14.gif) no-repeat; /* single row text */ .putbtntext width:950px; height:30px; .putbtntext ul margin:0; padding:0; height:30px; width:950px; text-align:center; background:#fff4de; .putbtntext ul li float:left; width:230px; height:30px; font-size:14px; text-indent:18px; margin-left:5px; display:inline-block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; background:url(/Gbimages/putin/adsarrow_13X13.gif) no-repeat 0 8px; .putbtntext ul li a, .putbtntext ul li a:link, .putbtntext ul li a:visited float:left; color:#00f; line-height:30px; display:inline-block; text-decoration:underline; .putbtntext ul li a:hover color:#f35000; /* row height:100px; .putbtnmortext ul margin:0; width:678px; padding:5px 0; margin-bottom:5px; overflow:hidden; border:1px solid #ccc; background:#fef4e8; .putbtnmortext ul li padding:0; float:left; width:220px; display:inline; margin:2px 0 2px 5px; .putbtnmortext ul li a margin:0; padding:0; height:26px; display:block; text-indent:7px; font:normal 12px/26px “宋体“; background:url(/Gbimages/dot_black_33.gif) 0 10px no-repeat; .putbtnindextext width:260px; height:100px; .putbtnindextext ul margin:0; width:258px; padding:5px 0; overflow:hidden; border:1px solid #ccc; background:#fef4e8; .putbtnindextext ul li padding:0; float:left; width:220px; display:inline; margin:0 0 0 5px; .putbtnindextext ul li a margin:0; padding:0; height:22px; display:block; text-indent:7px; font:normal 12px/22px “宋体“; background:url(/Gbimages/dot_black_33.gif) 0 8px no-repeat; /* rich text */ .putbtnrichtext width:308px; height:170px; border:1px solid #ccc; .putbtnrichtext .title width:303px; overflow:hidden; padding-right:5px; background:#eee; .putbtnrichtext ul width:300px; margin:5px; .putbtnrichtext ul li float:left; width:100%; padding-bottom:5px; .putbtnrichtext ul li a color:#000e6b; font-size:14px; text-decoration:underline; .putbtnrichtext ul li p text-indent:0; line-height:22px; /* single image, s100X100 */ .putbtns100100, .putbtns100100 .putlist img width:100px; height:100px; /* single image, 260X100 */ .putbtn260100, .putbtn260100 .putlist img width:260px; height:100px; /* single image, 260X200 */ .putbtn260200, .putbtn260200 .putlist img width:260px; height:200px; /* single image, 270X65 */ .putbtn27065, .putbtn27065 .putlist img width:270px; height:65px; /* single image, 410X100 */ .putbtn410100, .putbtn410100 .putlist img width:410px; height:100px; /* single image, 680X100 */ .putbtn680100, .putbtn680100 .putlist img width:680px; height:100px; /* row images, 100X100 */ .putbtn100100 width:680px; height:100px; .putbtn100100 .putlist img width:100px; height:100px; margin:0 12px; /* column images */ .putinmoreimgs float:left; width:260px; .putinmoreimgs .adstop, .putinmoreimgs .adsbottom, .putinmoreimgs ul float:left; .putinmoreimgs .adsbottom margin-top:-4px; .putinmoreimgs ul padding:0; .putinmoreimgs ul li float:left; display:inline; margin:0 0 4px; *margin:0; .putinmoreimgs ul li img width:260px; height:200px; /* title width:950px; .putintextimgs .adstop height:33px; background:url(/Gbimages/putin/list_950X33.gif) no-repeat; text- align:right; .putintextimgs .adstop a, .putinmoreimg .adstop a:link, .putinmoreimg .adstop a:visited color:#555; padding:0 5px; margin:10px 10px 0 0; display:inline-block; text-decoration:underline; .putintextimgs .adsbottom height:10px; background:url(/Gbimages/putin/list_950X10.gif) no-repeat; .putintextimgs ul width:948px; padding:8px 0 0 0; background:#f4f4f4; border-left:1px solid #ccc; border-right:1px solid #ccc; .putintextimgs ul li float