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无图片技术:三角形的更多相关文章

  1. 网站性能优化(Yahoo 35条)

    Yahoo 网站性能优化 35条 一.内容部分 尽量减少 HTTP请求 减少 DNS查找 避免跳转 缓存 Ajxa 推迟加载 提前加载 减少 DOM元素数量 用域名划分页面内容 使 frame数量最少 ...

  2. Yahoo团队经验:网站性能优化的34条黄金法则

    Yahoo团队总结的关于网站性能优化的经验,非常有参考价值.英文原文:http://developer.yahoo.com/performance/rules.html 1.尽量减少HTTP请求次数 ...

  3. Yahoo网站性能优化的34条规则

    摘自:http://blog.chinaunix.net/uid/20714478/cid-74195-list-1.html Yahoo网站性能优化的34条规则 1.尽量减少HTTP请求次数 终端用 ...

  4. input屏蔽历史记录 ;function($,undefined) 前面的分号是什么用处 JSON 和 JSONP 两兄弟 document.body.scrollTop与document.documentElement.scrollTop兼容 URL中的# 网站性能优化 前端必知的ajax 简单理解同步与异步 那些年,我们被耍过的bug——has

    input屏蔽历史记录   设置input的扩展属性autocomplete 为off即可 ;function($,undefined) 前面的分号是什么用处   ;(function($){$.ex ...

  5. Yahoo! 35条网站性能优化建议

    Yahoo! 35条网站性能优化建议 Yahoo!的 Exceptional Performance团队为改善 Web性能带来最佳实践.他们为此进行了一系列的实验.开发了各种工具.写了大量的文章和博客 ...

  6. 网站性能优化实战——从12.67s到1.06s的故事

    文章摘自https://juejin.im/post/5b0b7d74518825158e173a0c 作为互联网项目,最重要的便是用户体验.在举国“互联网+”的热潮中,用户至上也已经被大多数企业所接 ...

  7. asp.net网站性能优化2则

    摘要:Web服务器的性能优化有很多资料介绍了,多台主机负载均衡,查询结果的多级缓 存,数据库索引优化等都是常见的优化手段.随着后端优化空间越来越小,现在越来越多 的网站更注重前端性能的优化,就是浏览器 ...

  8. 网站性能优化小结和spring整合redis

    现在越来越多的地方需要非关系型数据库了,最近网站优化,当然从页面到服务器做了相应的优化后,通过在线网站测试工具与之前没优化对比,发现有显著提升. 服务器优化目前主要优化tomcat,在tomcat目录 ...

  9. Yslow网站性能优化工具

    Yslow是一款网站性能优化的插件:

随机推荐

  1. 算法训练 Torry的困惑(基本型)

    http://lx.lanqiao.org/problem.page?gpid=T129 算法训练 Torry的困惑(基本型)   时间限制:1.0s   内存限制:512.0MB      问题描述 ...

  2. const修饰

    const int A() //const // ====>int A(const this) { //观点1:const是修饰a,但是通过测试,我们发现,b++也不能编译通过 //这说明:co ...

  3. 封装smarty类

    <?php/** * Project:     Smarty: the PHP compiling template engine * File:        Smarty.class.php ...

  4. YbRapidSolution.Mvc判断不同用户登录不同页面

    AccountController.cs using System; using System.Collections.Generic; using System.Linq; using System ...

  5. oracle文件版本

    strings -a  $AU_TOP/forms/US/GLXFCRVL.fmb|grep '$Header' 比如 strings -a /u02/CRP2/apps/apps_st/appl/a ...

  6. 夺命雷公狗ThinkPHP项目之----企业网站17之网站配置页的添加

    为了网站可以智能一点,所以我们开始来写一个网站配置的功能.. 所以我来写他的数据表: 先来完成他的添加功能,页面效果如下所示: lists.html代码如下所示: <!doctype html& ...

  7. RobotFramework 安装配置(一)

    服务器接口的测试框架的选择,最后选中了 RobotFramework ,原因一:能有效的管理测试用例,,支持批量执行,能实现关键字驱动或者数据驱动.原因二:支持测试人员可以使用Python和java创 ...

  8. 【海岛帝国系列赛】No.7 海岛帝国:神圣之日

    50237242海岛帝国:神圣之日 [试题描述] 战争持续九个月了.“购物券”WHT的军队还在跟恐怖分子僵持着.WHT和LJX已经向“公务员”告急,情况不宜乐观.YSF为守护帝国决定打开“够累 的”星 ...

  9. sql server 2008 安装过程与创建建sql server登录用户

    1.sql server 下载安装包路径:http://pan.baidu.com/s/1qWuzddq 2.安装过程图解教程 ,参照网址:http://jingyan.baidu.com/album ...

  10. Angularjs之controller 和filter(四)

    Controller组件(http://www.angularjs.cn/A00C) 在AngularJS中,控制器是一个Javascript函数(类型/类),用来增强除了根作用域以外的作用域实例的. ...