前端页面重构切图优化

定义 CSS:

初始化样式:

公共样式:

切图方式:
打开PSD文件,点击选择按钮,选中自动选择,下拉选择图层,然后点击要选择的图层(特殊的转换为智能对象),然后用虚线框选出来,
复制粘贴到一个空白文件。

点击直接拨号
<a href="tel:123-456789">123-456789</a>

时间: 2024-10-07 19:15:29

前端页面重构切图优化的相关文章

前端技术-PS切图

页面制作部分之PS切图 <--本标签下,通过页面制作.页面架构.javascript程序设计.DOM编程艺术.产品前端架构五部分来分享总结笔记,总结笔记会陆续分享--> 网页设计在技术层面上,第一步是美工做出网页效果图,第二步就是网页前端进行网页切图.网页切图工具常用的有fireworks.PS,这里使用PS进行网页切图. 我们通过设计稿,得到我们想要的产出物(如.png,.jpg文件),给网页提供图片素材(HTML:img,CSS:background). 一.使用PS工具 1.1 PS首选

前端PS常用切图技巧

前言:前端涉及到的 ps 操作不算复杂,基本上就是切图,本文总结了常用的几种切图技巧. 工具:photoshop cs6 . photoshop cc 1. 传统切图 01 这是最笨的一种方法,核心就是用选区工具选中我们要的切图区域,复制到新文件,然后整个保存下来,这样的切图方法几乎没有可取之处,不过我最初确实就是这样干的... 2. 传统切图 02 这种效率要高一些,可以同时切多个图片,用切片工具选中多张我们需要的图片区域,点击文件->保存为 web 所用格式,这种方法的缺点是默认会保存多张图

重构切图相关

很久不做设计,貌似对设计相关的事了解少了许多,之前做H5时需要频繁切图,本来准备自己写个小工具来计算切图位置,后来了解到CC版本的PS有一些新增的功能(例如复制CSS),另外也有国人写了更方便的切图扩展工具,但是PS版本什么的一直安装上总是各种问题,但却总是因为各种事情一直搁置,今天耐下心来都安装完毕,以自己WIN7为例介绍一下. 1.清除注册表信息 - A - AdobeCreativeCloudCleanerTool.exe 因为需要安装扩展,扩展器总是各种安装不成功,原因是安装过Adobe

谈谈前端怎样布局切图,程序可以方便快捷添加程序

一个合格的前端,布局好的前端页面,应该是可用的,避免需要程序大量二次加工的.工作到现在合作过的前端大概也有上百个了,有合作起来感觉很顺手的,也有很多感觉只能顺手修改调整不能再经前端的手了,差别很大.一个程序员到底想要前端怎么去做,作为一个程序员,实在不想重复去做调整各种各样css,js,有时候总是想象前端稍微懂点程序,有点程序基础就好了,那样他们可能就不会那样布局了,现实很骨感啊,现在对前端要求已经降低了很多,最起码能用. 一.文件夹,文件名 清晰的目录,合理的文件名能减少不少胡思乱想.如:目录

前端页面重构技巧总结TIP【持续更新...】

本文均为项目实战经验,要求兼容至IE8,所以以下内容均为兼容代码,欢迎各位小伙伴批评指教.其实重构页面是一门学问,看似简单,却暗藏很多学问.实际项目中页面的重构有以下几点最基本需求: 1.需要使用合理的标签进行语义化: 2.可扩展性,在页面的某个标签内增加新的内容(文字或标签),不会对原有内容造成影响. 3.当页面接受后台数据时,标签内容替换后,页面布局与样式不会受到影响. 4.兼容性(根据项目需要) 页面重构基本思想: 1.渐进增强思想(以兼容要求的最低版本为基础,主键向高层次的浏览器靠拢):

前端页面加载速度优化---Ngnix之GZIP压缩

gzip on; #开启Gzip gzip_static on;#是否开启gzip静态资源 #nginx对于静态文件的处理模块,该模块可以读取预先压缩的gz文件,这样可以减少每次请求进行gzip压缩的CPU资源消耗.该模块启用后,nginx首先检查是否存在请求静态文件的gz结尾的文件,如果有则直接返回该gz文件内容.为了要兼容不支持gzip的浏览器,启用gzip_static模块就必须同时保留原始静态文件和gz文件.这样的话,在有大量静态文件的情况下,将会大大增加磁盘空间.我们可以利用nginx

ps切图详解-web前端(转)

网页设计在技术层面上,第一步是美工做出网页效果图,第二步就是网页前端进行网页切图.网页切图工具常用的有fireworks.PS,这里使用PS进行网页切图. 我们通过设计稿,得到我们想要的产出物(如.png,.jpg文件),给网页提供图片素材(HTML:img,CSS:background). 一.使用PS工具 1.1 PS首选项设置 编辑->首选项->单位与标尺,选改为像素. 1.2 面板 在"窗口"菜单下开启: 工具(默认已开启) 选项(默认已开启) 图层(默认已开启)

页面制作部分之PS切图

页面制作部分之PS切图 <--本标签下,通过页面制作.页面架构.javascript程序设计.DOM编程艺术.产品前端架构五部分来分享总结笔记,总结笔记会陆续分享--> 网页设计在技术层面上,第一步是美工做出网页效果图,第二步就是网页前端进行网页切图.网页切图工具常用的有fireworks.PS,这里使用PS进行网页切图. 我们通过设计稿,得到我们想要的产出物(如.png,.jpg文件),给网页提供图片素材(HTML:img,CSS:background). 一.使用PS工具 1.1 PS首选

GIS切图性能调优

现状及目标 DellR920服务器,虚拟化VMWARE VSPHERE 5.5系统,Guest系统Windows Server 2012 R2.部署软件ARCGIS 10.影像图切图测试:原有切图耗时70小时,现在耗时17小时.依然有继续优化的空间.调试目标: 1.        验证虚拟化环境下的最佳切图参数配置,出具虚拟化环境下ArcGIS10的最佳性能配置方法. 2.        验证SSD应用的有效性,分别测试SSD SRT技术.切图缓存技术.ESXi主机缓存技术.SAS 12GB规格