月度存档: 八月 2009

css控制标签透明的方法

作者: 日期: 2009年08月24日 没有评论

css控制标签透明的方法很简单，如下：

<div>

  <div style=”"filter:alpha(opacity=90); -moz-opacity:0.9; opacity:0.9;>

        此内容以透明的效果显示在它的父标签之上。

</div>

</div>

filter:alpha(opacity=90); -moz-opacity:0.9; opacity:0.9;

opacity=90值越小透明度就越高。

Yahoo! 新版首页前端代码浅析

作者: 日期: 2009年08月23日 没有评论

YUI 3 神功初显

去年 11 份开始，已经有新闻：The New Yahoo! Front Page and YUI 3.0. 更小、更快、更灵活、更独立、向前兼容等等优点，不多说。从 Yahoo! 新版首页的性能来看，YUI 3 起到了不小作用。

附加 UA 信息

<html lang="en-US" dir="ltr">

后台生成页面时，直接将 UA 信息添加在 html 标签上。其中 jsenabled, flash-10 等信息，是通过 js 添加的。
具体好处请参阅博文：Goodbye to CSS Hack.

960 不是神话

Yahoo! 新版首页的页面宽度为 972px. 页面结构如下：
yahoo-layout.png

其中 y-cols 下三栏的宽度为：192 + 8 | 400 + 10 | 350. 总宽度为 960. 加上最右边的 10px 和左右边框 2px, 总宽度为 972px.

栅格带来的是一种布局思想，具体宽度比例可以根据实际情况调整到视觉最佳。960 并不是神话。

主体部分，简单三栏，底部和各个模块的底边并没有对齐，体现了“栅格决定宽度，内容决定高度”的布局思想。（为何国内站点老追求水平方向的对齐的呢？不对齐，能降低开发和维护成本。视觉上，也能带来简洁和错落之美。想不通ing……）

快乐的 Loading

无论是左边的站点入口，还是内容区域的标签页和轮播新闻，所有触发后才显示的内容，都是通过 Ajax 动态加载的。交互简单舒服，赞。

ARIA 支持

忘了 Yahoo! 的老版首页是否支持，这次明显加入了对 ARIA 的支持，例如：

<div aria-live="polite" role="status"/>

国外对网站可访问性的关注，什么时候才能影响国内呢？

也许是缺点

1. 有点混乱的 class 命名。有些辅以 y- 前缀，这能尽量减少重名和相互影响。但同时能看到 mod, my, small 等常见单词的命名，感觉缺乏统一管理。

2. html 结构嵌套比较深。不少细节，感觉有更简洁的写法。这次 Yahoo! 首页的源码，让我感觉越来越像 Google 的风格。也许是 Yahoo! 前端团队成员的水平降低了（老员工的离职等）？或许是观念上的转变（实用主义）？最近也在思考这方面的问题。毕竟，大部分情况下，多两三个标签，相对而言最廉价。如果多些嵌套能带来可维护性的提高和操作上的方便，那是非常值得的。

3. 未删除的注释、未压缩的 css 和 js. 考虑到页面内容很可能是由多个系统协同产出，这些小细节，算不得是缺点，瑕疵吧。

写之前，感觉有很多想说的。写起来，却发现没啥。除了 YUI 3 的应用，Yahoo! 新版首页在前端代码上给我们的喜悦有点少，或许是因为我的期望太高。

IE的hasLayout 介绍

作者: 日期: 2009年08月23日 没有评论

hasLayout概述

Internet Explorer 中有很多奇怪的渲染问题可以通过赋予其“layout”得到解决。John Gallant 和 Holly Bergevin 把这些问题归类为”尺寸臭虫(dimensional bugs)”，意思是这些臭虫可以通过赋予相应元素某个宽度或高度解决。

“Layout”是一个 Internet Explorer for Windows的私有概念，它决定了一个元素如何显示以及约束其包含的内容、如何与其他元素交互和建立联系、如何响应和传递应用程序事件、用户事件等。这种渲染特性可以通过某些 CSS 属性被不可逆转地触发。而有些 HTML 元素则默认就具有”layout”。

微软的开发者们认为元素都应该可以拥有一个”属性(property)”，于是他们便使用了 hasLayout，这种渲染特性生效时也就是将 hasLayout 设成了 true 之时。了解hasLayout将对IE的臭虫会有更多深入的体会甚至解决方案。

拥有layout的定义

一个元素”得到 layout”，或者说一个元素”拥有 layout” 的时候，是指它的微软专有属性 hasLayout 为此被设为了 true 。一个”layout元素”可以是一个默认就拥有 layout 的元素或者是一个通过设置某些 CSS 属性得到 layout 的元素。

而”无layout元素”，是指 hasLayout 未被触发的元素，比如一个未设定宽高尺寸的干净 div 元素就可以做为一个”无layout祖先”。

给一个默认没有 layout 的元素赋予 layout 的方法包括设置可触发 hasLayout = true 的 CSS 属性。参考默认 layout 元素以及这些属性列表。没有办法设置 hasLayout = false ， 除非把一开始那些触发 hasLayout = true 的 CSS 属性去除或重置。

拥有layout的各种问题

Layout 在显示盒模型时有着不同寻常而且难以预料的效果，而且有时甚至会牵连到他们的子元素。

一个元素是否具有”layout”可能会引发如下的一些问题（包括但不限于）：

  • IE 很多常见的浮动bug。
  • 元素本身对一些基本属性的异常处理问题。
  • 容器和其子孙之间的空白边重叠问题。
  • 使用列表时遇到的诸多问题。
  • 背景图像的定位偏差问题。
  • 使用脚本时遇到的浏览器之间处理不一致的问题。

Layout 的由来

不同于标准属性，也不像某些浏览器的私有 CSS 属性，layout 无法通过某一个 CSS 声明直接设定 。也就是说没有”layout属性”这么一个东西，元素要么本身自动拥有 layout，要么借助一些 CSS 声明悄悄地获得 layout。

下列元素应该是默认具有 layout 的：

  • <html>, <body>
  • <table>, <tr>, <th>, <td>
  • <img>
  • <hr>
  • <input>, <button>, <select>, <textarea>, <fieldset>, <legend>
  • <iframe>, <embed>, <object>, <applet>
  • <marquee>

下列 CSS 属性和取值将会让一个元素获得 layout：

  • position: absolute
    绝对定位元素的包含区块(containing block)就会经常在这一方面出问题。
  • float: left|right
    由于 layout 元素的特性，浮动模型会有很多怪异的表现。
  • display: inline-block
    当一个内联级别的元素需要 layout 的时候往往就要用到它，这也可能也是这个 CSS 属性的唯一效果–让某个元素拥有 layout。”inline-block行为”在IE中是可以实现的，但是需要注意的是： IE/Win: inline-block and hasLayout 。
  • width: 除 “auto” 外的任意值
    很多人遇到 layout 相关问题发生时，一般都会先尝试用这个来修复。
  • height: 除 “auto” 外的任意值
    height: 1% 就在 Holly Hack 中用到。
  • zoom: 除 “normal” 外的任意值
    IE专有属性。不过 zoom: 1 可以临时用做调试。
  • writing-mode: tb-rl
    MS专有属性。
  • overflow: hidden|scroll|auto
    在 IE7 中，overflow 也变成了一个 layout 触发器，这个属性在之前版本 IE 中没有触发 layout 的功能。
  • overflow-x|-y: hidden|scroll|auto
    overflow-x 和 overflow-y 是 CSS3 盒模型中的属性，尚未得到浏览器的广泛支持。他们在之前版本IE中没有触发 layout 的功能。
  • 另外 IE7 的荧幕上又新添了几个 haslayout 的演员，如果只从 hasLayout 这个方面考虑，min/max 和 width/height 的表现类似，position 的 fixed 和 absolute 也是一模一样。
  • position: fixed
  • min-width: 任意值
    就算设为0也可以让该元素获得 layout。
  • max-width: 除 “none” 之外的任意值
  • min-height: 任意值。即使设为0也可以让该元素的 haslayout=true
  • max-height: 除 “none” 之外的任意值

有关内联级别元素

对于内联元素(可以是默认即为内联的比如 span 元素，也可以是 display: inline 的元素)

  • width 和 height 只在 IE5.x 下和 IE6 或更新版本的 quirks 模式下触发 hasLayout 。而对于 IE6，如果浏览器运行于标准兼容模式下，内联元素会忽略 width 或 height 属性，所以设置 width 或 height 不能在此种情况下令该元素具有 layout。
  • zoom 总是可以触发 hasLayout，但是在 IE5.0 中不支持。

具有”layout” 的元素如果同时也 display: inline ，那么它的行为就和标准中所说的 inline-block 很类似了：在段落中和普通文字一样在水平方向和连续排列，受 vertical-align 影响，并且大小可以根据内容自适应调整。这也可以解释为什么单单在 IE/Win 中内联元素可以包含块级元素而少出问题，因为在别的浏览器中 display: inline 就是内联，不像 IE/Win 一旦内联元素拥有 layout 还会变成 inline-block。

重置 hasLayout

在另一条规则中重设以下属性为默认值将重置(或撤销)hasLayout，如果没有其他属性再添加 hasLayout 的话：

  • width, height (设为 “auto”)
  • max-width, max-height (设为 “none”)(在 IE 7 中)
  • position (设为 “static”)
  • float (设为 “none”)
  • overflow (设为 “visible”) (在 IE 7 中)
  • zoom (设为 “normal”)
  • writing-mode (从 “tb-rl” 设为 “lr-t)

display 属性的不同：当用”inline-block”设置了 haslayout = true 时，就算在一条独立的规则中覆盖这个属性为”block”或”inline”，haslayout 这个标志位也不会被重置为 false。

把 mid-width, mid-height 设为它们的默认值”0″仍然会赋予 hasLayout，但是 IE 7 却可以接受一个不合法的属性”auto”来重置 hasLayout。

谈CSS书写风格

作者: 日期: 2009年08月23日 没有评论

随着公司业务的增加，需求变的越来越多，团队也因此在不断的扩大，我们经常会遇到几个人协同工作来完成同一件作品或者维护修改别人作品的时候，那么是什么最让你最感到困扰呢？我们在实现一个表现复杂的页面的同时，CSS文件就会比较繁琐，众多的选择符、属性让人眼花缭乱，那么如何更快的定位、如何更高效的编写样式呢？CSS的书写被很多人所忽略。关于书写风格，翻看了一些知名网站的作品，发现横向连排几乎成为各大产品项目的主流，然而，每个人对于CSS的写法各异，这就导致我们工作效率的降低。为了更好的协同工作，保持团队内CSS书写的一致性，几经波折后达成共识，具体书写方法如下：CSS属性横排书写，选择符纵排书写，每个”,”(逗号)后必须换行;

重构组代码书写规范示例：（其中数字只用做示范，实际应用中不建议用数字命名。）

.class_name_1 .class_name_1_1,
.class_name_2 .class_name_2_1 .class_name_2_1_1,
.class_name_3{style1:value; style2:value; styel3:value; }

有人说，好代码就是用记事本打开也是艺术品，而样式文件本身就是设计作品。目前并没有一个权威来界定这种规范，我们只能对两种写法做个简单的总结。

就样式文件本身对比：

样式文件对比列表

纵向书写特点：

  1. 每个CSS属性独立一行，一般不会出现换行或横向滚动条。
  2. 可以通过firebug等工具查找到模块，在DW中ctrl+g行定位，修改方便。
  3. 属性段落间有缩进，保证了代码的整洁，层次清楚，符合编程语言代码规范，修改更加直观。

存在的问题：代码冗余（如空格符、tab符、换行符）；文件大小增加；容易出现纵向滚动条。

横向书写特点：

  1. 最大化的利用了空间，单屏内能显示更多，减小了纵向滚动条出现的几率，能够快速捕获较多的信息。
  2. 减小了文件大小，省去了不必要的空格、换行等。
  3. 横向书写方便分块以及注释，便于查看CSS结构，选择符一目了然。当今显示器正朝着越来越大，越来越宽发展，基本上一行内可以显示完全。
  4. 加快编写CSS速度，不用每次敲换行和tab，并且减少拉动滚动条的次数。
  5. 如果是活动页，不用作压缩处理。使用CSS optimizers 来优化CSS是提倡的，但是使用横向书写，基本上不存在多余的空格和换行，因此可以不用压缩，这样效率和能力都会得到提高。
  6. 便于阅读和查找相关结构。代码编辑器对同行数定位做的都比较好，因此我们要解决的是如何快速纵向定位目标。横向书写时选择符纵向对齐，再加上
    .class_name_2  .class_name_2_1  .class_name_2_1_1的选择符层次分明，因此很容易定位到目标。
    在调试小Bug的时候就可以直接打开CSS更改，不用再打开firebug去找到模块。
  7. 横向书写，是基于CSS选择符的写法，层次容易对比，更利于模块化。对整体CSS规划有好处，后期维护成本低。
  8. 便于不同版本的CSS代码对比。

存在的问题：书写过密，从而影响阅读。这种弊端显而易见，但只要优化做到家，这种状况会很少。

尽管对于现如今的带宽来说，网页文件那仅以K为单位的大小实在是微不足道，但如何将这以K来计算的网页文件精简到最小还是网页设计师们应该考虑的问题之一。而横向书写省去了不必要的空格、换行等，大大减小了文件大小。我们不能说哪种书写是对的，至于具体采用哪种写法依个人选择，当然改变习惯可能会影响一个人的工作效率，那我们提倡的是：提交的CSS样式文件是经过代码格式化的，而这个工作可以完全交给DW等工具，我们只要点击一下，整个文件就会像我们想象的那样呈现出来。这样的代码看起来很舒服，修改容易，团队成员在后续交接也会变得更加顺利。

PS: Dreamweaver下代码格式的设置方法

Dreamweaver下代码格式的设置方法

理解绝对定位和相对定位布局

作者: 日期: 2009年08月23日 没有评论

本文主要描述XHTML中相对定位和绝对定位各自的本质、用法、区别和两者之间的关系。以及使用CSS的Left、Right、Top、Bottom属性（偏移属性）和Margin属性（外边距）对定位块级元素进行布局的方法。(本文的示例，请看这个附件demo。)

说明：
占位空间：元素在文档流中所占据的空间。
物理空间：元素本身所占据的空间。

下面分3种情况分别对相对定位和绝对定位进行讨论：
1.只使用css第一组属性布局定位元素的情况
2.只使用css第二组属性布局定位元素的情况
3.混合使用第一组和第二组属性的情况

图1为未定位时的初始效果，
层级关系为：
<div
  <div box1
  <div box2
  <div box3
效果图：
图片
图1

一、用相对定位布局块级元素
元素设置position值： position:relative
此属性值的设置，元素没有脱离文档流，还是普通流定位模型的一部分，会对文档流中其它元素布局产生影响。（说明：蓝色代表占位空间，红色代表元素）

1.仅使用left、right、top和bottom属性布局相对定位元素的情况
元素原本所占的占位空间仍保留，物理空间偏移。

图2中，设置元素的left和top的值，对box2进行布局，可以发现除了box2偏移之外，其他块级元素的位置没有被影响，可见box2的占位空间还是存在的。
层级关系为：
<div
  <div box1
  <div box2 ——– position:relative ; top:-60px; left:80px;
  <div box3
效果图：
图片
图2

2.仅使用margin属性布局相对定位元素的情况
用margin-bottom属性和margin-top属性设置负值可以改变文档流中所占空间的高度，会影响文档流中的其它元素位置。例如：margin-top:负值; margin-bottom:负值

图3中，box1和box2都设置了元素margin-bottom的值，值等于它们高度的负值。box1和box2物理空间没有改变，占位空间高度为0。box3的margin-bottom值设置为0，物理空间没有改变，占位空间高度不变。再通过margin-left对box2和box3设置左偏移值。
层级关系为：
<div
  <div box1 ——– position:relative ; margin-bottom:-102px;
  <div box2 ——– position:relative ; margin-bottom:-102px; margin-left:110px;
  <div box3 ——– position:relative ; margin-bottom:0px; margin-left:220px;
效果图：
图片
图3

3.混合使用left、right、top和bottom属性与margin属性布局相对定位元素的情况
此情况，它们的值会产生累加的效果。在CSS2.1中所有的浏览器都使用外边距边界来完成 偏移计算。本文从数学的角度理解为偏移属性值和外边距属性值累加。

图4中，box2是在图3的基础上增加设置left的值产生的效果，可见margin-left的值和left的值产生了累加。(偏移量:80px = 110px – 30px)
层级关系为：
<div
  <div box1 ——- position:relative ; margin-bottom:-102px;
  <div box2 ——- position:relative ; margin-bottom:-102px;margin-left:110px; flet:-30px;
  <div box3 ——- position:relative ; margin-bottom:0px; margin-left:220px;
效果图：
图片
图4

二、用绝对定位布局块级元素
设置position值：position:absolute;
此属性值的设置，元素从文档流完全删除。

1.仅使用left、right、top和bottom属性布局绝对定位元素的情况
绝对定位的元素的偏移位置以最近的定位(包括相对定位和绝对定位)祖先元素作参照物。如果元素没有已定位(包括相对定位和绝对定位)的祖先元素，那么它的参照物为最顶级元素（由于浏览器的默认参照物不同，物可能是BODY或 HTML 元素）。
注意：IE下参照物需设置宽度或高度bottom和right属性才可以正确的定位。

设置元素为绝对定位元素后，元素的Left、 Right、Top和Bottom属性默认值不是0，只是将元素脱离文档流。以下例子说明这个问题。
在图5中，将橘黄色的祖先元素设置为定位元素（即参照物），box2设为绝对定位，文档流由box1-box2-box3变为box1-box3，可box2却没有移动到距离参照物0值的位置上，可见box2的Left、 Right、Top和Bottom属性默认值不等于0，它只是脱离了文档流而已。
层级关系为：
<div ———————————position:relative 参照物
  <div—————————-没有设置为定位元素，不是参照物
    <div———————-没有设置为定位元素，不是参照物
      <div box1
      <div box2 ——–absolute
      <div box3
效果图：
图片
图5

以最近的祖先定位元素为参照物的情况
图6中，Box2设置成绝对定位元素，脱离了文档流，文档流由box1-box2-box3变为box1-box3，box2以最近的定位祖先（蓝色框）为参照物。
层级关系为：
<div ——————————— position:relative; 不是最近的祖先定位元素，不是参照物
  <div—————————-没有设置为定位元素，不是参照物
    <div———————- position:relative 参照物
      <div box1
      <div box2 ——–position:absolute; top:50px; left:120px;
      <div box3
效果图：
图片
图6

图7中，为改变参照物（橘色框）后的效果
层级关系为：
<div ——————————— position:relative;最近的祖先定位元素，参照物
  <div—————————-没有设置为定位元素，不是参照物
    <div———————-没有设置为定位元素，不是参照物
      <div box1
      <div box2 ——–position:absolute; top:50px; left:120px;
      <div box3
效果图：
图片
图7

图8中，参照物为最顶级的元素情况。
层级关系为：
<div ———————————没有设置为定位元素，不是参照物
  <div—————————-没有设置为定位元素，不是参照物
    <div———————-没有设置为定位元素，不是参照物
      <div box1
      <div box2 ——–position:absolute; top:50px; left:120px;
      <div box3
效果图：
图片
图8

2.仅使用margin属性布局绝对定位元素的情况
此情况，margin-bottom 和margin-right的值不再对文档流中的元素产生影响，因为该元素已经脱离了文档流。另外，不管它的祖先元素有没有定位，都是以文档流中原来所在的位置上偏移参照物。

图9中，使用margin属性布局相对定位元素。
层级关系为：
<div ——————————— position:relative; 不是参照物
  <div—————————-没有设置为定位元素，不是参照物
    <div———————-没有设置为定位元素，不是参照物
      <div box1
      <div box2 ——–position:absolute; margin-top:50px; margin-left:120px;
      <div box3
效果图：
图片
图9

IE6的情况下，box2前面没有兄弟节点，则margin-left的值会出现双倍边距，见图10。
层级关系为：
<div ——————————— position:relative; 不是参照物
  <div—————————-没有设置为定位元素，不是参照物
    <div———————-没有设置为定位元素，不是参照物
      <div box1
      <div box2 ——–position:absolute; margin-top:50px; margin-left:60px;
      <div box3
效果图：
图片
图10

3.混合使用left、right、top和bottom属性与margin属性布局相对定位元素的情况
a.margin属性和top、bottom、left、right属性同时使用，如果同一方向偏移，它们的值会产生累加的效果，见图11。
例如：margin-left:120px; left:-20px; 那么box2的偏移值为120px-20px=100px;
层级关系为：
<div ———————————-不是参照物
  <div—————————–不是参照物
    <div———————–position:relative; 参照物
      <div box1
      <div box2 ———position:absolute; margin-left:120px; left:-20px; top:50px;
      <div box3
效果图：
图片
图11

b.绝对定位和相对定位的累加加效果不同，如果top、bottom、left、right属性和margin属性偏移的方向相反，top、bottom、left、right属性值有效，反方向的margin属性值无效，见图12。
层级关系为：
<div ———————————-不是参照物
  <div—————————–不是参照物
    <div———————–position:relative; 参照物
      <div box1
      <div box2 ———position:absolute; margin-left:120px; right:10px; top:50px;
      <div box3
效果图：
图片
图12

总结：

  • 相对定位的元素不会脱离文档流，占用文档流的空间，Left; Right; Top和Bottom属性与margin属性混合使用会产生累加效果。
  • 绝对定位的元素脱离文档流，偏移不影响文档流中的其它元素，Left; Right; Top和Bottom属性与margin属性混合使用，偏移方向相同值累加，方向相反，margin属性值无效。
  • 绝对定位的元素以最近的定位祖先元素为参照物。

页面重构中的模块化思维

作者: 日期: 2009年08月23日 没有评论

最近被“模块化”缠身，又是文章又是PPT的，被逼着想了很多相关的东西。整理下我这段时间对于“模块化”的思考，大多都是我自己从事页面重构这份工作的经验和理解，在一定程度上存在局限性，也希望自己能温故而知新。

“模块化”只是我们对于过去一直使用的技术、方法的一个新潮的称谓，就像“Ajax”。不过做为页面重构发展的一种趋势，越来越被大家重视，不自觉也满口的“模块化”，只是你真的理解什么是“模块化”吗？

什么是模块化？

对“模块化”的解释，在 CNKI 中就有28种。可见“模块化”思维使用的广泛。最接近页面重构中的“模块化”，现有的解释应该就是软件开发中的解释了。

先看一下百度词条是怎么解释“ 模块化 ”的：

模 块化是指解决一个复杂问题时自顶向下逐层把软件系统划分成若干模块的过程。每个模块完成一个特定的子功能，所有的模块按某种方法组装起来，成为一个整体， 完成整个系统所要求的功能。模块具有以下几种基本属性：接口、功能、逻辑、状态，功能、状态与接口反映模块的外部特性，逻辑反映它的内部特性。在软件的体 系结构中，模块是可组合、分解和更换的单元。

相关的书籍也蛮多的，有兴趣的同学可以搜一下。需要强调一点，我们所借鉴的是一种思维的方式。

页面制作为什么需要模块化？

站点内容越来越多、代码越来越臃肿，渐渐影响到了客户端的体验（主要是打开速度），影响到了维护的效率。有什么方法可以解决这些问题呢？

我 们很容易就想到：减少代码冗余、提高代码重用率、图片压缩等等，而这些要如何实现呢？模块化思维可以解决，即可以有效减少代码冗余、提高代码重用率，更重 要是可以支持到多人维护，降低维护成本。CSS写法较为灵活，容易产生代码的耦合，使用模块化也可以在一定程度上降低耦合度，对于BUG的定位也有帮助。 所以，我们更应该在站点前期就重视并使用“模块化的思维”编写站点。

我们之前经常提到的站点性能优化，有相当一部分也是“模块化”的内容，比如提高代码重用，提高开发效率等等，“模块化”的优点还有很多，我大概列了一下：

  • 提高代码重用率
  • 提高开发效率、减少沟通成本
  • 降低耦合
  • 降低发布风险
  • 减少Bug定位时间和Fix成本
  • 提高页面容错
  • 更好的实现快速迭代
  • 更好的支持灰度发布

其中最重要的一点，我认为是“提高代码重用率”，这也是模块化最重要的特点之一。

如何实现“模块化”？

这里的主要问题是HTML与CSS的“模块化”，我们可以看下换肤的实现方法：

  • 同一类名，换文件（JS）
  • 同一文件，换类名（JS）

由此可知HTML与CSS的接口实现：

  • CSS引入的三种方式
  • 类名

为 了更好的实现这种接口，需要有相关的（交互、设计、页面、开发）约定、规则、规范，比如：所有当前状态都使用同一个类名“nonce”，所有变灰的表现都 使用原类名后加“_n”，Tab的实现方式等等。有了这些约定、规则、规范后，HTML代码就很容易可以实现模板化，统一接口规范。

有两个误区需要先认清下：

  • 模块化后并不是就能被使用在任何位置（模块化后的代码段也是有适用的范围限制，需要一个提供接口规则的环境）
  • 模块化后并不是就不能再变更（模块化后的代码段可根据实际需要做修改）

完 全独立的模块放在同一项目中，由于项目有自己的表现、交互统一性，所以各模块间必定出现类似的部分，这些部分可以被提出来做为公共的定义，减少冗余，这时 就会出现耦合的问题，完全不耦合是不可能的，因此模块化中很重要一点就是“适度的耦合”。有了公共定义，就得调整模块样式的实现方式了，而这种调整也会影 响到“接口”的实现方式。

全方位清理浮动

作者: 日期: 2009年08月23日 没有评论

清除浮动一个凡是做页面的人都会遇到的一个东西，但是是否大家都能够清楚的知道，全方位的了解呢？于是一闲下来了马上写了这样的一篇文章，不能讲面面俱到，然而基本能将我所知道的倾囊相授了。

我们粗略的一起来看看清除浮动的办法一共有多少个(IE里面用zoom:1就不写了，下一个专题再写)。对应的DEMO

  1. 采用伪类:after进行后续空制的高度位零的伪类层清除
  2. 采用CSS overflow:auto的方式撑高
  3. 采用CSS overflow:hidden的方式产生怪异适应
  4. 采用display:table将对象变成table形式
  5. 采用div标签，以及css的clear属性
  6. 采用br标签，以及css的clear属性
  7. 采用br标签，以及其自身HTML的clear属性

粗略的看，他们都能将问题解决；然而他们另外一方面又有着各自的利弊。（一一对应）

  1. 优点结构语义化完全正确，不会产生其余的怪异问题。
    缺点复用方式不当容易造成代码量急剧增大。
    建议最外层轻浮动时使用，或清晰模块化复用方式的人使用。
  2. 优点结构语义化完全正确，代码量极少。
    缺点多个嵌套后，点击最外层的轻浮动框会遭成最外层至最内层内容全选（FF）；或者在mouseover造成宽度改变时会出现最外层模块有滚动条（IE）。
    建议内个模块使用，请勿嵌套。
  3. 优点结构语义化完全正确，代码量极少。
    缺点内容增多时候极易不会自动换行而内容被隐藏掉。
    建议宽度固定时使用，请勿嵌套。
  4. 优点结构语义化完全正确，代码量极少。
    缺点盒模型属性已经改变，可想而知奇异事件自然多得你数都数不到。
    建议如果你不想改Bug改死你的话，最好不要使用；不过可以作为alpha版本当中临时性的忽悠下测试。
  5. 优点代码量极少，复用性极高。
    缺点完全不能完美的适应语义化，不利于改版以及需求变更。
    建议初学者使用，可以让你快速的解决浮动问题。
  6. 优点语义化程度比第5种情况要更优；代码量极少，复用性极高。
    缺点语义化依旧不完美，不利于改版以及需求变更。
    建议初学者使用，可以让你快速的解决浮动问题。
  7. 优点语义化程度比第5、6种情况要更优；代码量最少，复用性极高。
    缺点语义化依旧不完美，不利于改版以及需求变更。
    建议引导初学者思维升级时使用，让其明白与其用classname来控制一种表现，倒不如回归到WEB1.0的时代的网页直接用html属性来控制表现，毕竟后者的代码量更少。

最后，列举完毕。然而我想有必要和大家道歉，关于之前转载鬼的那篇文章；非常后悔的是当初改了鬼的标题将“最简单”改成了“最优”，以致于后面误导了很多的同学。所以重新写了一篇给大家分享。

本文转载：http://webteam.tencent.com/?p=1122

wordpress显示摘要

作者: 日期: 2009年08月22日 3 条评论

一个初使用wordpress的同学都会问的问题，如何在wordpress的首页中只显示文章的摘要？
在不使用任何hack和plugin的情况下，有两种方式可以实现：

使用the_excerpt标签
使用方法，
打开你使用的theme中的index.php，查找

<?php the_content(__(‘(more…)’)); ?>
或
<?php the_content(); ?>
修改为

<?php if(!is_single()) {
the_excerpt();
} else {
the_content(__(‘(more…)’));
} ?>
保存
现在你的wordpress，除非打开单个post，其他情况下都是显示摘要。
Tips：在写一篇post的时候，如果你在Optional Excerpt中填写了内容，摘要就显示此部分内容。其他情

况下，wordpress都会自动截取Post开头的部分内容显示出来。
缺点：可能导致部分plugin失效；文中链接不会在摘要中显示。

使用more标签
使用方法，
看下例

一个初使用wordpress的同学都会问的问题，如何在wordpress的首页中只显示文章的摘要？
在不使用任何hack和plugin的情况下，有两种方式可以实现：
使用the_excerpt标签
使用方法，<!–more–>
打开你使用的theme中的index.php，查找

在<!–more–>在之前的内容非单篇post的情况下作为摘要显示。查看效果
Tips：如何在quicktags栏中显示more按钮。
在你使用的theme的index.php中查找<?php the_content(); ?>，如找到，用<?php the_content(__(’

(more…)’)); ?>覆盖。

你的网站使用了微格式了么（转ued163）

作者: 日期: 2009年08月21日 没有评论

最近对微格式进行了一些学习，在学习过程中收获不少。在此分享下，欢迎交流！
微型格式的优点：
1，语义化的HTML和CSS类名称来标记共同内容。
2，使机器可以阅读和理解可能只有人类可理解的数据，一系列的标准化方法。
3，微格式允许网站上的内容轻易地与其他应用对接，从而提高信息的使用率。

hCalendar微格式基本规则：
1，属性和子属性通过class来描述。
2，特定的hCalendar属性是建立在iCalendar属性名称基础上的如:vevent
3，属性和子属性名字大小写敏感
4，”根”属性不能同其他属性组合。如<div class=”vevent summary”>是无效的。
<dl class=”vevent”>
<dt>我的个人日程：</dt>
<dd><a href=”http://sports.163.com” class=”summary”><span class=”category”>游泳</span></a></dd>
<dt>活动时间：</dt>
<dd><abbr class=”dtstart” title=”2009-05-19T18:00:00″>05-19</abbr>–<abbr class=”dtend” title=”2009-06-19T18:00:00″>06-19</abbr>, <abbr class=”duration” title=”P4W”>持续4周</abbr></dd>
<dd class=”vcard”><a class=”fn” href=”http://www.ued163.com/”>Jalin</a> <span class=”title”>前端开发</span> <span class=”locality”>广州</span> <span class=”org”>UED163</span> <a href=”mailto:jalin668@126.com” class=”email”>jalin668@126.com</a></dd>
</dl>
<div class=”mytag”>
<a href=”http://www.163.com/firefox/” title=”firefox” rel=”tag”>firefox</a>
<a href=”http://www.163.com/IE/” title=”IE” rel=”tag”>IE</a>
<a href=”http://www.163.com/safari/” title=”safari” rel=”tag”>safari</a>
<a href=”http://www.163.com/chrome/” title=”chrome” rel=”tag”>chrome</a>
<a href=”http://www.163.com/oprea/” title=”oprea” rel=”tag”>oprea</a>
</div>
<div class=”copyright”><a href=”http://www.ued163.com/” rel=”license”>版权：UED163</a></div>

以上demo比较基础而且简单易懂，试着应用下吧:)

事件属性说明：
summary 事件的概要信息
category 事件的类型
url 事件的链接
dtstart 事件的开始时间/日期，即触发事件
duration 事件的持续时间
duration 日期/时间信息定义：
P2Y = 持续2年
P10D = 持续10天
P3H = 持续3个小时
P2W = 持续2周
P8DT8H8M = 持续12天8小时8分钟

vcard 联系人说明：
fn 表姓名属性值
email 表邮件属性值

reg 属性说明
我的标签：reg=”tag”
版权使用权rel属性说明：rel=”license”

以上代码产生效果显示:

jalin

检测微格式插件（现只有Firefox与Safari）：
firefox:Operator,Tails Export
Safari:Safari Microformats

微格式参考资料：
http://www.ablognotlimited.com/articles/getting-semantic-with-microformats-part-4-hcalendar/

http://microformats.org/
Dreamweaver微格式扩展
http://www.Webstandards.org/action/dwtf/microformats/

HTML标签权重

作者: 日期: 2009年08月20日 没有评论

网上流传很久的一份资料《SEO中HTML标签权重》，这里做一份备份。

HTML标签权重分值排列

内部链接文字：10分

标题title：10分

域名：7分

H1，H2字号标题：5分

每段首句：5分

路径或文件名：4分

相似度（关键词堆积）：4分

每句开头：1.5分

加粗或斜体：1分

文本用法（内容）：1分

title属性：1分 （注意不是title》， 是title属性， 比如a href=… title=”）

alt标记：0.5分

Meta描述（Description属性）：0.5分

Meta关键词（Keywords属性）：0.05分

SEO优化

1、 静态页面

将信息页面和频道、网站首页改为静态页面，有利于搜索引擎更快更好的收录。

2、 页面标题（Page Title）的关键词优化

必须列出信息的标题、网站的名称以及相关关键字。

3、 Meta标签的优化（过去搜索引擎优化的重要手法，现在已经不是关键因素，但仍不可忽略）

主要包括：Meta description、Meta keywords的设置。关键字密度要适度，通常为2%-8%，也就是说你的关键字必须在页面中出现若干次，或者在搜索引擎允许的范围内，要避免堆砌关键字。

4、针对Google制作Sitemaps

Google的sitemaps是对原来robots.txt的扩展，它使用 XML格式来记录整个网站的信息并供Google读取，使搜索引擎能更快更全面的收录网站的内容。　　可以使用Google提供的Sitemap生成器制作（需要技术人员制作）：　　https://www.google.com/webmasters/tools/dashboard？hl=zh-CN也可以由技术部人员制作更全面的Sitemaps。

5、 图片的关键词优化

图片的替代关键词也不要忽略，其另外一方面的作用是，当图片不能显示的时候，可以给访问者一个替代解释语句。

6、 避免表格的嵌套

目前本站的表格嵌套太多，搜索引擎通常只读取3个＜table》的嵌套，如果太多，会造成部分有用信息没有被检测到。　　来源：一起舞论坛

7、 采用web标准进行网站重构

尽量使网站的代码符合W3C的HTML 4.0或XHTML 1.0规范。通过XML＋CSS技术进行网站重构，减少不表格及冗余代码，提高网站页面的扩展性，兼容性，可以使更多浏览器支持。

8、 网站结构的扁平化规划

目录和内容结构最好不要超过3层，如果有超过三层的，最好通过子域名来调整和简化结构层数。另外目录命名的规范做法是使用英文而不是拼音字母

9、 页面容量的合理化

合理的页面容量会提升网页的显示速度，增加对搜索引擎蜘蛛程序的友好度。同时建议js脚本和css脚本尽量用链接文件

10、外部文件策略

把javascript文件和css文件分别放在js和css外部文件中。这样做的好处是把重要的页面内容放到页面顶部，同时能缩小文件大小。有利于搜索引擎快速准确地抓取页面　　重要内容。其他的字体（FONT）和格式化标签也尽量少用，建议采用CSS定义。

11、外部链接

尽可能多地让其他跟你主题相关的网站链接本站，同时尽量同PR值更高的网站进行相互链接。如果网站提供与主题相关的导出链接，被搜索引擎认为有丰富的与主题相关的内容，也有利于排名，例如各类招商网站、投融资网站的概念。另外避免链接不顾质量的大面积撒网，对搜索引擎而言宁少要精。

12、网站地图

网站自身的网站地图是搜索引擎更全面索引收录你的网站的重要因素。建议制作基于文本的网站地图，内含网站所有栏目、子栏目。网站地图的三大因素：文本、链接、关键词，都极其有利于搜索引擎抓取主要页面内容。特别是动态生成目录网站尤其需要 创建网站地图。

13、图像热点

除AltaVista、Google明确支持图像热点链接外，其他引擎暂不支持。当“蜘蛛” 程序遇到这种结构时，就会无法辨别。因此尽量不要设置图像热点（Image Map）链接。

14、FLASH应用

FLASH由于不含文字信息，应尽量用于功能展示和广告，少用于网站栏目和页面。

15、JS脚本

在不支持JS脚步的浏览器里 NOSCRIPT》 标签会起到重要提示作用，对搜索引擎的Spider搜索也会有帮助。

16、Frame框架

Frame标签会被搜索忽略，尽量少用，如果一定要用，则应正确使用Noframe标签， 在Noframe》/Noframe》区域中包含指向frame页的链接或带有关键词的描述文本，同 时在框架以外的区域也出现关键词文本。

17、资讯的内部链接

有助提高网站排名和PR值，例如相关资讯、推荐资讯等