<doctype html>
<head>
<title>360图片展示特效</title>
<style>
*{margin:0;padding:0;}
#imgList{
1000px;
height:630px;
/*background:#ff0033;*/
margin:50px auto 0px;
}
#imgList .top{
100%;
height:207px;
background:#ffff66;
margin-bottom:3px;/*上下盒子有边距*/
}
#imgList .bottom{
100%;
height:417px;
background:#3333fff;
}
#imgLeft .top .t_Left{
420px;
height:207px;
background:#666000;
float:left;
margin-right:3px;/*左右盒子边距*/
}
#imgLeft .top .t_middle{
365px;
height:207px
background#33oo00;
float:left;
}
#imgLeft .top .t_right{
210px;
height:207px;
background:#666fff;
float:right;
}
#imgList .bottom .b_left{
backfround:fff000;
633px;
height:417px;
float:left;
position:relative;
}
#imgList .bottom .b_middle{
364px;
height:207ox;
background:#990000;
float:right;
margin-bottom:3px;
}
#imgList .bottom .b_right{
364px;
height:207px;
background#33ffff:;
float:right;
position:relative;
}/*从上往下3个盒子*/
/*#imgList .bottom .b_left p{
100%;
height:70px;
background:#33ffcc;
font-size:14px;
color:#fff;
font-family:"微软雅黑";
line-height:90px;/*垂直居中往下移*/注意
text-indent:10px;/*首行缩进*/
position:absolute;/*动的东西需要定位*//*位置可以任意移动的这个元素，我们把他设置为绝对定位元素position:absolute*/
left:0；
bottom:0;
background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.8));/从上往下渐变/
}*/
.common{position:relative;overflow:hidden;}
.common p{
100%;
height:70px;
background:#33ffcc;
font-size:14px;
color:#fff;
font-family:"微软雅黑";
line-height:90px;/*垂直居中往下移*/注意
text-indent:10px;/*首行缩进*/
position:absolute;/*动的东西需要定位*//*位置可以任意移动的这个元素，我们把他设置为绝对定位元素position:absolute*/
left:0；
bottom:0;
background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.8));/从上往下渐变/
}/*样式重用*/
</style>
<head>
<body>
<div id="imgList">
<div class="top">
<div class="t_left common"><img src=images/1.png><p>卧室</p></div>
<div class="t_middle common"><img src=images/2.png><p>卧室</p></div>
<div class="t_right common"><img src=images/3.png><p>卧室</p></div>
</div class="bottom">
<div class="b_left common">
<img src=images/4png>
<p>卧室</p>
</div>
<div class="b_middle common">
<img src=images/5.png>
<p>卧室</p>
</div>
<div class="b_right common">
<img src=images/6.png>
<p>卧室</p>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javescript">
$("#imgList .common").mouseover(function(){
//$(this)当前鼠标滑动到的common上面
$(this).find(p).stop().animate(("bottom":"0px"),500);
})
$(".common").mouseout(function(){
$(this).find(p).stop().animate(("bottom":"-70")500);
})
</script>
</body>
/*其他操作不执行*/
9.利用CSS3的线性渐变来画背景 background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.8))
CSS样式的重用
行高
盒子 盒子 盒子
盒子（左浮动）
盒子（有浮动）
盒子（右浮动）