简单form标准化实例(一):整体布局

form 无论是在网站的制作中,还是在网站的重构中,我们都会频繁地“碰面”,当“碰面”的次数多了,反而觉得他更让人迷茫,有种熟悉的“陌生”,越来越把握不了他。 下面我们将带大家走进 form 的世界,一起来熟悉、探讨、掌握他的“脾性”。 对于简单 form 的设计图(如图,yahoo 注册页面的一部分),我们如何来做整体的布局呢?大体我们可以选用以下 3 种方式来做布局: 1、使用 table 来布局 这是大家最常用的方法,虽然现在到处都在谈标准化,甚至更多的在说 div+css ,但怿飞还是推荐使用 table 来布局 form。对于标准,个人的另类理解“更符合逻辑,更效率快捷”。 为什么推荐大家使用呢?table 本就是用来显示二维数据,用 table 来布局 form 可以说是他的“老本行”。另外重要的一点是,对于复杂的 form ,table 能更有效的进行布局和维... 2 条评论 »

PNG透明背景图片的无界应用

PNG 图片在网站设计中是不可或缺的部分,最大的特点应该在于 PNG 可以无损压缩,而且还可以设置透明,对于增强网站的图片色彩效果有重要的作用。 但为什么 PNG 图片却没有 GIF 和 JPG 图片的使用来得广泛呢,这个祸因应归属于微软的 IE 浏览器(Firefox 和 Opera 对 PNG 支持的比较好,而现在浏览器的主流IE6 却无法很好的支持)。不过微软在最近也开始改过自新了,新出的的 IE7 可以很好的支持 PNG,可以想象在未来的网络世界,PNG 图片的重要性将会更加凸显。 但在大家还在绝大多数的使用 IE6 的时候,我们又怎样在 IE6 的世界去完美使用 PNG 图片呢(PNG 图片的时候最重要的地方在于 PNG 透明背景图片的运用)。我们应该庆幸我们是幸福的!IE5.5+ 的 AlphaImageLoader 滤镜为通向 png 提供了一个道路,如果他载入的是 PNG(Portable Network Graphics) 格式,则 0%-100% ... 9 条评论 »

checkbox的完美用户体验

最常见的 checkbox 的使用: <input type=”checkbox” name=”test” /> 点击这里没有任何效果 因为 checkbox 在高分辨率下,小方块会很小,很不容易点,这难免在用户体验上大打折扣。 下面看看我们的解决方法: 1、给 checkbox 配个 label “老婆”(老婆的特点:必要的): <input type=”checkbox” id=”test” name=”test” /><label for=”test”>点击这里就可以选中label</label> for属性功能:表示 lable 标签要绑定的 HTML 元素,点击这个标签的时候,所绑定的元素将获取焦点。 补充: 除以上方法,还可以直接用 label 套嵌整个表单组件和文本标签,如: <label><input type=”checkbox” />点击这里就可以选中label</label> 根据规范这样文本会自动与邻接的表单组件关联,但遗憾的是 IE 并不支持这个特性。 2、... 1 条评论 »