CSS 图像精灵怎么用(css sprites定位技术)

我们在做前端页面的时候,网页中通常包含有很多小图标,这就用到了css sprites技术。把所有小图标放到一张图上,这样可以减少对服务器的请求次数。提高我们的访问速度。CSS 图像精灵的优缺点是什么?CSS 图像精灵怎么用?下面我们依次对这些问题来解答。

操作方法

  • 01

    问题一:CSS 图像精灵怎么用 首页我们需要对我们的项目充分的熟悉了解。整体的项目中大概都包含哪些图标,怎么分类,这样才能拼出有便于后期维护的图像。然后打开ps软件,新建画布,我这里建的画布大小为300X150,在具体项目中大家可以根据实际情况来决定建立的画布大小。

  • 02

    打开我们的项目文件。如果公司前端和设计分的比较清楚的话,前端只需要让设计提供出需要的icon图标即可。我们也可以根据设计提供的稿子,来完成自己切出来图标。如图所示,在ps中先拉出参考线,然后选择切片工具,对我们需要的图标完成切片。

  • 03

    完成切片后选择存储为web所用格式。确定后选择所有用户切片(选择这个选项可以导出我们切的图标,其余不相干的图都不会导出哦。)

  • 04

    这就是我们切好导出的图标了,我改了改图标的名字。

  • 05

    根据自己图标的多少和大小大致估算出自己建立的画布大小。如图所示,把图标放到新建的画布里面,并且有序的排列好。

  • 06

    接下来我们就可以在页面中使用这些图标了。如下图所示是我做出来的代码和在浏览器中的效果

  • 07

    图标的位置是怎么快速准确的找到的?这里的位置以左上角开始,x轴,y轴的值均为负值。用切片选择工具选择图标,右键点击,选择编辑切片选项,看到的x,y值即为图标的位置。(需要加上负值哦)

(0)

相关推荐

  • 室内定位,六种主流室内定位技术对比!

    室内场景越来越庞大复杂,大型商超.综合性医院.机场.停车场等场所对于定位和导航的需求也逐渐增多.大型商超希望能够借助室内定位技术为前来购物的消费者提供实时导引服务,同时基于位置提供对应的营销服务.医院 ...

  • CSS教程:创建性感的CSS样式表

    操作方法 01 作为一个css方面的专家,所做的不只是记住选择符(selectors)那么简单,提升样式表的效用和可维护性,以及设计蓝图和管理工作流程都是工作的一部分.在本篇文章中,jina bolt ...

  • css制作放大缩小图标;css制作放大镜

    浏览器商城网站,会发现很多商城图片都是可以放大进行查看图片细节部分,采用放大镜缩小图标代替文字可以给予用户更好的体验效果.放大缩小图标其实可以直接使用css进行制作.(注意:最后一个步骤含有小图标所有 ...

  • css选择器怎么使用,css有哪些选择器

    css选择器无疑是css代码中最重要的一环,要使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器.HTML页面中的元素就是通过CSS选择器进行控制的. 所以合 ...

  • css设置表格边框合并;css设置table边框合并

    table表格是制作前端常常需要使用到的一个标签,表格边框默认是不合并的,通过使用border-collapse:collapse可以对表格设置合并的边框效果. 操作方法 01 打开前端开发工具,新建 ...

  • 8款方便快捷的的CSS开发工具

    当你开发一个网站或Web应用程序的时候,有合适的工具,绝对可以帮助您节省大量的时间。在这篇文章中,我为大家收集了超有用的 CSS 开发工具。 对于 Web 开发人员来说,找到有用的CSS 开发工具,就 ...

  • DW中如何设置CSS面板

    dreamweaver中如何设置CSS面板 操作方法 01 首先这里我们是需要你新建一个HTML文档的,这里我们直接打开工具,之后选择新建HTML即可 02 建立完毕之后这里我们使用快捷键,Shift ...

  • 用css配合HTML代码制作导航条下拉面板

    导航下拉面板能让导航装载更多的内容,添加更多的关键词,有利于优化,也使网站显得更加高端大气,如果您需要,我就来提供! 操作方法 01 首先我们来看看下拉面板的效果吧,这个事稍微复杂一点的下拉面板,我们 ...

  • div+css网页设计基础教程

    div+css是一个网页设计师,程序员必经之路,是网站建设的基础!div+css是网页设计的最重要的元素. 操作方法 01 一.准备工作,电脑一套,Dreamweaver(网页设计软件) Dreamw ...