网站性能优化之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是一款网站性能优化的插件:
随机推荐
- 算法训练 Torry的困惑(基本型)
http://lx.lanqiao.org/problem.page?gpid=T129 算法训练 Torry的困惑(基本型) 时间限制:1.0s 内存限制:512.0MB 问题描述 ...
- const修饰
const int A() //const // ====>int A(const this) { //观点1:const是修饰a,但是通过测试,我们发现,b++也不能编译通过 //这说明:co ...
- 封装smarty类
<?php/** * Project: Smarty: the PHP compiling template engine * File: Smarty.class.php ...
- YbRapidSolution.Mvc判断不同用户登录不同页面
AccountController.cs using System; using System.Collections.Generic; using System.Linq; using System ...
- oracle文件版本
strings -a $AU_TOP/forms/US/GLXFCRVL.fmb|grep '$Header' 比如 strings -a /u02/CRP2/apps/apps_st/appl/a ...
- 夺命雷公狗ThinkPHP项目之----企业网站17之网站配置页的添加
为了网站可以智能一点,所以我们开始来写一个网站配置的功能.. 所以我来写他的数据表: 先来完成他的添加功能,页面效果如下所示: lists.html代码如下所示: <!doctype html& ...
- RobotFramework 安装配置(一)
服务器接口的测试框架的选择,最后选中了 RobotFramework ,原因一:能有效的管理测试用例,,支持批量执行,能实现关键字驱动或者数据驱动.原因二:支持测试人员可以使用Python和java创 ...
- 【海岛帝国系列赛】No.7 海岛帝国:神圣之日
50237242海岛帝国:神圣之日 [试题描述] 战争持续九个月了.“购物券”WHT的军队还在跟恐怖分子僵持着.WHT和LJX已经向“公务员”告急,情况不宜乐观.YSF为守护帝国决定打开“够累 的”星 ...
- sql server 2008 安装过程与创建建sql server登录用户
1.sql server 下载安装包路径:http://pan.baidu.com/s/1qWuzddq 2.安装过程图解教程 ,参照网址:http://jingyan.baidu.com/album ...
- Angularjs之controller 和filter(四)
Controller组件(http://www.angularjs.cn/A00C) 在AngularJS中,控制器是一个Javascript函数(类型/类),用来增强除了根作用域以外的作用域实例的. ...