标签：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
*{margin:0px;}
#Con{width:1000px;/*宽度*/ height:351px;/*高度*/ /*background:#9933CC;背景颜色*/
margin:0px auto;/*水平方向距中*/}
#Con .Left{width:528px;height:351px; float:left; margin-right:1px;
position:relative;/*相对定位*/}
#Con .Mid{width:234px; height:351px; float:left;margin-right:1px; position:relative;}
.top{width:234px; height:175px; margin-bottom:1px; position:relative;}
.bottom{width:234px; height:175px; position:relative;}
.Left span,.bottom span,.top span{padding:0px 25px; height:30px;background:#000; color:#fff; display:inline-block;
font-size:12px; font-family:"微软雅黑"; text-align:center;position:absolute;/*绝对定位*/ left:0px; bottom:10px;background-color: rgba(0, 0, 0, 0.5);
line-height:30px;/*文字在竖直方向距中*/}
.gray{width:194px; height:115px;background-color: rgba(0, 0, 0, 0.5);/*黑色背景透明*/
position:absolute; left:0px; top:0px; color:#fff;font-family:"微软雅黑";
padding:60px 20px 0px;}
.gray h3{font-size:18px; line-height:35px;}
.gray p{font-size:12px;}
</style>
</head>
<body>
<div id="Con">
<!--左边开始-->
<div class="Left">
<a href="#"><img src="images/1.jpg" /></a>
<span>盟女</span>
</div>
<!--左边结束-->
<!--中间开始-->
<div class="Mid">
<div class="top">
<a href="#"><img src="images/2.jpg" /></a>
<div class="gray">
<h3>刘翔宣布退役</h3>
<p>2015年4月7日，田径运动员刘翔在微博上发布长文《我的跑道！我的栏！》，正式宣布退役</p>
</div>
</div>
<div class="bottom">
<a href="#"><img src="images/3.jpg" /></a>
<span>自然风景</span>
</div>
</div>
<!--中间结束-->
<!--右边开始-->
<div class="Mid">
<div class="top">
<a href="#"><img src="images/4.jpg" /></a>
<span>症状</span>
</div>
<div class="bottom">
<a href="#"><img src="images/5.jpg" /></a>
<div class="gray">
<h3>福建PX项目爆燃事故</h3>
<p>4月6日18时56分许，漳州市古雷腾龙芳烃二甲苯装置发生漏油起火事故</p>
</div>
</div>
</div>
<!--右边结束-->
</div>
<!--引用动画-->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" >
$(".top,.bottom").hover(function(){
$(this).find(".gray").slideUp("slow");//缓慢向上收缩
},function(){
$(this).find(".gray").slideToggle("slow");//缓慢向下伸展
});
</script>
</body>
</html>
效果图：
标签：
原文地址：http://www.cnblogs.com/gzby/p/4401970.html
