<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); //放大 倍数随意
}
使背景色透明但是文字颜色不变
在前端开发过程中，要求实现背景色透明度0.8，但是文字颜色要求按给定颜色设置。
如果直接设置背景opacity值为0.8，会使文字的颜色发生改变。解决方法就是在设置背景色时使用rgba(red,green,blue,opacity)来对背景色进行设置,这样就可以单独的改变背景的透明度，而不会影响到里面的内容(包括文字和图片)。
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;
}
网站底部
<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">关于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
