这周练习了一个弹窗广告的小项目。
一.body里的内容
<dl>
<dt ><img src="images/text.gif" /></dt>
<dd>分享到:<img src="images/iocns.gif" /></dd>
</dl>
ps:使用无序列表初步将需要的元素显示
二.css代码
*{padding:0px;margin:0px;font-size:12px;}
a{
color:#000;
text-decoration:none;
}
ul{list-style:none;}
dl,dt,dd{
display:block;
}
dl{
clear:both;
height:30px;
width:670px;
line-height:30px;
}
dl dt{
width:100px;
padding-left:10px;
float:left;
}
dl dd{
float:left;
}
dl dd a{margin:3px;}
dl dd.more{
float:right;
margin-right:10px;
}
三.JS的代码
$(function(){
//点击分享链接 将另外一种图片显示
$("img:eq(1)").click(function(){
$("img:eq(0)").show();
});
//点击弹出的图片 再把它隐藏
$("img:eq(0)").click(function(){
$("img:eq(0)").hide();
});
})