仿CSDN 右下角悬挂的浮动层效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>ads</title> <sty1e type="text/css"> body{ font-size:12px; margin:0px; }  h1{ font-size:14px; } .ads{ margin:0px auto; width:325px; height:190px; border:1px solid #ddd; } </style> </head> <body> CSDN右下角悬挂效果  <sty1e type="text/css"> #ads_14{ float:right; font-family: verdana,sans-serif; } #ads_14 H6 { width:282px; height:27px; padding:0px; margin:0px; background:url(images/skin/bg.gif) no-repeat; } #ads_14 #drag { cursor:move; } #ads_14 #head { float:right; width:45px; height:27px; line-height:27px; cursor:pointer; } #msg_top { width:279px; height:105px; border-left:#CDCDCD 1px solid; border-right:#CDCDCD 1px solid; } ul { padding:0px; margin:0px; list-style:none; } .msg_top_left { float:left; width:80px; height:105px; padding-right:10px; border-bottom:#CDCDCD 1px dashed; } .msg_top_right { float:left; width:175px; height:105px; padding-left:10px; border-bottom:#CDCDCD 1px dashed; } .msg_top_right a { font-size:12px; text-decoration:none; line-height:20px; } #msg_buttom { width:279px; height:100px; border-left:#CDCDCD 1px solid; border-right:#CDCDCD 1px solid; border-bottom:#CDCDCD 1px solid; } #msg_buttom ul { float:left; width:120px; height:102px; line-height:20px; padding:5px; } </style>  <h6 id="drag">     <ul class="msg_top_left"> <li>  </li> </ul> <ul class="msg_top_right"> <LI>微软启动最严厉反盗版验证</LI> <LI>Mozilla建开发者工具实验室</LI> <LI>Google Apps安全漏洞揭秘</LI> <LI>微软发布Silverlight2 </LI> <LI>WinHEC邀您一起揭开Window</LI> </ul>   <ul> <li>微软与您畅享[奇迹之</li> <li>汽车信息化机遇与挑战</li> <li>计算机程序的行为学</li> <li>独立思考能力从哪里来</li> </ul> <ul> <li>避免肥胖十五条法则</li> <li>清明节第一次相亲</li> <li>不要爱上论坛女人</li> <li>IBM</li> </ul>        </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

仿CSDN 右下角悬挂的浮动层效果

JavaScript相关栏目本月热门文章