欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！

您现在的位置是：首页 > web前端

仿CSDN 右下角悬挂的浮动层效果_广告代码

程序员文章站 2022-05-04 09:34:48

...

<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>
<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 onerror="this.src='/statics/superweb999/images/image_error.jpg'"id="small" src="/default/index/img?u=aW1hZ2VzL3NraW4vc21hbGwuZ2lm" border="0" alt="仿CSDN 右下角悬挂的浮动层效果_广告代码" title="仿CSDN 右下角悬挂的浮动层效果_广告代码"></em><em>   </em><em><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"id="close" src="/default/index/img?u=aW1hZ2VzL3NraW4vY2xvc2UuZ2lm" border="0" alt="仿CSDN 右下角悬挂的浮动层效果_广告代码" title="仿CSDN 右下角悬挂的浮动层效果_广告代码"></em>
</div></h6> 
<div id="msg_top"> 
<ul class="msg_top_left">
<li> 
<img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aW1hZ2VzL3NraW4vdW50aXRsZWQuYm1w" alt="仿CSDN 右下角悬挂的浮动层效果_广告代码" title="仿CSDN 右下角悬挂的浮动层效果_广告代码">
</li> 
</ul>
<ul class="msg_top_right">
<li><a title="微软启动最严厉反盗版验证" href="http://g.csdn.net/5067111" target="_blank" rel="nofollow">微软启动最严厉反盗版验证</a></li> 
<li><a title="Mozilla建开发者工具实验室" href="http://g.csdn.net/5067110" target="_blank" rel="nofollow">Mozilla建开发者工具实验室</a></li> 
<li><a title="Google Apps安全漏洞揭秘" href="http://g.csdn.net/5067028" target="_blank" rel="nofollow">Google Apps安全漏洞揭秘</a></li> 
<li><a title="微软发布Silverlight2 " href="http://g.csdn.net/5067027" target="_blank" rel="nofollow">微软发布Silverlight2 </a></li> 
<li><a title="WinHEC邀您一起揭开Window7神秘面纱！" href="http://g.csdn.net/5067145" target="_blank" rel="nofollow">WinHEC邀您一起揭开Window</a></li> 
</ul>
</div> 
<div id="msg_buttom"> 
<ul>
<li><a title="微软与您畅享[奇迹之旅]，精彩不容错过！" href="http://g.csdn.net/5067051" target="_blank" rel="nofollow">微软与您畅享[奇迹之</a></li> 
<li><a title="汽车信息化机遇与挑战" href="http://g.csdn.net/5065580" target="_blank" rel="nofollow">汽车信息化机遇与挑战</a></li> 
<li><a title="计算机程序的行为学" href="http://g.csdn.net/5065579" target="_blank" rel="nofollow">计算机程序的行为学</a></li> 
<li><a title="独立思考能力从哪里来" href="http://g.csdn.net/5065578" target="_blank" rel="nofollow">独立思考能力从哪里来</a></li> 
</ul>
<ul>
<li><a title="避免肥胖十五条法则" href="http://g.csdn.net/5065503" target="_blank" rel="nofollow">避免肥胖十五条法则</a></li> 
<li><a title="清明节第一次相亲" href="http://g.csdn.net/5065502" target="_blank" rel="nofollow">清明节第一次相亲</a></li> 
<li><a title="不要爱上论坛女人" href="http://g.csdn.net/5065501" target="_blank" rel="nofollow">不要爱上论坛女人</a></li> 
<li><a title="IBM" href="http://g.csdn.net/5065501" target="_blank" rel="nofollow">IBM</a></li> 
</ul>
</div> 
</div>

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

相关标签： CSDN 右下角悬挂

上一篇：设置字体的长和宽_html/css_WEB-ITnose

下一篇： Mark标签_html/css_WEB-ITnose

推荐阅读