“2007年2月 ”存档日志

:hover 是我们在 CSS 设计中最常运用的伪类之一，许多绚丽效果的实现离不开伪类 :hover，比如我们常见的纯 CSS 菜单、相册效果等等。
或许用了这么久的伪类 :hover，还有部分朋友还不完全了解 hover 的规则：
在 CSS1 中此伪类仅可用于 a 对象。且对于无 href 属性（特性）的 a 对象，此伪类不发生作用。
在 CSS2 中此伪类可以应用于任何对象。
但目前 IE5.5、IE6 仅支持 CSS1 中的 :hover，不过新出的 IE7 是支持 CSS2 中的 :hover。
当我们用伪类 :hover 做某些特殊效果时，依据 CSS2 很好完成，但为了现在占据主流浏览器的 IE6 ，我们又不得不做很多工作，比如给添加a元素等来模拟完成最终的效果。
或许这样讲太空洞，请看下面一个常见的触发显示的例子（仅选择IE6为例讲解）。
我们先用 CSS2 的写法来实现：
XHTML部分：
<... 12 条评论 »

学习标准的朋友，一般都会在学习的过程中接触到CSS滑动门技术，或许大家也都看过这篇文章《CSS中的滑动门技术》，如果你还没接触过或还没看过上文或有点忘记内容，也没关系，可以点击上面的文章链接，先了解或温习一遍。
在《CSS中的滑动门技术》一文中的滑动门例子，大家仔细实验，或许已经发现，链接区有9像素的盲点无法点击，而且在IE下，只能点击文字部分大小，不能点击整个按钮区块。而我们或许期望的是整个按钮区块都可以点击，并且不允许有盲点存在。
那我们又该如何去实现呢？下面我们一起来探讨一些解决方法：
首先为了方便我们先把《CSS中的滑动门技术》中的代码移过来：
XHTML部分：
<div id=”header”>
<ul>
<li><a href=”#”>Home</a></li>
<li id=&#... 2 条评论 »

浏览器环境：

Camino
Firefox 1.0 PR Mac
Firefox 1.0 PR Win
IE 5 Mac
IE 6 Win
Opera 7.53 Mac
Opera 7.53 Win
Safari

表单控件：

Buttons
Submit buttons
Select boxes, single
Select boxes, multiple
Single line text inputs
Multi-line text inputs
Checkboxes
Radio buttons
File select controls

Buttons

Submit buttons

Select boxes, single

Select boxes, multiple

Single line text inputs

Multi-line text inputs

Checkboxes

Radio buttons

File select controls

更多请阅读：《Styling even more form controls》

html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre { display: block }
li { display: list-item }
head { display: none }
table { display: table }
tr { display: table-row }
thead { display: table-header-group }
tbody { display: table-row-group }
tfoot { display: table-footer-group [...]

1、使用 fieldset 和 legend标签
在 form 中，我们经常会对 form 中的信息进行分组，比如注册 form ，我们可能会将注册信息分组成基本信息（一般为必填），详细信息（一般为可选），那我们如何更好的来实现呢？我们可考虑在 form 中加入下面两个标签：

fieldset：对表单进行分组，一个表单可以有多个fieldset
legend：说明每组的内容描述

<form id=”demoform” class=”democss” action=”">
<fieldset>
<legend>Basic Register</legend>
<p>First name: <input type=”text” name=”fname” value=”" /></p>
…
</fieldset>
<fieldset>
<legend>Detailed Register</legend>
<p>Interest: <input type=”text” name=”interest” value=”" /></p>
…
&... 0 条评论»