1 精灵图( sprites)
1.1 为什么需要精灵图
为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度, 出现了 CSS 精灵技术(也称CSS Sprites、 CSS 雪碧)
核心原理:将网页中的一些小背景图像整合到一张大图中
1.2 精灵图的使用
重点:
1. 精灵图主要针对于小的背景图片使用。
2. 主要借助于背景位置来实现---background-position 。
3. 一般情况下精灵图都是负值。(千万注意网页中的坐标: x轴右边走是正值,左边走是负值, y上边走是负值。)
.box1 {
width: 60px;
height: 60px;
margin: 100px auto;
background: url(images/sprites.png) no-repeat -182px 0;
}
1.3 精灵图使用练习
原始图:
要求:根据原始图在网页中显示annk
实现效果图:
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style>
span {
display: inline-block;
background: url(images/abcd.jpg) no-repeat;
}
.a {
width: 100px;
height: 112px;
background-position: 0 0;
}
.n {
width: 111px;
height: 117px;
background-position: -214px -134px;
}
.n {
width: 108px;
height: 109px;
background-position: -215px -141px;
}
.k {
width: 105px;
height: 114px;
background-position: -495px -142px;
}
</style>
</head>
<body>
<span class="a"></span>
<span class="n"></span>
<span class="n"></span>
<span class="k"></span>
</body>
</html>
2 字体图标
2.1 字体图标特点
使用场景:显示网页中通用、常用的一些小图标。
精灵图的缺点:
1. 图片文件还是比较大的。
2. 图片本身放大和缩小会失真。
3. 一旦图片制作完毕想要更换非常复杂。
字体图标 iconfont
提供一种方便高效的图标使用方式,
展示的是图标,本质属于字体。
字体图标优点:
轻量级:一个图标字体要比一系列的图像要小。一旦字体加载了,图标就会马上渲染出来,减少了
服务器请求
灵活性:本质其实是文字,可以很随意的改变颜色、产生阴影、透明效果、旋转等
兼容性:几乎支持所有的浏览器,请放心使用
2.2 字体图标的使用
使用步骤:
1、字体图标的下载
推荐网站:
icomoon 字库
http://icomoon.io 和
阿里 iconfont 字库
http://www.iconfont.cn
2、字体图标的引入
1)把下载包里面的
fonts
文件夹放入页面根目录下
2)
在 CSS 样式中全局声明字体: 把这些字体文件通过css引入到我们页面中。
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?7kkyc2');
src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
url('fonts/icomoon.woff?7kkyc2') format('woff'),
url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
3)html 标签内添加小图标
<span></span>
4)给标签定义字体。
span {
font-family: "icomoon";
}
注意这个字体和上面@font-face里面的字体保持一致
2.3 字体图标的追加
若需要添加新的字体图标到原来的字体文件中,把压缩包里面的
selection.json 从新上传
,然后选
中自己想要新的图标,从新下载压缩包,并替换原来的文件即可。
3 CSS三角
如上图所示有些广告栏会在边缘存在小三角
实现代码如下:
div {
width: 0;
height: 0;
line-height: 0;
font-size: 0;
border: 50px solid transparent;
border-left-color: pink;
}
4 CSS用户界面样式
目的:更改一些用户操作样式,以便提高更好的用户体验
4.1 鼠标样式 cursor
语法:li {cursor: pointer; }
4.2 轮廓线 outline
给表单添加 outline: 0; 或者 outline: none; 样式之后,就可以去掉默认的蓝色边框。
语法:input {outline: none; }
4.3 防止拖拽文本域 resize
目的:文本域右下角是不可以拖拽
语法:textarea{ resize: none;}