知識點：html標簽，css樣式（企業樣式的活用），html加css布局思維，代碼優化。特效原理（class類名活用）。

html代碼：

    <div id="container">
        <div class="box1 text">
            <img src="images/1.jpg" width="250" height="350" alt="1.jpg"/> <!--四要素  src="圖片儲存位置" width="寬度" height="高度" alt="描述"-->
            <p>心形</p>
        </div>

        <div class="box2 con">
            <div class="pictxtop text">
                <img src="images/2.jpg"  width="250" height="165"  />
                <p>草原</p>
            </div>
            <div class="pictxtbotom text">
                <img src="images/3.jpg"  width="250" height="165"  />
                <p>荷花</p>
            </div>
        </div>
        <div class="box3 text">
            <img src="images/4.jpg" width="490" height="350"  />
            <p>貓頭鷹</p>
        </div>
        <div class="box4 con">
            <div class="pictxtop text">
                <img src="images/5.png"  width="250" height="165"  />
                <p>草原</p>
            </div>
            <div class="pictxtbotom text">
                <img src="images/6.jpg"  width="250" height="165"  />
                <p>荷花</p>
            </div>
        </div>
    </div> 
 

css代碼：

   <style>/*CSS層疊樣式表  化妝師*/
        *{margin:0;/*外邊距*/padding:0;/*內邊距*/}/* *通用選擇器 所有元素 */
        #container{/* #+ID選擇器名字 */
            width:1315px;/*px 像素單位 百分比%*/
            height:350px;
            /*border:1px solid red;邊框 : 大小 實線*/
            margin:150px auto;/*auto默認居中*/
        }
        #container .box1{ /* .+類選擇器名字*/
            width:250px;
            height:350px;
            float: left;
             margin-right: 20px;

        }
        #container .box2{
            width:250px;
            height:350px;
            float: left;
            margin-right: 20px;/*右邊 外邊距*/
        }
        #container .box3{
            width:490px;
            height:350px;
            float:left;
            margin-right: 20px;
        }
        #container .box4{
            width:250px;
            height:350px;
            float:left;
        }
        #container .text{ position:relative;/*相對定位*/overflow:hidden;}
        #container .text p{
            height:30px;
            width:100%;
            background:rgba(0,0,0,0.5);/*0*/
            line-height:30px;/*行高*/
            text-indent:40px;/*字符縮進*/
            color:#fff;/*字體顏色*/
            position:absolute;/*絕對定位*/
            left:0;/*距離左邊多少*/
            bottom:-30px;/*底部對齊多少*/
        }
        #container .con  .pictxtop{
            width:250px;
            height:165px;

        }
        #container .con  .pictxtbotom{
            width:250px;
            height:165px;
            margin-top:20px;
        }
   </style>
 

javascript代碼：

   <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前端小白案例-鼠標移入移出效果