经常见到页面的左侧或者右侧,悬浮停靠的广告位效果。其实,使用css即可实现。 效果如下: 代码如下: <html> <head> <mce:style type="text/css"><!-- /*反馈窗口*/ #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;} --></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>