努力成为一个更全面更专业的SEO内容分享平台! 标签云 | 网站地图

说说网页制作中的图片处理技巧

2018-12-15 00:00 热点资讯 塔尖SEO

百度熊掌号

  做网站这个行业应该知道,网站优化的重要性对一个网站,他们那一部分取决于操作和维护人员,态度决定行动,行为培养性格,性格决定命运严谨思考,严密操作;严格检查,严肃验证。而另一部分则取决于程序和生产人员。因此,作为前端,在重构设计时应该如何处理图像?今天,通过seo优化,您将分享Web生产中的背景图片处理技术。

  第一:在保持图片质量的情况下,尽可能减小图片的大小

  当前端拿到设计稿在进行切图的时候,在存储为web所用格式的时候,可以调整图片的质量来缩小图片

  第二:减少服务器请求次数,图片能少就少,能不用就不用

  在处理图标的时候,把所有可设置成背景图的小图标放置在一张图片上,设置成背景图片,然后在background里调定位即可

  例:现在有一个Search的按钮需要放置图标,便可使用如下方法

  如上图,放大镜的位置是距顶部20px,距左95px

  那我们就可以给Search的button设置背景图片为:

  Background:url(/image/icon.png) 95px 20px no-repeat;

  注意,小萌新不要忘记给button去默认样式,加上尺寸

  还有一种就是设计稿中经常会出现带有底线的标题

  

 

  对于处理这种东西的时候,好多萌新都采用做背景图片的方式来处理这种问题,这就无形中又多了一张图片。其实根本没有必要再去切一张图片,多麻烦啊,有一个叫border-bottom 的东西,完全可以把这个样式玩出来

  首先,外层要给一个p,类名为title(个人习惯),视情况而定给a标签或者是span标签也就是Css如下:

  .title{ width:100%; height:24px; border-bottom:1px solid #999999;}

  .title a{display:block; padding:12px 10px; background:#fff; font-size:24px; line-height:24px; margin:0 auto;}

  p给了宽度和高度分别是100%,高度为24像素,底边1像素实线,颜色为#999;

  文字的标签变为实体,内边距为上下12像素,左右10像素,背景颜色为白色(与设计稿的背景颜色相同)字体大小为24像素,行高24像素,居中。

  现在可以看一下这些数据:p的高是24像素,a标签的高加在一起是48像素,p的高小于a标签的高,也就是a标签溢出了,但是你只要不给p over-flow:hidden的属性,就可以实现上图效果,也就是说减少了图片的使用数量,减少浏览器请求次数。

  网站重构的过程中是十分灵活的,每一个标签,每一个元素都在你的掌握之中,灵活运用,才回做出更好的效果

本文标题说说网页制作中的图片处理技巧,更多SEO优化相关内容请关注收藏本站,谢谢!

(编辑:塔尖SEO)

标签: 百度熊掌号 像素

标题链接: 说说网页制作中的图片处理技巧 https://www.tjseo.org/hot-spot/2734.html

转载请保留本文链接!更多相关文章请浏览 热点资讯 频道。

推荐阅读: