###雪碧图技术###
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sprite雪碧图技术</title>
<style type="text/css">
div{
width: 150px;
height: 120px;
background: url("sprites2.png");
background-position: 0 120px;/*(X轴，Y轴)*/
}
</style>
/head>
<body>
<div></div>
</body>
</html>
###图片替换技术###
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片替换技术</title>
<style type="text/css">
h1 {
width: 168px;
height: 81px;
background: url("京东LOGO.png");
border: 1px solid black;
}
a{
border: 1px solid #ff0000;
width: 168px;
height: 81px;
display: block;
text-indent: -1000px;
}
</style>
</head>
<body>
<h1><a href="定位.html">京东</a></h1>
</body>
</html>
###图片透明###
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
img{
opacity: 0.4;
/*background: rgba(0,0,0,0.6);*/
}
img:hover{
opacity: 1;
}
/*此处不能使用rgba改变背景透明的方式来做效果，因为，rgba只针对背景颜色改变，*/
/*而opacity针对是整个元素透明效果的改变*/
</style>
</head>
<body>
<img src="sprites2.png" />
</body>
</html>
###图片透明2###
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div {
background: url("1.jpg");
width: 220px;
height: 230px;
}
p{
width: 220px;
height: 230px;
/*background: rgba(255,255,255,0.6);*/
opacity:0.6; /*另一种设置背景透明的方法*/
background: #ffffff;
font-weight: bolder;
color: green;
}
</style>
</head>
<body>
<div>
<p>文字文字文字文字文字文字文字文字</p>
</div>
</body>
</html>
###电商布局###
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>电商常用布局</title>
<style type="text/css">
.all{
border:1px solid black;
overflow: hidden;
}
.div1{
border: 1px solid #808080;
float: left;
padding: 5px;
margin: 5px;
}
.div3{
text-align: center;
}
img{
border: 1px solid #808080;
}
img:hover{
border: 1px solid #bebebe;
}
.div2{
text-align: center;
padding: 5px;
}
</style>
/head>
<body>
<div class="all">
<div class="div1">
<div class="div3"><img src="70x70(1).jpg" /></div>
<div class="div2">我是第一张图片</div>
</div>
<div class="div1">
<div class="div3"><img src="70x70(2).jpg" /></div>
<div class="div2">我是第二张图片</div>
</div>
<div class="div1">
<div class="div3"><img src="70x70(3).jpg" /></div>
<div class="div2">我是第三张图片</div>
</div>
<div class="div1">
<div class="div3"><img src="70x70(4).jpg" /></div>
<div class="div2">我是第四张图片</div>
</div>
</div>
</body>
</html>