CSS实现广告右侧悬浮效果-白红宇

CSS实现广告右侧悬浮效果

阅读量：4129 次

发布时间：2019-05-25

本文共 2064 字，大约阅读时间需要 6 分钟。

经常见到页面的左侧或者右侧，悬浮停靠的广告位效果。其实，使用css即可实现。

效果如下：

代码如下：

<html> <head> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> /*反馈窗口*/ #feedback{ width:29px; height:120px; position:fixed; _position:absolute; left:50%; margin-left:482px; top:203px; _top: expression(documentElement.scrollTop + 204); } .windows_feedback{ width:29px; height:120px; z-index: 1000;} .windows_feedback a{ display:block; width:19px; margin:0 auto; padding-top:5px} .windows_feedback a:hover{ color:#ff7100; text-decoration:none} .window_suspend{ width:19px; background:url(http://www.dangdang.com/images/bg_feedback_01.gif) no-repeat 0 0;} .window_suspend a{ display:block; background:url(http://www.dangdang.com/images/bg_feedback_02.gif) no-repeat 0 bottom; width:15px; padding:7px 0 6px 4px; text-decoration:none; font-size:12px; color:#878787;} .window_suspend a:hover{ color:#f60; text-decoration:none;} </style> </head> <body> <div class="windows_feedback" id="feedback"> <div class="window_suspend"> <a target="_blank" href="http://misc.dangdang.com/survey/SurveyHtml/206.htm#ref=www-0-W" mce_href="http://misc.dangdang.com/survey/SurveyHtml/206.htm#ref=www-0-W">新版调查</a> </div> </div> </body></html>

转载地址：http://ofkvi.baihongyu.com/

你可能感兴趣的文章