快捷導(dǎo)航

仿CSDN 右下角懸掛的浮動層效果

更新時間：2008年12月17日 12:18:01 作者：

仿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> <style type="text/css"> body{ font-size:12px; margin:0px; } /**for ads**/ h1{ font-size:14px; } .ads{ margin:0px auto; width:325px; height:190px; border:1px solid #ddd; } </style> </head> <body> <h1>CSDN右下角懸掛效果</h1>  <style 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> <div   class="wppm3vysvbp"   id="ads_14" class="ads_14"> <h6 id="drag"><div   class="wppm3vysvbp"   id="head"><em><img id="small" src="images/skin/small.gif" border="0"></em><em>&nbsp;&nbsp;&nbsp;</em><em><img id="close" src="images/skin/close.gif" border="0"></em></div></h6> <div   class="wppm3vysvbp"   id="msg_top"> <ul class="msg_top_left"> <li> <img src="images/skin/untitled.bmp"> </li> </ul> <ul class="msg_top_right"> <LI><A title="微軟啟動最嚴厲反盜版驗證"  target="_blank">微軟啟動最嚴厲反盜版驗證</A></LI> <LI><A title="Mozilla建開發(fā)者工具實驗室"  target="_blank">Mozilla建開發(fā)者工具實驗室</A></LI> <LI><A title="Google Apps安全漏洞揭秘"  target="_blank">Google Apps安全漏洞揭秘</A></LI> <LI><A title="微軟發(fā)布Silverlight2 "  target="_blank">微軟發(fā)布Silverlight2 </A></LI> <LI><A title="WinHEC邀您一起揭開Window7神秘面紗！"  target="_blank">WinHEC邀您一起揭開Window</A></LI> </ul> </div> <div   class="wppm3vysvbp"   id="msg_buttom"> <ul> <li><a title="微軟與您暢享[奇跡之旅]，精彩不容錯過！"  target="_blank">微軟與您暢享[奇跡之</a></li> <li><a title="汽車信息化機遇與挑戰(zhàn)"  target="_blank">汽車信息化機遇與挑戰(zhàn)</a></li> <li><a title="計算機程序的行為學(xué)"  target="_blank">計算機程序的行為學(xué)</a></li> <li><a title="獨立思考能力從哪里來"  target="_blank">獨立思考能力從哪里來</a></li> </ul> <ul> <li><a title="避免肥胖十五條法則"  target="_blank">避免肥胖十五條法則</a></li> <li><a title="清明節(jié)第一次相親"  target="_blank">清明節(jié)第一次相親</a></li> <li><a title="不要愛上論壇女人"  target="_blank">不要愛上論壇女人</a></li> <li><a title="IBM"  target="_blank">IBM</a></li> </ul> </div> </div> <div   class="wppm3vysvbp"   id="hidden"></div>     </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章: