<doctype html>
<title>360 Photo Show Effects </title>
<style>
*{margin:0;padding:0;}
#imgList {
width:1000px;
height:630px;
/*background: #ff0033; * *
margin:50px Auto 0px;
}
#imgList. top{
width:100%;
height:207px;
Background: #ffff66;
margin-bottom:3px;/* the upper and lower boxes have margins */
}
#imgList. bottom{
width:100%;
height:417px;
Background: #3333fff;
}
#imgLeft. Top. t_left{
width:420px;
height:207px;
Background: #666000;
Float:left;
margin-right:3px;/* left and Right box margin */
}
#imgLeft. Top. t_middle{
width:365px;
Height:207px
background#33oo00;
Float:left;
}
#imgLeft. Top. t_right{
width:210px;
height:207px;
Background: #666fff;
Float:right;
}
#imgList. Bottom. b_left{
backfround:fff000;
width:633px;
height:417px;
Float:left;
position:relative;
}
#imgList. Bottom. b_middle{
width:364px;
Height:207ox;
Background: #990000;
Float:right;
margin-bottom:3px;
}
#imgList. Bottom. b_right{
width:364px;
height:207px;
BACKGROUND#33FFFF:;
Float:right;
position:relative;
}/* 3 boxes from top down */
/* #imgList. Bottom. b_left p{
width:100%;
height:70px;
Background: #33ffcc;
font-size:14px;
Color: #fff;
Font-family: "Microsoft Jas Black";
line-height:90px;/* Vertical Center Move Down * * Note
text-indent:10px;/* First Line Indent */
position:absolute;/* moving things need to locate the *//* position can be arbitrarily moved by this element, we set him as an absolute positioning element position:absolute*/
left:0;
bottom:0;
Background:linear-gradient (Rgba (0,0,0,0), Rgba (0,0,0,0.8)),/gradient up/down
}*/
. Common{position:relative;overflow:hidden;}
. Common p{
width:100%;
height:70px;
Background: #33ffcc;
font-size:14px;
Color: #fff;
Font-family: "Microsoft Jas Black";
line-height:90px;/* Vertical Center Move Down * * Note
text-indent:10px;/* First Line Indent */
position:absolute;/* moving things need to locate the *//* position can be arbitrarily moved by this element, we set him as an absolute positioning element position:absolute*/
left:0;
bottom:0;
Background:linear-gradient (Rgba (0,0,0,0), Rgba (0,0,0,0.8)),/gradient up/down
}/* Style Reuse */
</style>
<body>
<div id= "Imglist" >
<div class= "Top" >
<div class= "T_left common" ><p> bedroom </p></div>
<div class= "T_middle common" ><p> bedroom </p></div>
<div class= "T_right common" ><p> bedroom </p></div>
</div class= "Bottom" >
<div class= "B_left common" >
<p> Bedroom </p>
</div>
<div class= "B_middle common" >
<p> Bedroom </p>
</div>
<div class= "B_right common" >
<p> Bedroom </p>
</div>
</div>
</div>
</div>
<script type= "Text/javascript" src= "Js/jquery.js" ></script>
<script type= "Text/javescript" >
$ ("#imgList. Common"). MouseOver (function () {
$ (this) the current mouse slide to the top of the common
$ (this). Find (P). Stop (). Animate (("bottom": "0px"), 500);
})
$ (". Common"). Mouseout (function () {
$ (this). Find (P). Stop (). Animate (("Bottom": "70") 500);
})
</script>
</body>
/* Other actions do not execute */
9. Use CSS3 's linear gradient to draw background background:linear-gradient (Rgba (0,0,0,0), Rgba (0,0,0,0.8))
Reuse of CSS Styles
Row height
Box Box Box
Box (left floating)
Box (with float)
Box (right float)
360 Photo Show effects
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
