【无标题】 - 技术栈

1.精灵图

1.1 为什么需要精灵图

一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接收和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度。

因此,为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度,出现了CSS精灵技术(也称 CSS Sprites、CSS雪碧)。

核心原理:将网页中的一些小背景图像整合到一张大图中,这样服务器只需要一次请求就可以了。

1.2sprites使用

使用精表图核心总结:

精灵图主要针对于小的肯景图片使用。
主要借助于背景位置来实现 --- background-position。
一般情况下精灵图都是负值。(千万注意网页中的坐标:x轴右边走是正值,左边走是负值,y轴同理。)

css 复制代码

div{
    background: url(imaged/pic.png) no-repeat -100px -100px;
}

2.字体图标iconfont

2.1字体小图标的产生

字体图标使用场景:主要用于显示网页中通用、常用的一些小图标。

精灵图是有诸多优点的,但是缺点很明显。

图片文件还是比较大的。
图片本身放大和缩小会失真。
一旦图片制作完毕想要更换非常复杂。

此时,有一种技术的出现很好的解决了以上问题,就是字体图标iconfont。

字体图标可以为前端工程师提供一种方便高效的图标使用方式,展示的是图标,本质属于字体。

2.2字体图标的优点

轻量级:一个图标字体要比一系列的图像要小。一旦字体加载了,图标就会马上渲染出来,减少了服务器请求
灵活性:本质其实是文字,可以很随意的改变颜色、产生阴影、透明效果、旋转等

兼容性:几乎支持所有的浏览器

注意:字体图标不能替代精灵技术,只是对工作中图标部分技术的提升和优化。

总结:

如果遇到一些++结构和样式比较简单++ 的小图标,就用++字体图标++。
如果遇到++一些结构和样式复杂一点++ 的小图片,就用++精灵图。++

2.4字体图标的引入步骤***

下载完毕之后,注意原先的文件不要删,后面会用。

iconfont-阿里巴巴矢量图标库

SVG Icon Libraries and Custom Icon Font Organizer ❍ IcoMoon

把下载包里面的fonts文件夹放入页面根目录下
**在CSS样式中全局声明字体:**简单理解把这些字体文件通过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;

}
}</span>

使用的时候需要引入小方框
这时显示的是一个方框，必须要指定一个字体，这个字体与font里面一致，所以需要：

2.4.1字体文件格式

不同浏览器所支持的字体格式是不一样的,字体图标之所以兼容,就是因为包含了主流浏览器支持的字体文件。

TureType(.ttf)格式.ttf字体是Windows和Mac的最常见的字体,支持这种字体的浏览器有IE9+、Firefox3.5+、 Chrome4+
Web Open Font Format(**.woff)**格式woff字体,支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、 Safari3.6+, Opera11.1+ ;
Embedded Open Type(.eot)格式.eot字体是IE专用字体,支持这种字体的浏览器有IE4+;
SVG(.svg)格式.svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有Chrome4+、Safari3.1+、 Opera10.0+, iOS Mobile Safari3.2+ ;Safari3+, Opera10+, iOS Mobile, Safari4.2+ ;

2.5字体图标的追加

如果工作中,原来的字体图标不够用了,我们需要添加新的字体图标到原来的字体文件中。

把压缩包里面的selection.json从新上传,然后选中自己想要新的图标,从新下载压缩包,并替换原来的文件即可。

CSS三角

网页中常见一些三角形，使用CSS直接画出来就可以，不必做成图片或者字体图标

css 复制代码

<style>
	.box{
		width: 0;
		height: 0;
		border-top: 10px solid pink;
		border-right: 10px solid red;
		border-bottom: 10px solid blue;
		border-left: 10px solid green;
	}
</style>

<body>
	<div class="box"></div>
</body>

如果一个盒子没有大小，高度宽度都是0，再给四个边框，那么每一个边框的本质都是三角形

那么实现三角形就只需要将不需要的三个边设置为透明色transparent

css 复制代码

.box{
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-top-color: pink;
}

三角的大小取决于边框的大小

CSS三角强化

border-radius其实还分内半径和外半径。而我们设的border-radius的值是指外半径。

内半径=外半径减去border宽度。

因此当border-radius的值小于或等于border的宽度时，边框内部将不具有圆角效果。