Knowledge Points: HTML tags, CSS style (Enterprise style utilization), HTML plus CSS layout thinking, code optimization. Special effects principle (class name utilization).
HTML code:
<div id= "Container" > <div class= "box1 text" > <!--four features src=" Picture storage Location "width=" width "height=" height "alt=" description "-<p> heart Shape </p> </div> <div class= "Box2 con" > <div class= "pictxtop text" > <im G src= "Images/2.jpg" width= "+" height= "165"/> <p> grassland </p> </div> <div class= "Pictxtbotom text" > <p> Lotus </p> </div> </div> <div class= "Box3 text" > Owl </p> </div> & Lt;div class= "Box4 con" > <div class= "pictxtop text" > <p> Prairie </p> </div> <div class= "Pictxtbotom text" > <p> Lotus </p> </div> </di V> </div>
CSS code:
<STYLE>/*CSS Cascading Style sheet Makeup artist */*{margin:0;/* margin */padding:0;/* inner margin */}/* * Universal Selector all elements */#container {/* #+id Select Name of the device */width:1315px;/*px pixel unit percentage%*/height:350px; /*border:1px solid red; border: Solid line */margin:150px auto;/*auto Default Center */} #container. box1{/*. + class Selector name Word */width:250px; height:350px; Float:left; margin-right:20px; } #container. box2{width:250px; height:350px; Float:left; margin-right:20px;/* right margin */} #container. box3{width:490px; height:350px; Float:left; margin-right:20px; } #container. box4{width:250px; height:350px; Float:left; } #container. text{position:relative;/* relative positioning */overflow:hidden;} #container. Text p{height:30px; width:100%; BackgrounD:rgba (0,0,0,0.5);/*0*/line-height:30px;/* Line Height */text-indent:40px;/* character indent */color: #fff;/* Font Color */position:absolute;/* Absolute Positioning * * left:0;/* distance to the left how much */bottom:-30px;/* bottom Alignment how much */} #container. Con. pictxtop{width:250px; height:165px; } #container. con. pictxtbotom{width:250px; height:165px; margin-top:20px; } </style>
JavaScript code:
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <!--使用调用方法--> <script> //找元素 $("") $("#container .text").hover(function(){ $(this).find("p").animate({bottom:"0px"}) },function(){ $(this).find("p").animate({bottom:"-30px"}) }); </script>
Web front-end small white case-mouse move to move out effect