摘要：
最近 Yahoo! Exceptional Performance 在 《优化网站性能的 14 条规则》的基础上又增加了 20 条新的规则。1. 尽早清除缓冲区[server]2. AJAX 请求使用“GET”方法[server]3. 延迟加载组件[content]4. 预加载组件[content]5. 减少 DOM 元素的数量[content]6. 跨域分离组件[cont... 阅读全文
摘要：
一年前网上还找不到关于 inline-block 属性的文章，为了方便大家更好的理解该属性，当时总结整理了篇《display:inline-block的深入理解》。而现在对于 inline-block 属性运用的需求也越来越多，可惜依旧只有 Firefox3 beta、IE8 beta、Opera、Safari 支持 inline-block 属性（注：原来只有 Opera、Safari 支持），... 阅读全文
摘要：
//显示属性displaylist-stylepositionfloatclear//自身属性widthheightmarginpaddingborderbackground//文本属性colorfonttext-decorationtext-alignvertical-alignwhite-spaceother textcontent 阅读全文
摘要：
优化网站性能的14条规则（更新）1. 尽可能的减少 HTTP 的请求数[content]2. 使用 CDN（Content Delivery Network）[server]3. 添加 Expires 头(或者 Cache-control )[server]4. Gzip 组件 [server]5. 将 CSS 样式放在页面的上方[css]6. 将脚本移动到底部（包括内联的）[javascript... 阅读全文
摘要：
有时候在一个页面用到收放功能的时候时，总有一个虚线框在触发收放的功能按钮上，显得特别刺眼，那如何去除这个虚线框呢？虽然从可用性的角度，隐藏虚线框的做法会让键盘偏执狂不满。但从视觉上，有时候虚线框确实影响美观。方法一：IE 下可使用其私有的html属性：hideFoucs，在标签的结构中加入 hidefocus=”true” 属性。即：<a href="http://w... 阅读全文
摘要：
//显示属性displaylist-stylepositionfloatclear//自身属性widthheightmarginpaddingborderbackground//文本属性colorfonttext-decorationtext-alignvertical-alignwhite-spaceother textcontent 阅读全文
摘要：
表格的 cellspacing 和 cellpadding 我们经常会用如下的方式来清除默认样式：<table cellspacing="0" cellpadding="0"></table>很多朋友会说表现在结构中，这样不符合标准，那如何将这个表现拿出来，有些朋友或许很迷惑。我们可以用 table 的 border-collapse: collapse; 属性 来代替ce... 阅读全文
摘要：
margin 在中文中我们翻译成外边距或者外补白（本文中引用外边距）。他是元素盒模型（box model）的基础属性。一、margin的基本特性margin 属性包括 margin-top, margin-right, margin-bottom, margin-left, margin，可以用来设置 box 的 margin area。属性 margin 可以用来同时设置 box 的四边外边距，... 阅读全文
摘要：
1、使用 fieldset 和 legend标签 在 form 中，我们经常会对 form 中的信息进行分组，比如注册 form ，我们可能会将注册信息分组成基本信息（一般为必填），详细信息（一般为可选），那我们如何更好的来实现呢？我们可考虑在 form 中加入下面两个标签：fieldset：对表单进行分组，一个表单可以有多个fieldset legend：说明每组的内容描述 <form i... 阅读全文
摘要：
form 无论是在网站的制作中，还是在网站的重构中，我们都会频繁地“碰面”，当“碰面”的次数多了，反而觉得他更让人迷茫，有种熟悉的“陌生”，越来越把握不了他。下面我们将带大家走进 form 的世界，一起来熟悉、探讨、掌握他的“脾性”。对于简单 form 的设计图（如图，yahoo 注册页面的一部分），我... 阅读全文
摘要：
分别定义各种浏览器的透明效果：.transparent{filter:alpha(opacity=12);-moz-opacity:0.12;opacity:0.12;background-color:#000;}filter:alpha(opacity=12); 支持 IE 浏览器 -moz-opacity:0.12; 支持 FireFox 浏览器 opacity:0.12; 支持 Opera，... 阅读全文
摘要：
尽管有 CSS 的 vertical-align 特性，但是并不能有效解决未知高度的垂直居中问题（在一个 DIV 标签里有未知高度的文本或图片的情况下）。标 准浏览器如 Mozilla, Opera, Safari 等.，可将父级元素显示方式设定为 TABLE(display: table;) ，内部子元素定为 table-cell (display: table-cell)，通过 vertica... 阅读全文
摘要：
三角的一个特殊做法：CSS部分：em {display:block;font:0/0 "宋体";border:6px solid;border-color:#fff #fff #fff #000 ;}XHTML部分：<em></em>代码简单，还可以利用border的颜色轻松做出各个方向的三角！ 阅读全文
摘要：
IE中z-index BUG首先先来看一个演示例子的代码部分。XHTML 部分：<div id="container"> <div id="box1">这个box应该在上面</div></div><div id="box2">这个box应该在下面，IE浏览器会对定位元素产生一个新的stacking context ，甚至当元素 z-ind... 阅读全文
摘要：
z-index 属性简介z-index : auto | numberauto: 默认值。number: 无单位的整数值，可为负数 。z-index 值较大的元素将叠加在 z-index 值较小的元素之上。对于未指定此属性的定位对象，z-index 值为正数的对象会在其之上，而 z-index 值为负数的对象在其之下。注意：这个属性不会作用于窗口控件，如 select 对象。在IE5.5+中， i... 阅读全文
摘要：
在使用 CSS 实现表现的时候，会经常接触到 display:inline-block 这一属性，无论是初接触 Web 标准还是接触标准已久的朋友，大都会对这一属性感觉很迷惑和模糊。display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。但对于这个属性不是所有浏览器都识别。支持的浏览器有：Opera、Safari。但很... 阅读全文
摘要：
表达方式：+property:value测试环境：IE5，IE6 ，IE7，FF1.5，FF2.0，Opera 9，Safari 2测试结果：IE5，IE6 ，IE7浏览器识别；FF2.0，Opera 9，Safari 2浏览器不识别。结论：我们可以用”+”来实现只有 IE 识别的 CSS Hack。比如我们要实现在 IE 中 480px 的宽度，而在其他浏览器 500px... 阅读全文
摘要：
“使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。”当然出题并不是随意，而是有其现实的原因，垂直居中是 淘宝 工作中最常遇到的一个问题，很有代表性。题目的难点在于两点：垂直居中； 图片是个置换元素，有些特殊的特性。 至于如何解决，下面是一个权衡的相对结构干净，CSS简单的解决方法：.box { /*非IE的主流浏览器识别的垂... 阅读全文
摘要：
由于连续的字符（字母、符号、数字）在默认情况下是不换行的，可能会破坏整个界面布局。那如何解决这个问题呢？在 IE 和 Safari 1.3+ 下相对比较容易解决，使用 CSS 属性 word-wrap: break-word;。有朋友会问为什么不是使用 word-break:break-all; ，因为有一个特殊的情况，该属性无法解决换行——连续的英文标点符号。注：word... 阅读全文
摘要：
我们在做表单的时候经常会使用到这样的结构：<fieldset> <legend>哪些浏览器legend标签设定的宽度有效</legend> <input type="checkbox" value="ie6" name="width" id="ie6" checked="checked" /><label for="ie6">IE6&... 阅读全文