CSS sprites技术加快您的网站(减少网站HTTP请求)
减少网站HTTP请求这是加快网站访问速度的关键,而CSS sprites技术是把多张图像组合成一张图像,这样用户在访问网站时一次性把多张图片加载完,而不需要一张张图片的加载,这样减少了组件的页码,建立更丰富的内容的网站,同时也取得了快速的反应
时间。
以25亿企业网站管理系统中的源码作为实例深刻讲解CSS sprites技术来加快您的网站(减少网站HTTP请求)。
先插入说一个SEO中对网站评分的工具:YSLOW,YSLOW的第一个评分要求就是减少页面上的HTTP请求,其中有一段描述:
终端用户响应的时间中,有80%用于下载各项内容。这部分时间包括下载页面中的图像、样式表、脚本、Flash等。通过减少页面中的元素可以减少HTTP 请求的次数。这是提高网页速度的关键步骤。减少HTTP请求的方法包括:合并Javascript/CSS文件、使用CSS Sprites。
采用了网站优化的综合手段,25亿企业网站管理系统的官方站的网页评级为A,性能评分达到了96(按评测规则集为小型网站或BLOG)。
25亿企业网站管理系统官方用CSS sprites采用的工具是:ImageManipulation,
工具截图:
工具使用简单,直接添加想要合并的图片,下方的选中小图片CSS就会相应的显示需要使用的图片的CSS样式。
此工具的下载地址:http://www.25yi.com/UploadFiles/ImageManipulation.exe.V0.1.1.zip
整合成一张图片的名称是:allbgs.png,如下图所示:
在CSS中代码:
.mframe span.tt4 { display:block; float:left;height:30px;width:122px;background:url(../../images/allbgs.png) no-repeat 0px -272px;color:#fff; font-size:14px; padding-left:8px; text-align:center;padding-top:0px;padding-top:0px;_padding-top:0px;}
.m1{background:url(../../images/allbgs.png) no-repeat 0px -53px; font-size:14px;}
.m2{background:url(../../images/allbgs.png) no-repeat 0px -115px; font-size:14px;}
.m3{background:url(../../images/allbgs.png) no-repeat 0px -148px; font-size:14px;}
.m4{background:url(../../images/allbgs.png) no-repeat -5px -181px; font-size:14px;}
.m6{background:url(../../images/allbgs.png)
相关文档:
dt 和dd中可以再加入 ol ul li和p,理解这些以后,在使用div布局的时候,会方便很多,其实w3c提供了很多元素辅助布局都是有它的用处的,而不尽是div。
块级元素div尽量少用,其实和table一样,嵌套越少越好,它也是会影响速度的!
ol 有序列表。
<ol>
<li>......</li>
<li>......</li& ......
网页开发人员都知道,现在的浏览器对不同的js,css的解析不尽相同,特别是IE早期版本的不规范.不过以后会好一些,现在的浏览器新版本都在向W3C靠拢.现在我们要解决的是现在的问题.
解决css和js针对不同浏览器兼容的问题
首先谈一下浏览器,虽然现在ie依然是浏览器市场的老大,大约占有67%的份额,但是由于其各方面的 ......
50款css工具
引自:http://bbs.seuuo.com/thread-2613-1-3.html
50款CSS工具,包含,CSS网格和布局工具,CSS 优化工具,CSS 菜单生成工具,CSS 按钮生成器,CSS 圆角生成器,CSS 框架,CSS Sprites生成器,CSS 排版工具以及 CSS 表单生成器。
网格和布局The 1KB CSS Grid
新颖的 CSS 网格工具,可用于简化内容管理系统的 ......
<style type="text/css">
<!--
input{ background:expression((this.readOnly &&this.readOnly==true)?"#CCCCCC":"")}
-->
</style>
<body>
<input type="text" name="" />
<input type="text" name="" readonly="readonly" />
expression:处理方式:
  ......
这是我在一个网站上看到的,CSS控制一个菜单,很经典实用
Css文件如下:css.css
@charset "UTF-8";
/* navigation.css
$Revision: 1.0 $
(c) 2008 Fortinet, Inc. All rights reserved.
*/
/* Navigation Styles ------------------------------------------- */
#wrapper
{
width:1000px;margin:0 auto;
}
......