摘要：
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的主流浏览器识别的垂... 阅读全文