html5语言———精灵图的强大刷新认知 前段大G > 首页 > html5 css3教程 >

html5语言———精灵图的强大刷新认知

CSS高级技巧

·精灵图

所谓精灵图,是把网页里用的小的图片整合在一张图里,避免浏览器向服务器频繁的请求小图片。使用精灵图是为了减少服务器的压力。使用原理是新建小盒子,背景设置为精灵图,移动精灵图使窗口正好显示所要显示的图片,其余图片会被自动隐藏

王者荣耀官网使用的精灵图

使用精灵图核心总结

1.精灵图主要针对于小的背景图片使用

2.主要借助于背景位置来实现-- background-position。

3.一般情兄下精灵图都是负值。(网页中的坐标:x轴右边走是正值,y轴往下为正。)

·字体图标

在开发中我们经常会使用各种小的图标,为了节省资源,可以通过网站来获取自己需要的图标,在开发过程中,我们可以把这类图标当作字体一样改变大小与颜色,十分的方便。

iconfont-阿里巴巴矢量图标库
www.iconfont.cn/
代码引入方法
www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8d11a391&helptype=code

·对话框三角形

先建立一个盒子,设置这个盒子的高度和宽度均为0px,设置四个border值为一样的,若是想让三角形朝向上,则除了border-bottom带有颜色,其他三个border均为透明色(transparent);同样的,若是想朝向右,就让除了左之外的三个盒子均为透明色即可。然后使用绝对定位的方式调整三角形的位置。最终即可实现对话框的样子。

·图片与文字对齐

默认地,图片与文字是按照基线对齐的。除此以外,图片还可以与文字按照顶线、中线与底线进行对齐。

这一样式是使用属性vertical-align进行设定的。要想使图片与文字居中对齐,就要设定为middle。

baseline:元素基线与父元素基线对齐,默认值
bottom:元素底部与父元素底部对齐
top:元素顶部与父元素顶部对齐
middle:元素中线与父元素中线对齐
top: 与父元素顶部对齐

·鼠标样式

li {cursor: pointer; }

设置或检索在对象上移动的鼠标指针采用不同种系统预定义的光标形状

·去掉输入框的蓝色轮廓线

给表单添加 outline: 0;或者 outline:none;样式之后,就可以去掉默认的蓝色边框

·防止拖拽文本域

textarea {resize: none; }

·图片模糊

使图片模糊需要用到css中的filter中的blur()函数,()中填入模糊像素,数值越大,图片越模糊。

img{filter:blur(5px);}

·计算盒子宽度或高度

计算盒子宽度和高度需要用到 calc() 函数,如图代码,可以保证盒子的宽度可以永远保持比父级盒子的宽度小30px。

·过渡效果

过渡( transition)是CSS3中具有颠覆性的特征之一,我们可以在不使用Fash动画或

JavaScript的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。

过渡动画:是从一个状态渐渐的过渡到另外一个状态,可以让我们页面更好看,更动感十足,虽然低版本浏览器不支持(ie9以下版本)但是不会影响 面布局 。

我们现在经常和 hover一起搭配使用。 谁做过渡给谁加!

transition:要过渡的属性  花费时间 运动曲线 何时开始; 

 

 

这篇html5语言———精灵图的强大刷新认知,文章就结束了,有不懂的地方可以联系站长。希望每个前端人员都有可以找到一个好工作,谢谢观看,祝您生活愉快。

前端大G 2023-12-04 14:41 文章点击量: 作者:【前端大G

文章标签: html,教程,CSS3,隐藏,小,技巧,学会,就是,佼佼者