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

254 阅读 0 评论 168 点赞

我是靠谱客的博主粗暴乌龟，这篇文章主要介绍仿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 id="ads_14" class="ads_14"> 
<h6 id="drag"><div id="head"><em><img id="small" src="http://www.uoften.com/article/images/skin/small.gif" border="0"></em><em>   </em><em><img id="close" src="http://www.uoften.com/article/images/skin/close.gif" border="0"></em></div></h6> 
<div id="msg_top"> 
<ul class="msg_top_left"> 
<li> 
<img src="http://www.uoften.com/article/images/skin/untitled.bmp"> 
</li> 
</ul> 
<ul class="msg_top_right"> 
<LI>微软启动最严厉反盗版验证</LI> 
<LI>Mozilla建开发者工具实验室</LI> 
<LI>Google Apps安全漏洞揭秘</LI> 
<LI>微软发布Silverlight2 </LI> 
<LI>WinHEC邀您一起揭开Window</LI> 
</ul> 
</div> 
<div id="msg_buttom"> 
<ul> 
<li>微软与您畅享[奇迹之</li> 
<li>汽车信息化机遇与挑战</li> 
<li>计算机程序的行为学</li> 
<li>独立思考能力从哪里来</li> 
</ul> 
<ul> 
<li>避免肥胖十五条法则</li> 
<li>清明节第一次相亲</li> 
<li>不要爱上论坛女人</li> 
<li>IBM</li> 
</ul> 
</div> 
</div> 
<div id="hidden"></div> 
 
 
 
 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]