首页 > 代码库 > 与其放在电脑里占内存，还不如拿出来帮助一群小白白之html篇之四
与其放在电脑里占内存，还不如拿出来帮助一群小白白之html篇之四
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
#scroll{
width:1185px;
height:370px;
margin:80px auto;
background-color:#C6F;
}
#scroll .left_img{
width:400px;
height:370px;
border:1px solid #96C;
float:left;
background-color:#990;
}
#scroll .right_img{
width:780px;
height:370px;
border:1px solid #FF3;
/*background-color:#30C;*/
float:right;
}
#scroll .right_img ul li{
list-style:none;
width:150px;
height:120px;
border:1px solid #ddd;
float:left;
border-top:0px;
border-left:0px;
position:relative;
}
#scroll .right_img ul li .con{
width:150px;
height:120px;
background:rgba(0,0,0,0.8);
position:absolute;
top:0px;
left:0x;
display:none;
}
#scroll .right_img ul li .con .p_1
{
color:#FFF;
height:40px;
line-height:40px;
font-size:14px;
text-align:center;
}
#scroll .right_img ul li .con .p_2
{
color:#FFF;
height:40px;
line-height:40px;
font-size:14px;
text-align:center;
}
#scroll .right_img ul li .con .p_2 a
{
font-size:14px;
color:#FFF;
text-decoration:none;
background:#F30;
border-radius:12px;
padding:5px 10px;
}
</style>
</head>
<body>
<div id="scroll">
<div class="left_img"><img src="http://www.mamicode.com/image/57.jpg" width="400" height="363"></div>
<div class="right_img">
<ul>
<li><img src="http://www.mamicode.com/image/33.jpg" width="150" height="120">
<div class="con">
<p class="p_1">恋恋不忘</p>
<p class="p_2"><a href="http://www.mamicode.com/#">点击进入</a></p>
</div>
</li>
<li><img src="http://www.mamicode.com/image/34.jpg" width="150" height="120"><div class="con">
<div class="con">
<p class="p_1">恋恋不忘</p>
<p class="p_2"><a href="http://www.mamicode.com/#">点击进入</a></p>
</div>
</li>
<li><img src="http://www.mamicode.com/image/35.jpg" width="150" height="120"><div class="con">
<div class="con">
<p class="p_1">恋恋不忘</p>
<p class="p_2"><a href="http://www.mamicode.com/#">点击进入</a></p>
</div>
</li>
<li><img src="http://www.mamicode.com/image/36.jpg" width="150" height="120"><div class="con">
<div class="con">
<p class="p_1">恋恋不忘</p>
<p class="p_2"><a href="http://www.mamicode.com/#">点击进入</a></p>
</div>
</li>
<li><img src="http://www.mamicode.com/image/37.jpg" width="150" height="120"><div class="con">
<div class="con">
<p class="p_1">恋恋不忘</p>
<p class="p_2"><a href="http://www.mamicode.com/#">点击进入</a></p>
</div>
</li>
<li><img src="http://www.mamicode.com/image/32.jpg" width="150" height="120"><div class="con">
<div class="con">
<p class="p_1">恋恋不忘</p>
<p class="p_2"><a href="http://www.mamicode.com/#">点击进入</a></p>
</div>
</li>
<li><img src="http://www.mamicode.com/image/35.jpg" width="150" height="120"><div class="con">
<div class="con">
<p class="p_1">恋恋不忘</p>
<p class="p_2"><a href="http://www.mamicode.com/#">点击进入</a></p>
</div>
</li>
<li><img src="http://www.mamicode.com/image/36.jpg" width="150" height="120"><div class="con">
<div class="con">
<p class="p_1">恋恋不忘</p>
<p class="p_2"><a href="http://www.mamicode.com/#">点击进入</a></p>
</div>
</li>
<li><img src="http://www.mamicode.com/image/35.jpg" width="150" height="120"><div class="con">
<div class="con">
<p class="p_1">恋恋不忘</p>
<p class="p_2"><a href="http://www.mamicode.com/#">点击进入</a></p>
</div>
</li>
<li><img src="http://www.mamicode.com/image/36.jpg" width="150" height="120"><div class="con">
<div class="con">
<p class="p_1">恋恋不忘</p>
<p class="p_2"><a href="http://www.mamicode.com/#">点击进入</a></p>
</div>
</li>
<li><img src="http://www.mamicode.com/image/35.jpg" width="150" height="120"><div class="con">
<div class="con">
<p class="p_1">恋恋不忘</p>
<p class="p_2"><a href="http://www.mamicode.com/#">点击进入</a></p>
</div>
</li>
<li><img src="http://www.mamicode.com/image/36.jpg" width="150" height="120"><div class="con">
<div class="con">
<p class="p_1">恋恋不忘</p>
<p class="p_2"><a href="http://www.mamicode.com/#">点击进入</a></p>
</div>
</li>
<li><img src="http://www.mamicode.com/image/35.jpg" width="150" height="120"><div class="con">
<div class="con">
<p class="p_1">恋恋不忘</p>
<p class="p_2"><a href="http://www.mamicode.com/#">点击进入</a></p>
</div>
</li>
<li><img src="http://www.mamicode.com/image/36.jpg" width="150" height="120"><div class="con">
<div class="con">
<p class="p_1">恋恋不忘</p>
<p class="p_2"><a href="http://www.mamicode.com/#">点击进入</a></p>
</div>
</li>
<li><img src="http://www.mamicode.com/image/35.jpg" width="150" height="120"><div class="con">
<div class="con">
<p class="p_1">恋恋不忘</p>
<p class="p_2"><a href="http://www.mamicode.com/#">点击进入</a></p>
</div>
</li>
<div style="clear:both"></div>
</ul>
</div>
</div>
<script type="text/javascript" src="http://www.mamicode.com/js/jquery.js"></script>
<script type="text/javascript">
$("#scroll .right_img ul li").mouseover(function(){
$(this).find(".con").show().parent("li").siblings("li").find(".con").hise();
});
$("#scroll .right_img ul li").mouseout(function(){
$(this).find(".con").hide();
});
</script>
</body>
</html>
与其放在电脑里占内存，还不如拿出来帮助一群小白白之html篇之四