<!DOCTYPE html>
<html>
<head>
<title>购物车图标</title>
<style type="text/css">
.p1{
width: 50px;
height: 40px;
background-image: url(img/5.png);
display: block;
background-position: 0px -338px;
}
.p1:hover{
background-position: -59px -338px;
}
.p1:active{
background-position: -119px -338px;
}
</style>
</head>
<body>
<a href="#" class="p1"></a>
</body>
</html>
1、简写背景属性
body{
height: 5000px;
/*下面的是全写*/
background-color: red;
background-image: url(images/123.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
/*下面的是简写*/
background: url(images/123.jpg) center center no-repeat fixed;
}
2、表格
tr表示表格有几行
td表示表格有几列
colspan表示横向合并
rowspan表示纵向合并
/*设置表格边框的合并*/
border-collapse: collapse;
/*隔行变色odd奇数行，even偶数行*/
tr:nth-child(odd){
background-color: red;}
3、完善
/*空的div无法隔开父子元素边距*/
/*解决父子元素外边距重叠*/
.clearfix:before{
content: '';
display: table;}
/*解决父元素高度塌陷*/
.clearfix:after{
content: '';
display: block;
clear: both;}
/*解决高度塌陷和，垂直重叠*/
.clearfix:after,
.clearfix:before{
content: '';
display: table;
clear: both;}
.clearfix{
zoom:1;}
