CSS图片垂直居中方法整理集合
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">
<!--
* {margin:0;padding:0}
div {
width:500px;
height:500px;
border:1px solid #ccc;
overflow:hidden;
position:relative;
display:table-cell;
text-align:center;
vertical-align:middle
}
div p {
position:static;
+position:absolute;
top:50%
}
img {
position:static;
+position:relative;
top:-50%;left:-50%;
width:276px;
height:110px
}
-->
</style>
<div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div>
</pre class="html">
<strong>标准浏览器下另类方法:</strong>
<pre class="html">
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">
<!--
body {
margin:0;padding:0
}
div {
width:500px;
height:500px;
line-height:500px;
border:1px solid #ccc;
overflow:hidden;
position:relative;
text-align:center;
margin:auto
}
div p {
position:static;
+position:absolute;
top:50%
}
img {
position:static;
+position:relative;
top:-50%;left:-50%;
width:276px;
height:110px;
vertical-align:middle
}
p:after {
content:".";font-size:1px;
visibility:hidden
}
-->
</style>
<div><p><img src="http://www.google.com/intl/en/images/logo.gif"/></p></div>
查看全部
鼠标移到input后GOOGLE的图片会消失，鼠标移走后又显示
演示：http://wlog.com.cn/code/javascript/google-input/google-input.html
<style type="text/css">
.input{ background:url(http://wlog.com.cn/code/javascript/google-input/google_custom_search_watermark.gif) no-repeat}
input {margin:0; padding:0;}
</style>
<script type="text/javascript">
window.onload = function (){
var oInput = document.getElementById("textfield");
var bf=0
oInput.onmouseout = function(){
if (this.value==''&& bf==0)this.className='input';
}
oInput.onblur= function(){bf=0;if (this.value=='')this.className='input';}
oInput.onfocus= function(){bf=1;this.className='';}
}
</script>
<input type="text" name="textfield" id="textfield" class="input" />
CSS的简单在于它易学，CSS的困难在于寻找更好的解决方案。在CSS的世界里，似乎没有完美这种说法。所以，现在介绍的CSS绝对底部，只是目前个人见过的方案中比较完美的吧。
先说我们为什么会使用到这个CSS底部布局解决方案:
当做一个页面时，如果页面内容很少，不足于填充一屏的窗口区域，按普通的布局，就会出现下面图片中的样子(也就是底部内容并没有位于窗口的底部，而留下了大量空白。
对于追未完美的设计师来说，这是不美观的。网上有一些解决方案，但会出现当改变窗口高度时，底部和正文重叠的BUG。尽管没有多少人会有事没事儿的去改变窗口高度，但设计嘛，追求的就是尽善尽美。
查看全部
一. HTTP压缩概述
HTTP压缩是在Web服务器和浏览器间传输压缩文本内容的方法。HTTP压缩采用通用的压缩算法如gzip等压缩HTML、JavaScript或CSS文件。压缩的最大好处就是降低了网络传输的数据量，从而提高客户端浏览器的访问速度。当然，同时也会增加一点点服务器的负担。Gzip是比较常见的一种HTTP压缩算法。
本文介绍的HTTP压缩方式，采用的是Windows系统设置的方式，优点是效率较高。
二. HTTP压缩工作原理
Web服务器处理HTTP压缩的工作原理如下：
Web服务器接收到浏览器的HTTP请求后，检查浏览器是否支持HTTP压缩；
如果浏览器支持HTTP压缩，Web服务器检查请求文件的后缀名；
如果请求文件是HTML、CSS等静态文件，Web服务器到压缩缓冲目录中检查是否已经存在请求文件的最新压缩文件；
如果请求文件的压缩文件不存在，Web服务器向浏览器返回未压缩的请求文件，并在压缩缓冲目录中存放请求文件的压缩文件；
如果请求文件的最新压缩文件已经存在，则直接返回请求文件的压缩文件；
如果请求文件是ASPX等动态文件，Web服务器动态压缩内容并返回浏览器，压缩内容不存放到压缩缓存目录中。
三. IIS 6.0中配置HTTP Gzip压缩的步骤:
1) 打开Internet信息服务(IIS)管理器，右击”网站”->”属性”，选择”服务”。在”HTTP压缩”框中选中”压缩应用程序文件”和”压缩静态文件”，按需要设置”临时目录”和”临时目录的最大限制”；
2) 在Internet信息服务(IIS)管理器，右击”Web服务扩展”->”增加一个新的Web服务扩展…”，在”新建Web服务扩展”框中输入扩展名”HTTPCompression”，添加”要求的文件”为C:\WINDOWS\system32\inetsrv\gzip.dll，其中Windows系统目录根据您的安装可能有所不同，选中”设置扩展状态为允许”；
3) 使用文本编辑器打开C:\Windows\System32\inetsrv\MetaBase.xml(建议先备份),找到Location =”/LM/W3SVC/Filters/Compression/gzip”，如果需要压缩动态文件，则将HcDoDynamicCompression设置为”TRUE”，并在HcScriptFileExtensions中增加您要压缩的动态文件后缀名，如aspx；如果需要压缩静态文件，则将HcDoStaticCompression和HcDoOnDemandCompression设置为”TRUE”，并在HcFileExtensions中增加您需要压缩的静态文件后缀名，如xml、css等；HcDynamicCompressionLevel和HcOnDemandCompLevel表示需要的压缩率，数字越小压缩率越低；
4) 编辑完毕后保存MetaBase.xml文件；如果文件无法保存，则可能IIS正在使用该文件。打开”开始”->”管理工具”->”服务”，停止”IIS Admin Service”后，即可保存；
5) 最后，重新启动IIS。可以到HTTP压缩测试网站验证结果。
IE 官方提供的 IE5 到 IE8 的 CSS 兼容列表： 《CSS Compatibility and Internet Explorer》
很好的参考资料，可以方便帮助大家了解和熟悉各 IE 浏览器之间 CSS 的兼容情况。
原文：http://developer.yahoo.com/performance/rules.html
2007.3.20 Steve Souders
Translated by mask
从2004年开始，我开始进入雅虎的异常表现小组。我们是一个很小的队伍，专门针对雅虎的产品进行质量检测和改进，我作为一个后端工程师，现在却开始捣鼓前端代码优化方面的工程，所以我认为这是一个极好的进步的机会。我的目标是改进用户端体验，我度量了在各个带宽下浏览器的响应时间，得出如下的一个图表，它展示了来自http://yahoo.com的http的流量。
高性能表现的网站
以上图标的第一个标签就是html，是一个html文档最开始加载的东东，在这个例子中，读取html代码只占了整个响应时间中的5%，这个结果适用于绝大多数网站，在采样美国的前十位网站中，只有一家超过5%但少于20%，其余80%的时间是用来读取网页其他内容的，也就是说，前端（原文是front-end，意思就是不包括html代码的其余内容，可以是图片，脚本，flash，视频，各种东西）。这就是为什么我们要把目光集中在这些东西来提高显示速度的关键原因。
阅读全文
//自身属性
width height margin padding border background
//显示属性
display list-style position float clear
//文本属性
color font text-decoration text-align vertical-align white-space other text content
良好的命名规范可以为团队合作开发推波助澜，无论在项目开发，还是产品维护上都起到了至关重要的作用。应该说命名规范是一种约定，也是程序员之间良好沟通的桥梁。
阅读全文
１、必备工具
其实web标准并不是很复杂的技术，实现web标准的工具也很简单，说白了，只要可以进行纯文本编辑的软件，都可以作为代码编写的gon工具。例如记事本、UltraEdit甚至CuteFTP的编辑器（象我这种懒人有时候就用那玩艺儿直接在线编辑，汗）。
而另一些较专业软件会提供高亮显示代码（前面提到的UltraEdit也具有此项功能）、代码提示、自动闭合标签等等功能，使用起来会大大提高工作效率。如DreamWeaver、MS Expression、EditPlus等等，这些编辑软件目前是绝对的主流，无论是初学者上手容易还是专业人士提高效率都是不错的选择。
再说说浏览器环境，目前一台机器同时装IE、Firefox、Opera、Safari已经不是难事，而IE7 Standalone和MultipleIE的问世也让IE7和低版本IE并存成为可能。推荐浏览器环境——本机安装IE7、FF、Opera、Safari，同时安装MultipleIE。从我个人的使用经验，IE7 Standalone存在一定的缺陷，有可能导致本机安装的IE6无法正常使用。
除了编辑器以外，还有就是必不可少的调试工具啦，首推当然是Firefox下的Firebug！IE下目前还没有与之相当的调试工具，比较好的有IE development toobar、IE Debugbar等等，不过和Firebug完全不是一个档次的东西，只能说勉强凑合用。
阅读全文