<!DOCTYPE html>
<html>
<head>
<title>購物車圖標(biāo)</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揖赴、簡(jiǎn)寫背景屬性
body{
height: 5000px;
/*下面的是全寫*/
background-color: red;
background-image: url(images/123.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
/*下面的是簡(jiǎn)寫*/
background: url(images/123.jpg) center center no-repeat fixed;
}
2、表格
tr表示表格有幾行
td表示表格有幾列
colspan表示橫向合并
rowspan表示縱向合并
/*設(shè)置表格邊框的合并*/
border-collapse: collapse;
/*隔行變色odd奇數(shù)行，even偶數(shù)行*/
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;}
