网站性能优化之CSS无图片技术:三角形
1、使用CSS无图片技术,可以总结得到以下三个优点:
减少请求资源的大小;
减少http的请求个数;
提高可维护性。
一、CSS无图片技术,微博中有哪些实际应用呢?
通过上面的展示,我们可以看到,无图片技术,在微博上应用是十分普遍的。
二、无图片技术的实现方式:
大概有四种方式:一是通过background-color、border生成图片;二是通过字符生成图片;三是通过CSS3的gradient等生成图片(这个要考虑低级浏览器不兼容的问题);四是CSS3的自定义字体(@font-face)生成图片。
利用CSS的background-color、border属性可以生成一些图形,例如三角形。纯粹的CSS2内容,完成可以兼容IE6。
1)用background-color生成的小方块,效果如下:
CSS代码:
2)用border生成的小方块,效果如下:
CSS代码:
3)用border生成的小三角,效果如下:
CSS代码:
4)用border生成的尖三角,效果如下:
CSS代码:
5)用border生成的斜三角,效果如下:
HTML结构:
CSS代码:
通过以上五种图形,可以得到以下图形,效果图如下:
二、通过字符生成图片,例如尖角,圆点以及箭头,这也是CSS2范畴,完全可以兼容IE6,这个在博中使用广泛,这里不单独写demo了。
1)圆点(alt+41457),效果图如下
HTML结构:
CSS样式:
网站性能优化之CSS无图片技术:三角形的更多相关文章
- 网站性能优化(Yahoo 35条)
Yahoo 网站性能优化 35条 一.内容部分 尽量减少 HTTP请求 减少 DNS查找 避免跳转 缓存 Ajxa 推迟加载 提前加载 减少 DOM元素数量 用域名划分页面内容 使 frame数量最少 ...
- Yahoo团队经验:网站性能优化的34条黄金法则
Yahoo团队总结的关于网站性能优化的经验,非常有参考价值.英文原文:http://developer.yahoo.com/performance/rules.html 1.尽量减少HTTP请求次数 ...
- Yahoo网站性能优化的34条规则
摘自:http://blog.chinaunix.net/uid/20714478/cid-74195-list-1.html Yahoo网站性能优化的34条规则 1.尽量减少HTTP请求次数 终端用 ...
- input屏蔽历史记录 ;function($,undefined) 前面的分号是什么用处 JSON 和 JSONP 两兄弟 document.body.scrollTop与document.documentElement.scrollTop兼容 URL中的# 网站性能优化 前端必知的ajax 简单理解同步与异步 那些年,我们被耍过的bug——has
input屏蔽历史记录 设置input的扩展属性autocomplete 为off即可 ;function($,undefined) 前面的分号是什么用处 ;(function($){$.ex ...
- Yahoo! 35条网站性能优化建议
Yahoo! 35条网站性能优化建议 Yahoo!的 Exceptional Performance团队为改善 Web性能带来最佳实践.他们为此进行了一系列的实验.开发了各种工具.写了大量的文章和博客 ...
- 网站性能优化实战——从12.67s到1.06s的故事
文章摘自https://juejin.im/post/5b0b7d74518825158e173a0c 作为互联网项目,最重要的便是用户体验.在举国“互联网+”的热潮中,用户至上也已经被大多数企业所接 ...
- asp.net网站性能优化2则
摘要:Web服务器的性能优化有很多资料介绍了,多台主机负载均衡,查询结果的多级缓 存,数据库索引优化等都是常见的优化手段.随着后端优化空间越来越小,现在越来越多 的网站更注重前端性能的优化,就是浏览器 ...
- 网站性能优化小结和spring整合redis
现在越来越多的地方需要非关系型数据库了,最近网站优化,当然从页面到服务器做了相应的优化后,通过在线网站测试工具与之前没优化对比,发现有显著提升. 服务器优化目前主要优化tomcat,在tomcat目录 ...
- Yslow网站性能优化工具
Yslow是一款网站性能优化的插件:
随机推荐
- 快速搭建企业subversion
快速搭建企业subversion 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 我们公司用的版本控制控制系统就是subversion(简称SVN),不得不说这是一款比较好使的管理工 ...
- win7旗舰版梦幻主题补丁~完美你的桌面
随着VISTA和WIN7的逐渐普及,你是否想拥有一个与众不同的动态桌面呢~ Windows DreamScene属于Ultimate Extras的组件之一,而Ultimate Extras是专门为W ...
- 自己使用Fresco时遇到的相关问题
Fresco是facebook推出的一款强大的android图片处理库,github地址:https://github.com/facebook/fresco 里面有官方的使用配置文档,而且是中文的. ...
- AR 应收 表
AR 应收 应收事务处理相关表 SELECT * FROM ar.ar_batches_all; --事务处理批 SELECT * FROM ar.ra_custom ...
- 夺命雷公狗---Thinkphp----3之后台搭建
我们这里来搭建我们网站所需要用到的后台: 我们直接打开WEB目录,然后直接赋值Home文件粘贴并改名为Admin,效果如下所示: 然后修改他的控制器: 代码修改成如下所示: <?php name ...
- 夺命雷公狗jquery---4内容选择器
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- zw版【转发·台湾nvp系列Delphi例程】HALCON DispCross
zw版[转发·台湾nvp系列Delphi例程]HALCON DispCross procedure TForm1.Button1Click(Sender: TObject);var r, c : Ol ...
- android 学习随笔六(网络要求及配置)
android在4.0之后已经不允许在主线程执行http请求了. 主线程阻塞,应用会停止刷新界面,停止响应用户任何操作,耗时操作不要写在主线程 只有主线程才能修改UI ANR异常:Applicat ...
- docker RESTful API
https://docs.docker.com/engine/reference/api/docker_remote_api/
- ExtJS的MessageBox总结
自己写了个ExtJS的MsgBox的小模版,以后遇到需要使用提示的地方就拿过来改改,免得每次都重新写. /**MsgBox start**/ Ext.Msg.buttonText.yes = &quo ...