<div class="img-box">
<img src="img/index_11.png" class="img">
</div>
css代碼
.img-box{
width: 390px;
height: 296px;
overflow: hidden; //這個一定要加上 不然就不是外框不變里面變大了
}
.img{
display: block;
width: 100%;
height: 100%;
transition: all 1s;
}
.img:hover{
transform: scale(1.4); //放大 倍數(shù)隨意
}
使背景色透明但是文字顏色不變
在前端開發(fā)過程中，要求實現(xiàn)背景色透明度0.8，但是文字顏色要求按給定顏色設(shè)置。
如果直接設(shè)置背景opacity值為0.8，會使文字的顏色發(fā)生改變。解決方法就是在設(shè)置背景色時使用rgba(red,green,blue,opacity)來對背景色進(jìn)行設(shè)置,這樣就可以單獨的改變背景的透明度，而不會影響到里面的內(nèi)容(包括文字和圖片)。
web前端超出兩行用省略號表示
<span class="GW_bod0112211">
吐魯番特級無炳黑加侖葡萄干500g包郵無籽吐魯番特級無炳黑加侖葡萄干500g包郵無籽吐魯番特級無炳黑加侖葡萄干500g包郵無籽，超大孕婦零食
</span>
span{
height: 40px;
line-height: 20px;
width: 300px;
display: -webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
overflow: hidden;
}
網(wǎng)站底部
<p>Copyright ? 2003-
<script type="text/javascript">document.write(new Date().getFullYear());</script>
深圳市xxx科技有限公司
</p>
效果圖：
image.png
jquery圖片切換
layui/js/jquery圖片切換.html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery圖片切換</title>
<style type="text/css">
.introduce-box3{
width: 150px;
height: 60px;
margin-top: 50px;
margin-left: 225px;
border: #00FFFF 1px solid;
}
.introduce-box3 .p{
float: left;
font-size: 21px;
}
.introduce-box3 .p1{
color: red;
}
.introduce-box3>img{
width: 36px;
float: right;
}
</style>
</head>
<body>
<div class="introduce-box3">
<p class="p">關(guān)于Turing</p>
<img src="image/right1.png" >
</div>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="layui/js/jquery圖片切換.js">
</script>
</body>
</html>
layui/js/jquery圖片切換.js文件
$(function(){
$(".introduce-box3").hover(function(){
$(this).children(".p").addClass("p1");
$(this).children("img").attr("src","image/redright.png");
},function(){
$(this).children(".p").removeClass("p1");
$(this).children("img").attr("src","image/right1.png");
})
})
image.png
image.png
