22.1.18
目录:
1、精灵图
2、盒子、文字阴影(复习)
3、字体图标的使用(以iconfont为例)
1、精灵图
精灵图样例:
例如王者荣耀官网所使用的精灵图
精灵图 就是将许许多多小图片拼在一张大图片上
精灵技术目的:
为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度。
精灵图的使用
( 就是通过盒子大小是一定的,让精灵图的特定位置上的图标移动到盒子中显示出来,其余部分不显示)
使用精灵图的核心:
1.精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。
2.移动背景图片位置,此时可以使用background-position.
3.移动的距离就是这个目标图片的x和y坐标。注意网页中的坐标有所不同
4.精灵图一般与盒子左上角对齐,所以相对于盒子,图片一般应该向左、向上移动,所以background-position数值为负值
5.使用精灵图的时候需要精确测量,每个小背景图片的大小和位置。(使用ps测量) (通过测量得到的大小来确定所需显示图标盒子的大小)
2、阴影
盒子阴影(重点)
我们可以使用box-shadow属性为盒子添加阴影。
语法:
box - shadow: h-shadow V-shadow blur spread color inset;
描述
h-shadow
必需。水平阴影的位置。允许负值。(正值往右走)
v-shadow
必需。垂直阴影的位置。允许负值。(正值往下走)
blur
可选。模糊距离。(就是一个影子看起来是虚的还是实的,如果为负数就没有)
spread
可选。阴影的尺寸(大小)
color
可选。阴影的颜色。请参阅CSS颜色值。
inset
可选。将外部阴影(outset)改为内部阴影。(***不能写outset否则会失效)
文字阴影(类似盒子阴影)
在CSS3中,我们可以使用text-shadow属性将阴影应用于文本。
语法:
text-shadow: h-shadow v-shadow blur color;
值
描述
h-shadow
必需。水平阴影的位置。允许负值。
v-shadow
必需。金直阴影的位置。允许负值。
blur
可选。模糊的距离。
color
可选。阴影的颜色。
3、字体图标
(呈现方式是图标,实质上是字体font)
1. 如果遇到一些结构和样式比较简单的小图标,就用字体图标。
2.如果遇到一些结构和样式复杂点的小图片 ,就用精灵图。
字体图标样例:
字体图标是一些网页常见的小图标 ,我们直接网上下载即可。
使用步骤
1.字体图标的下载
2.字体图标的引入( 引入到我们html页面中)
3.字体图标的追加(以后添加新的小图标)
1、推荐使用阿里巴巴的iconfont(或者国外的icomoon)
有许多免费的字体图标,如:
直接选择想用的图标,然后点击右下角的下载代码即可
文件格式
2、字体图标引入
下载代码至与网页源代码的 根目录 下解压(取名font)
打开font中的iconfont.css(Unicode 引用)
复制如下代码到css中
@font-face {
font-family: "iconfont"; /* Project id */
src: url('iconfont.ttf?t=1642666878658') format('truetype');
}.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
注意:此处url中的路径应根据正确路径来写,不能照抄
如此处地址:
url('../font/iconfont.ttf')
引入到css后可到html中定义标签
如
<span class="iconfont rubbish"></span>
(此处有两个类名,iconfont必须有)
然后进入 demo_index.html 中复制图标的代码
如此处:
上述增加rubbish类名可以更改该图标的大小
如:
.rubbish {
font-size: 50px;(此处必须为font-size,因为字体图标本质为文字)
}
效果:
方法二(简易)***
直接使用link方式引用:
<link rel="stylesheet" href="font/iconfont.css">
然后在选择器内,设置类名及字体图标的类名即可(具体见阿里iconfont教程)