css3小图标样式 |会dw好学html5css3吗

首先，让大家来了解一下pre标签的作用。pre标签会保留你在标签里的空格和换行，这对于代码的可读性非常有帮助。下面将使用pre标签来展示代码。

.icon {
width: 20px;
height: 20px;
display: inline-block;
background-image: url('sprite.png');
background-repeat: no-repeat;
}
.home {
background-position: -10px -10px;
}
.search {
background-position: -40px -30px;
}
.cart {
background-position: -70px -50px;
}

大家首先定义了一个名为.icon的CSS类，它将用于所需的每个小图标。大家将其宽度和高度设置为20像素，并使用display属性来设置为内联块元素。接下来，大家将使用background-image属性来指定大家的图片资源，它们将以背景图像的形式呈现。使用background-repeat属性，大家可以避免图标之间的重复出现和重复下载。

下面是示例图标的CSS样式代码。请注意，每个图标都使用不同的背景位置，在sprite图中表示为负值。这些值将根据您的sprite图像的大小和位置而变化。

好了，现在大家已经了解了如何创建CSS3小图标样式。大家准备好将这些小图标添加到大家自己的网页上了！