您好,登錄后才能下訂單哦!
知識點(diǎn):html標(biāo)簽,css樣式(企業(yè)樣式的活用),html加css布局思維,代碼優(yōu)化。特效原理(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" alt="" />
<p>草原</p>
</div>
<div class="pictxtbotom text">
<img src="images/3.jpg" width="250" height="165" alt="" />
<p>荷花</p>
</div>
</div>
<div class="box3 text">
<img src="images/4.jpg" width="490" height="350" alt="" />
<p>貓頭鷹</p>
</div>
<div class="box4 con">
<div class="pictxtop text">
<img src="images/5.png" width="250" height="165" alt="" />
<p>草原</p>
</div>
<div class="pictxtbotom text">
<img src="images/6.jpg" width="250" height="165" alt="" />
<p>荷花</p>
</div>
</div>
</div>
css代碼:
<style>/*CSS層疊樣式表 化妝師*/
*{margin:0;/*外邊距*/padding:0;/*內(nèi)邊距*/}/* *通用選擇器 所有元素 */
#container{/* #+ID選擇器名字 */
width:1315px;/*px 像素單位 百分比%*/
height:350px;
/*border:1px solid red;邊框 : 大小 實(shí)線*/
margin:150px auto;/*auto默認(rèn)居中*/
}
#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;/*字符縮進(jìn)*/
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>
<!--使用調(diào)用方法-->
<script>
//找元素 $("")
$("#container .text").hover(function(){
$(this).find("p").animate({bottom:"0px"})
},function(){
$(this).find("p").animate({bottom:"-30px"})
});
</script>
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。