本文介绍了CSS中的鼠标样式设置，如何通过`cursor`属性改变指针形状。接着讨论了轮廓(outline)的作用和去除方法。重点讲解了精灵图的使用，通过CSS的`background-image`,`background-repeat`和`background-position`属性实现背景定位，以提高网站性能。
1.鼠标样式
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
cursor : default 小
2.轮廓
是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
outline : outline-color ||outline-style || outline-width
白 | pointer 小手 | move 移动 | text 文本
轮廓可以去掉，方法：
outline: 0;或者outline: none;
3精灵图
CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位，其中最关键的是使用background-position属性精确地定位。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
section{
width: 380px;
margin: auto;
}
div{
float: left;
background-image: url(./练习/abcd.jpg);
width: 140px;
height: 120px;
}
.w{
background-position: -113px 120px;
}
.y{
background-position: -359px 120px;
width: 120px;
}
.z{
background-position: -477px 120px;
width: 120px;
}
section::after{
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<section>
<div class="w"></div>
<div class="y"></div>
<div class="z"></div>
</section>
</body>
</html>
扫一扫
249
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
