存档
最近在研究CSS，正好结合项目做了一个灵活的Tab页，使用纯HTML＋CSS实现，正好总结一下。 首先看一下预览界面： 样例HTML可以访问：http://www.demo2do.com/htmldemo/school/attendance/AttendanceGlobal.html 下面开始讲述一下完成上述页面的步骤。 1. 构建HTML 构建HTML是整个过程最基础的部分。我们构建HTML比较关键的一个原则就是尊重标签本身的语义。所以在这里，先分析一下期望做到的HTML的结构的情况，并加以分析，选择比较合适的HTML标签，而不是采用非标准的Table布局或者充斥着大量div和class的布局方式。事实上，现在存在着一种误区，就是凡事采用了DIV＋CSS的方式进行页面编程的就是Web标准的，其实这是错误的观点，很容易就导致了“多div症”（divitus）或者“多类症”（classitis）。 回到正题，我们分析一下页面样式，可以将整个Tab页分成2个部分，分别是一级菜单和二级菜单，他们有类似的特点，并以横向方式排列。HTML标签中的无序列表就可以反映出这种逻辑关系。所以我们分别采用2个无序列表来表示一级菜单和二级菜单。代码如下： <div class=”navg”> <div id=”attendance” class=”mainNavg”><ul> <li id=”attendanceNavg”><a href=”#” mce_href=”#”>考勤管理</a></li> <li id=”teachNavg”><a href=”#” mce_href=”#”>教学管理</a></li> <li id=”communicationNavg”><a href=”#” mce_href=”#”>家校互通</a></li> <li id=”systemNavg”><a href=”#” mce_href=”#”>系统管理</a></li> </ul> </div> <div id=”dailyAttendance” class=”secondaryNavg”><ul> <li id=”dailyAttendanceNavg”><a href=”#” mce_href=”#”>当天考勤</a></li> <li id=”leaveApproveNavg”><a href=”#” mce_href=”#”>请假审批</a></li> <li id=”attendanceStatisticsNavg”><a href=”#” mce_href=”#”>考勤统计</a></li> <li id=”attendanceCollectNavg”><a href=”#” mce_href=”#”>考勤汇总</a></li> </ul> </div> </div>
最棒的解决方案往往是最简单的那个，提供8个一句话CSS小诀窍 原文出处：http://cssglobe.com/post/1392/8-premium-one-line-css-tips 版权声明：本文版权归原作者所有 译文仅供国内读者参考 1. 使用line-height（行高）垂直居中 line-height:24px; 对于拥有确定高度的元素，使用line-height可以将其内部元素垂直居中。PS. 原来的做法 valign 是一个不正确的做法。 2. 防止确定宽度的浮动元素布局被其内部超宽的元素破坏 #main{ overflow:hidden; } 对于拥有确定宽度的浮动（float）元素，如果内部有一个超宽元素（比如一个很宽的图片），那你精心设计的布局可能就无法正常显示，最简单有效的防止手段就是 overflow:hidden; 虽然会隐藏掉一部分元素，但最大限度保证了整体布局的正确。 3. 防止链接换行 a{ white-space:nowrap; } 很多时候，链接会非常长，如果换行变成2行乃至多行，可能对用户造成误导，建议使用这个方法防止该情况。（我本人到觉得要根据具体情况分析）
微软在MSDN IE blog上列举了开发者感兴趣的IE8 beta1的七大改进，其中包括CSS2.1的完整支持，HTML5的支持，内置开发工具等。beta1主要是提供给开发者体验使用的，普通用户更适合beta2。 文中还提到，稍后就会发布德文和简体中文版的IE8 beta1，但是没有公布具体日期。 1.我们的目标是在IE8正式版中提供完全,完整的CSS2.1支持.(还没完成,Beta2会有更多) 2.我们为W3C CSS工作组贡献了超过700个测试用例. CSS的说明很好,但是有很多歧义的地方.我们认为一个广泛的验证测试套件对CSS很重要,对web开发者和设计者都有帮助.这些测试用例跟其他W3C的测试用例一样是基于BSD授权许可的. 3.我们提供了更好的脚本性能. 4.我们已经开始提供HTML5的支持. 5.我们提供了很棒的内置的开发工具(developer tools).(同样还没完成,会有更多) 6.我们提供了“Activities.”方式,可以让web服务更好的整合到用户的工作中. 基于微软的开放格式承诺,我们已经提供了OpenService的格式说明. 7.我们提供了“WebSlices.”方式,可以使web服务能够更容易让用户的注意力集中到网页中感兴趣的部分. 原文链接：http://blogs.msdn.com/ie/archive/2008/03/05/internet-explorer-8-beta-1-for-developers-now-available.aspx
随着IE8 beta1的发布，发现连sina有显示问题，查了一下，在一位大大的blog上找到了原因，“由于 IE8 对标准的“良好”执行，当 XHTML 文档使用 Transitinal 类型时，会自动选择 Quirks 模式，即 IE5 的模式来解析，所以也就不难理解为何大多数站点会遭遇显示问题了” 如何处理该问题呢？方法如下： 1. 将文档类型改成 Strict。也就是将 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> 改成 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> 2. 该完之后如果还没有解决问题，那么只好强制声明了，在 </head>结束之前加入 <META http-equiv=”X-UA-Compatible” content=”IE=8″ /> 如果需要工作在 IE7 Strict 模式下，改成 IE=7. 这样一来，破相的问题就基本解决了。如何查看 IE8 的工作模式呢，在 IEBlog 的留言中有解答，执行 javascript:alert(document.documentMode);，返回 5，说明工作在 IE5 Quirks 模式下；返回 [...]
原文出处：http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/ 版权声明：本文版权归原作者所有 译文仅供国内读者参考 决定一个网站成败有时候并不是样式设计，而是可用性和易用性。对于一个页面的访问者来说，他所做的只是点击然后决定下一步要做的事情，因此以用户为中心的设计思路已经成为了业界定义成功设计的事实标准。当然，如果没有任何提供给用户的功能，这个标准也不复存在了。 我们不打算深入探讨关于可用性的实践细节（比如搜索框应该放置在页面的什么位置）因为已经有相当多的文章就此做了深入的阐述，我们将重点介绍一些核心法则、启示，合理的使用这些法则，能使你的网站更加成熟，展示的内容更容易让用户理解。 请注意： 你可能对这两篇我们之前的文章感兴趣 10 Usability Nightmares 和 30 Usability Issues 。 我们会在后续的文章中继续讨论关于可用性的问题，您可以订阅我们的网站 subscribe to our RSS-feed 。 为了能够正确的使用这些法则，首先我们需要知道用户是如何和页面进行交互的，用户是如何思考的以及用户的常见行为是怎样的。 用户如何思考？ 基本上，一个网站的用户习惯和一个商店的顾客用户习惯没什么区别。用户快速地浏览每个新页面，从页面文字中找出第一个使他们感兴趣的或者和他们正在寻找的东西类似的链接并点击。因此，事实上页面的大部分内容，用户根本没有注意过。 用户总是在那些看上去可能的链接中寻找他们感兴趣并能点击的链接，然后点击。如果内容不是他们想要的，他们会立刻点击“后退”按钮并继续搜寻他们想要的内容。 用户偏好质量和可靠性 如果一个页面提供给用户以高质量的内容，用户将能够接受页面上的广告和站点的设计。这就是为什么有些站点内容质量很高，但是设计的很糟糕，依然有着很高的流量的原因。内容远比支持它的设计来的重要。切记。 用户并不会细读，他们是浏览 分析一个站点，用户始终在寻找一些锚记（译注 fixed point 内容节点）来作为页面内容的导航员。 （图1 图上的热点标示了用户的阅读集中在句子的前半部分） 网站用户是急切并强烈要求迅速满足需求的 非常简单的法则：如果一个站点不能满足用户的期望，那这个网站的设计师就是不称职，这个公司也将失去很多挣钱的机会。认知负载越高，直观导向越少，用户越是会放弃该站点来选择另一个网站来代替。 用户并不会做最佳的选择 用户不会为了搜索他们想要的东西而去寻找最快速的方法。他们不会从上至下的一段段看下去来寻找他们想要的东西。取而代之的是能够满足他们需求的第一个选择。当他们看到第一个看上去能够满足他们需求的链接，他们就会在第一时间点击。所以，从全部内容中找出最优的链接耗时太多，也太累，寻找满足需求的看上去更有效率。[video] (图2 图3 这两幅图片展示了线性阅读在网页浏览中是不适用的) 用户跟从的是他们的直觉 大多数情况下，用户不会认真去看设计师提供的内容，根据Steve Krug(Don’t make me think 作者)的说法，主要原因是用户根本不在乎这些。 用户希望拥有对浏览器的控制 用户希望能够控制他们的浏览器，并且信赖从始至终提供一直内容展现形式的网站。比如，他们不希望自动弹出的窗口，和随时能够通过“后退”按钮回到他们先前浏览过的网页，所以，一个非常重要的准则就是“不要在新窗口打开网页”。（译注：这点上，中国的用户的操作习惯恰恰相反，比如谷歌就不得不改成在新窗口打开，另外，在web标准中<a>标记的target属性是被废弃的，也是基于这个原因。） 1. [...]
The concept of floats is probably one of the most unintuitive concepts in CSS. Floats are often misunderstood and blamed for floating all the context around it, causing readability and usability problems. However, the reason for these problems isn’t the theory itself, but the way the theory is interpreted – by developers and browsers. Float（浮动）概念也许是CSS中最让人迷惑的一个概念吧。Float经常被错误理解，而且因为将上下文元素全部浮动导致的可读性、可用性问题备受责难。然而，这些问题的根源并不在于理论本身，而是开发人员以及浏览器对理论的解读造成的。 [...]
