• 手机屏幕分辨率乱得一塌糊涂，什么分辨率都有！
• 我们的手机上网费用贼贵贼贵！
• UC浏览器拥有了贼大的市场占有率！ 

关于UC浏览器：

没错，不得不提它。谁叫它的市场占有率高呢。
对于UC浏览器而言，显然是非常适合我国国情的，它给用户最大限度地节约手机上网流量。（UC浏览器打的口号貌似也就是省流量这一招了）。
基于移动应用，以及文本的可读性，UC浏览器也体现了大字体、大行距等特性。
UC浏览器相对于其他手机浏览器而言，对HTML标签和CSS属性存在有特殊的、自定义的处理方式。
而所做的这些特殊处理，按目前来看，应该将会继续保留较长一段时间，直到手机上网费用得到较大幅度的下降，令消费者更大胆地移动上网之时。

在实际开发中，我们发现了UC浏览器对CSS存在一些“特殊照顾”：

• 不支持font-family属性，也就是说，在UC浏览器你只能看到一种字体；
• 不支持font-szie属性，也就是说，在UC浏览器你只能看到一样大小的字体；
• 不支持width、height、padding、margin、line-height属性，也就是说，在UC浏览器只能通过p、br等HTML标签来换行以达到字符上下间隔；
• 不支持固定像素的宽度，100%显示页面，也就是说，在UC浏览器始终将看到的是“满屏的”；
• 不支持浮动、层叠布局，float和position属性无效，也就是说，在UC浏览器你只能看到“左对齐”。
• 支持background-color，但不支持background-image，也就是说不支持CSS背景图显示，在UC浏览器你只能看到背景色。

不过，个人仍然认为，如今建设小屏幕移动设备网页，完全可依据WebKit引擎的浏览器作为标准进行界面开发。
换句话说，我们设计支持UC浏览器的网页，而不是设计以UC浏览器为标准的网页。
这样做还有个好处，可以在大部分的手机浏览器上保证相对一致的样式。
而针对UC这种连float等标准CSS属性也不支持的浏览器，别过于纠结它！
但为了保证界面中各元素在UC浏览器仍具有良好的阅读顺序，严重建议HTML编码人员留意各个HTML标签的先后顺序。
因为只有在支持float、position属性的浏览器下，页面各个容器才可以任意浮动或层叠的。否则，浏览器将按HTML标签的先后顺序显示。

另外一些小屏幕移动设备网页设计的相关补充：

• 网站头(header)
  考虑到小屏幕移动设备的一些特性，设计网页时，有些可以去掉网站头（包括LOGO、全局导航什么的）。
  比如flick的查看大图页面就去掉了网站头。
  

  这里我自创了一句时髦的设计原则：“针对于小屏幕移动设备的界面设计，在某些指定任务的界面，应优先于让用户关注当前任务，而不是应用程序本身。” 这个原则是行得通的，同样适用于设计移动设备应用程序~
  打个比方说，如果你在设计小屏幕移动设备访问的邮箱时，完全可以在写信、邮件阅读页去掉网站头~

• 链接聚焦（hover）
  各个浏览器均自定义了链接的hover样式，比如有的浏览器给链接聚焦时加了边框，有的浏览器给链接聚焦时加个背景色之类。因此小屏幕移动设备网页不需要在CSS中编写hover样式。
• 鼠标事件（mouseover）
  考虑到触摸屏操作，用户无法用手指进行over的操作，因此应禁止在应用于移动设备访问的网页使用mouseover。

转自：网易杭州研究院UX团队博客

原文链接：http://ucd.blog.163.com/blog/static/111307086201091211522637/

1. CSS样式指南：提高CSS的可读性
2. CSS样式指南：提高CSS的可读性
3. 大型网站css样式命名和应用原则

<!–IE6下的left定位错误–>
<div style=”position:relative;border:1px solid orange;text-align:center;”>
     <a href=”http://www.ilmilk.com”>http://www.ilmilk.com/</a>
<div style=”position:absolute;top:0;left:0;background:#CCC;”>ilMilk</div>
</div>

<!–IE6下的left定位错误–>
<hr />
<div style=”position:relative;border:1px solid orange;text-align:right;”>
     <a href=”http://www.ilmilk.com”>http://www.ilmilk.com/</a>
<div style=”position:absolute;top:0;left:0;background:#CCC;”>ilMilk</div>
</div>

上面这段代码在IE6中定位错误。解决办法有两种：1、给父层设置zoom:1触发layout。 2、给父层设置宽度（width）。

<!–解决方法1 zoom:1–>
<hr />
<div style=”position:relative;border:1px solid orange;zoom:1;text-align:center;”>
     <a href=”http://www.ilmilk.com”>http://www.ilmilk.com/</a>
<div style=”position:absolute;top:0;left:0;background:#CCC;”>ilMilk</div>
</div>

<!–解决方法2 设置width–>
<hr />
<div style=”position:relative;width:99%;border:1px solid orange;text-align:center;”>
     <a href=”http://www.ilmilk.com”>http://www.ilmilk.com/</a>
<div style=”position:absolute;top:0;left:0;background:#CCC;”>ilMilk</div>
</div>

下面的这段代码在IE6下，bottom定位错误：

<!–IE6下的bottom定位错误–>
<hr />
<div style=”position:relative;border:1px solid orange;text-align:center;”>
     <a href=”http://www.ilmilk.com”>http://www.ilmilk.com/</a>
<div style=”position:absolute;bottom:0;left:0;background:#CCC;”>ilMilk</div>
</div>

解决办法和left定位类似：方法1是给父层设置zoom触发layout，方法2是给父层设置高度（height）。

<!–解决方法1 zoom:1–>
<hr />
<div style=”position:relative;border:1px solid orange;zoom:1;text-align:center;”>
     <a href=”http://www.ilmilk.com”>http://www.ilmilk.com/</a><br />
<a href=”http://www.ilmilk.com”>http://www.ilmilk.com/</a>
<div style=”position:absolute;bottom:0;left:0;background:#CCC;”>ilMilk</div>
</div>

<!–解决方法2 设置height–>
<hr />
<div style=”position:relative;height:60px;border:1px solid orange;text-align:center;”>
     <a href=”http://www.ilmilk.com”>http://www.ilmilk.com/</a>
<div style=”position:absolute;bottom:0;left:0;background:#CCC;”>ilMilk</div>
</div>

IE6中很多Bug都可以通过触发layout得到解决，以上的解决方法无论是设置zoom:1还是设置width和height其实都是为了触发layout。下列的CSS属性或取值会让一个元素获得layout：        

position:absolute 绝对定位元素的包含区块(containing block)就会经常在这一方面出问题

float:left|right 由于layout元素的特性，浮动模型会有很多怪异的表现

display:inline-block 当一个内联级别的元素需要layout的时候就往往符用到它，这也可能也是这个CSS属性的唯一效果—-让某个元素有layout

width: 除auto外的任何值

height: 除auto外的任何值

zoom: 除auto外的任何值

1. 需要了解的DIVCSS面试题目
2. PR值更新啦，蛋蛋再见
3. NIKE《踢出传奇》南非世界杯系列预告片

960CSS框架是一个非常流行的CSS框架，它是国外最成熟的CSS框架之一，而且结构清晰，代码简洁，容易上手。

960的基本原理是网格技术，而且960是CSS 网格技术的最完美实现。

网格技术是最近两年才出现的一种网页布局方法，它的原理是将页面平均分割成N列，然后通过组合相应数量的列来完成对页面的布局。

960的方法是，将页面平均分成12列或16列，然后列与列之间是完全独立的，每一列的margin和padding都是相同的，这样，每列之间就不会出现那些常见的bug。

BluePrint和YUI也有网格技术，但是它们的列与列之间的空白，是通过单边的margin来实现的，这样就需要在第一列或最后一列添加额外的样式。好了，回归正题~很久前看过960框架介绍，没深入去了解，所以一直也没机会尝试。前段时间正好设计一个专题，发现此专题可以用960框架去实现。要看demo就点我啦~

文绉绉的话不会说了，第一次尝试吧，在实践过程中学到挺多的。我用的是24列框架布局，每一列的宽度是30px，间隔是margin：0 5px;

核心代码：

.container_24 { width:960px; clear:both; overflow:hidden; _height:1%; margin-bottom:10px;}

.grid_6,.grid_12,.grid_18 { margin:0 5px; float:left; display:inline;}

.grid_6 { width:310px;}

.grid_12 { width:470px;}

.grid_18 { width:630px;}

对于每列的公用样式，通过“.grid_1,.grid_2,.grid_3, …… .grid_24这样的写法来实现，我认为不如将这个公用的样式独立出来，写成另外的一个样式，而每列的class，只负责控制列的宽度就行了，这样比较灵活而且更简单， 更易于理解和使用。

需要注意的：

1.设计前务必得计算好宽度，请精确到1px

2.960框架的宽度为960px,960px是有包含第一列的margin-left和最后一列的margin-right

3.清除浮动 clear：both不能少

点击下载：960CSS

暂时就这些，哪里忽略的希望各位懂的同学给我指出来，谢谢~~

1. 需要了解的DIVCSS面试题目
2. 大型网站css样式命名和应用原则
3. 全面兼容IE6/IE7/IE8/FF的CSS HACK

/* 禁止换行 */
.nowrap{word-break:keep-all;white-space:nowrap;}
/* 强制换行 */
.break{word-break:break-all;}

在不想换行的标记上加入样式nowrap，在需要强制换行的地方加入样式break，这样就实现了强制换行与不换行了。

mark~加深印象！顺便测试下更换IP后，文章多长时间能被搜索引擎收录~

1. 利用CSS突出显示不同类型的链接
2. 大型网站CSS组织架构
3. 大型网站css样式命名和应用原则

在当前浏览器普遍支持的前提下，css被我们赋予了前所未有的使命。然而依赖css越多，样式表文件就会变得越大越复杂。与此同时，文件维护和组织的考验也随之而来。

(曾几何时)只要一个css文件就够了——所有规则(rule)汇聚一堂，增删改都很方便——可这种日子早已远去。(现在)建立新网站时，必须花点时间好好筹划怎么组织和架构css。

文件的组织

构建css系统的第一步是大纲的拟定。(我认为)css组织规划的重要性堪比网站目录结构。(htmlor注:用词夸张一点，让你加深记忆) 没有哪种方案放之四海而皆准，因此我们会讨论一些基本的组织方案，以及它们各自的利弊。

主css文件

通常可以使用一个主css文件，来放置所有页面共享的规则。这个文件会包含默认的字体、链接、页眉和其他等样式。有了主css文件之后，我们开始探讨高级组织策略。

方法一:基于原型

最基本的策略是基于原型页面(archetype page)分离css文件。假如一个网站的首页、子页面和组合页设计不同，就可以采用基于原型的策略。(这种策略下)每个页面都会有专属的css文件。

在原型数量不多的情况下，这个方法简单明了、行之有效。然而，当页面元素并不按部就班的位于各个原型页时，问题就出现了。如果子页面和组合页共享某些元素，而首页却没有，我们应该怎么做呢?

把共享元素放入主css文件。这虽不是最纯正的解决办法，却适用于某些具体情况。可是如果网站庞大，(这样做的话)主css文件会迅速膨胀——这就违背了分离文件的初衷:避免导入不必要的大文件。

在组合页和子页面的css文件里各放一份样式代码。(这么做)就意味着要维护冗余代码，很显然我们不想这样。

创建一个新的文件，由这两种页面共享。这听起来不错。不过假如只有10行代码，我们创建这个 文件仅仅是为了共享这10行代码?(htmlor注:杀鸡用牛刀?) 这方法很纯粹，但如果网站庞大有很多对页面共享很少量元素时(htmlor注:比如30对页面分别共享10行代码)，就显得很笨重了。

创建一个单独的css文件，包含所有共享元素的样式。这方法可能比较简单，却要取决于网站的大小和共享元素的多少。有种情况会很烦:导入了一个很大的css文件，但页面只用到一小部分样式——还是那句话，这违背了分离文件的初衷。

这就是我所说的重叠的两难(overlap dilemma)。零碎css规则的重叠不一而足，并没有一个完全清晰无误的方案来组织它们。

方法二:基于页面元素/块

如果网站使用服务器端include，这个方法会很不错。举例说明，如果使用页眉include，它会有自己相应的css文件。页脚或者其他部分的include可以如法炮制，只须导入自己的css文件。这个方法简单干净，不过可能会产生很多小css文件。

举例来说，假如页脚的样式只需要20行css代码，单独创建一个文件就划不来了。而且这个方法会导致每个页面都包含一堆css文件——因为有多少include，就得有多少css文件。

方法三:基于标记

这个方案直观实际，与前一个类似。如果网站共有30个页面，其中10个含有form，那么可以创建一个css文件专门处理form的样式，只在这10个页面导入它。如果另外10个页面含有table，就创建一个文件专门处理table样式……诸如此类。

另外的组织技巧

除了用主观的方法组织文件，我们还要考虑如打印、手持设备和屏幕等多种媒体类型。这虽然已经很清楚的定义过，可依旧是建立文件结构时应该考虑的一个因素。一旦必须支持多种媒体类型，主css文件里的某些规则可能就得重新考虑。

另外，品牌联合也可能是一个重要因素。(htmlor注:如google和nike联手推出的joga) 如果涉及品牌联合，你就得考虑哪些元素应该调整以适应另一品牌。比如分别使用不同的css文件等。

还有一个常被忽略的技巧:使用嵌套的@import语句。只包含一连串@import语句， 或者再加几句css规则，就能创建一个css文件。用这个方法完全可以创建网站的主css文件(用@import导入各部分的样式文件)。假如网站的每个 页面都导入了4到5个不同的css文件，无疑你应该考虑使用这个技巧。

规则和选择器的组织

谈完了文件组织，接着讨论一下怎么组织文件里的东西吧。很自然，我们希望在文件里畅通无阻的浏览，迅速找到要编辑的选择器(selector)或规则。

冗余 vs. 附属

正如Dave Shea在其文章《冗余 vs. 附属》(Redundancy vs. Dependency)里所说的，你必须不断了解级联(cascade)。你要决定是对选择器编组(意味着附属)，还是把它们分离(意味着冗余)。编组可 以保持代码简洁扼要，可是会建立附属关系，导致维护开销增加。如果不编组，就会增加文件大小，让相似的选择器保持一致变得困难。只有做好这种权衡、取舍， 才能每次都作出正确的决定。

按相互关系/上下文编组

既然文件组织可以是主观的，那么显然，按照规则和选择器与其他部分的相互关系来进行编组是最好的方法。举例说明，假设你用容器、页眉和页脚来完成布局，就应该把它们编成一组。

这似乎很简单，其实不然。比如，把页眉中的导航加入css时，是将它跟父元素编组还是独立编组?这种情况下，要视乎规则的上下文。通常，页眉与页面布局相关，应该与其他布局元素一起编组。而导航是页眉的一块，应该和页眉的其他块编组，而不是页眉本身。

使用注释

跟大多数代码类似，注释是组织良好与否的关键。应该根据css的控制范围，清楚的标注每节(section)。最好确保注释视觉突出，以便在内容滚动、一目十行时快速定位。

Doug Bowman在其文章《css组织技巧之一:标记》(CSS Organization Tip #1: Flags)里把css注释玩得高明之极。他详细说明了在节名之前加上等号，以便使用文本编辑器的查找功能迅速跳到某节。

别忘了

你应该细致认真的了解了特异性、级联和继承，并善用它们。它们之中的每一项都可以是你最可怕 的敌人，也可以是你最友善的朋友。当建立庞大的网站时，是否理解这些细微精妙之处，决定了你所构建的是坚如磐石的系统，还是经不起风雨的豆腐渣工 程。(htmlor注:这句完全意译，比较爽)

属性的组织

现在我们了解了文件的组织，也知道了文件内规则的组织，但还有一个重要的组织环节(没有提到)，那就是属性(attribute)。虽然属性比前两个概念更简单，可是还有一些非常好的、能够保持规则整洁的方法很值得一提。

按字母排序

提到属性，如果说需要遵循什么原则的话，那就是:按-字-母-排-序。其实这招对于属性浏览帮助不大，不过可以防止属性值覆盖这种偶然事件的发生。

举个例子吧，已经数不清有多少次，我为某个选择器定义过了margin值，之后的某天无意间 又加了一个(或前或后)。(这种情况下)后一个属性自然会起作用。假设不知道第二个属性存在，不管我怎么调整第一个属性值、刷新浏览器，也看不到页面变 化。(htmlor注:这个问题我深有体会) 如果按照字母顺序排列，你就会发现margin被定义了两次(因为它们挨在一起)，这个问题自然可以避免。

优先项

当网站复杂、牵涉太多css文件时，会建立大量的附属关系。一旦需要定制某个元素特有的样式，!important选项似乎是最佳选择。没错，!important是能解一时之需，但最好搞清楚导致问题的根源，然后根据级联关系决定是否真的需要用它。

如果你对上文提到的特异性、级联和继承很熟悉，大可不必抱着!important一颗树不 放。(htmlor注:整片森林等着你~) 当然它还是会派上用场，不过使用之前要对具体情况了然于胸。千万不要因为不知问题的症结所在而把!important当作捷径或是补救方案。

小结

当我们变得依赖css而使样式表日渐复杂时，就需要正确的计划来避免犯错，并使代码易于维护。既然完美无缺的方案并不存在，那么了解css的工作方式以及文件、选择器和属性的多种组织方案，无疑有助于我们写出优质的代码，经受住时间考验。

1. 大型网站css样式命名和应用原则
2. CSS中强制换行与强制不换行
3. 利用CSS等比例缩小图片

2.    CSS命名规范。
全局样式 base.css 指所有页面通用的样式，或者公共块的样式;
首页样式 index.css
频道页面样式 channel.css
详 细页面样式 detail.css
如果有特殊单独页面样式，可另取样式命。

3.    页面框架结构保留字。
页面容 器：＃wrap                             页面头部：#header
页面中心内 容：#maincontent             页面底部：#footer
横向方位容器1：main，side             横向方位容器2：leftframe，midframe，rightframe
横向分段容器：section，field，column 盒子内容属性：contentbg
盒子上方属性：topbg                             盒子下方属性：bottombg
盒子左边属性：leftbg                             盒子右边属性：rightbg

4.    导航保留字。
导航：nav    主导航：mainnav
子导 航：subnav    顶导航：topnav
边导航：sidebar    左导航：leftsidebar
右导 航：rightsidebar    菜单：menu
子菜单：submenu    下拉菜单：dropmenu
快速菜 单：quickmenu

5.    功能保留字。
列表：list                    标 题：title
摘要：intro    内容：text
按扭：btn                    搜索：search
登 陆：login    注册：regsiter
提示信息：msg    小技巧：tips
图标: icon                    滚动：scroll

6.    根目录文件夹命名存放方式。
例如：
总 网站文件存放于F盘web下；
Web下 应该包含
images    存放所有网站直接插入的图片；
imagestemp    存 放所有网站直接插入，但后期一定被程序替换的图片。
imagesad    存放网站所有的广告图片；
style    images    存 放公共或单独页面样式所涉及的样式图片；
存放公共样式表或单独页面样式表；
include    存放网站所有的包含页面；
js    存 放网站所有的JS效果文件
XXXX
频道页文件夹    style    存放所有频道页面所涉及到的样式图片和样式表；
存 放所有该频道下的子页面；

7.    注释。
页面和样式表里面 容易混淆，或比较重要的样式，框架样式 都应写注释

页 面内注释格式为
<!–header–>     ————————–为开始
<!–//header–>   ————————–为结束

样式表内注释格式为：
/*XXXX   样式开始*/

/*XXXX   样式结束*/

1. CSS样式指南：提高CSS的可读性
2. 利用CSS突出显示不同类型的链接
3. PR值更新啦，蛋蛋再见

我们在浏览网站的过程中，不会刻意地去观察要点击的链接是指向本站点上的另一个页面，还是指向另一个站点。或许我们都有过这样的经历：单击一个链接，期望浏览器转到当前站点上的另一个页面，但是不经意间却点击的这个链接却指向了其他站点。

当然，为了避免这么做也有有效的解决方法，例如采取在新窗口中打开链接。今天要说的是另外种解决方法。比如说，我们能够让外部链接看上去和本站的链接不太一样，为此，我们可以在外部链接旁边加上一个小图标，让他与众不同~

实现这种效果最容易的方法只要在所有的外部链接上加上一个类，然后将图标作为背景图像应用。这个方法可以实现我们想要的效果，但是如果页面多了，那将变得非常繁琐。（因为我们必须要有足够的耐心去在每个外部链接上添加类）。除此之外，我们可以利用属性选择器让CSS判断链接是否是外部链接。

点击我先看Demo

经过测试，可以发现除了IE6以外的其他主流浏览器都可以完美支持。下面来分析下网页源码。

CSS3 扩展了属性选择器的功能，提供了子字符串匹配属性选择器，这些选择器允许通过对属性值的一部分和指定的文本进行匹配来寻找元素。

这种技术的工作方式是使用 [att^=val] 属性选择器寻找以文本 http: 开头的所有链接：

a[href^="http:"]{
background: url(images/externalLink.gif) no-repeat right top;
padding-right:10px;
}

 这应该会突出显示所有的外部链接，但也会选中使用绝对 URL 而不是相对 URL 的内部链接，为了避免这个问题，需要重新设置指向自己站点的所有链接。

a[href^="http://yoursite.com"],a[href^="http://www.yoursite.com"]{
background-image:none; 
padding-right:0;
}

当然，我们还可以扩展这种技术，如对邮件也进行突出显示。

a[href^="mailto:"]{
background: url(images/email.png) no-repeat right top; 
padding-right:10px;
}

我们还可以用 CSS 选择器来区分一些下载链接，如一个 PDF 或 Word 文档。这要使用 [att$=val] 属性选择器，它寻找以特定值结尾的属性：

a[href$=".pdf"]{
background: url(images/pdfLink.png) no-repeat right top; 
padding-right:10px;
}

a[href$=".doc"]{
background: url(images/pdfLink.png) no-repeat right top; 
padding-right:10px;
}

类似的还有 RSS(feec) 链接：

a[href$=".rss"], a[href$=".rdf"]{
background: url(images/feedLink.png) no-repeat right top; 
padding-right:10px;
}

这些技术都有助于改进用户在站点上的浏览体验，让用户明确地了解单击链接时会发生的情况，避免不必要的取消操作和烦恼。

但本方法对 IE6 没有效果，而且并没有实现自动让外部链接在新窗口打开。如果想实现这样的效果，就必须用到 JavaScript 和 DOM 。

1. IE6绝对定位的bug和解决方法
2. 大型网站css样式命名和应用原则
3. 全面兼容IE6/IE7/IE8/FF的CSS HACK

1.分解你的样式

对于小项目，在写代码之前，按页面结构或页面内容将代码分为几块并给予注释。例如，可以分别将 全局样式、布局、字体样式、表单、评论和其他分为几个不同的块来继续工作。

而对于较大的工程，这样显然不会有什么效果。此时，就需要将样式分解到几个不同的样式表文件。下面的master stylesheet 就是这一方法的例子，它的工作主要是导入其他样式文件。使用这一方法不仅能优化样式结构，而且有利于减少一些不必要的服务器请求。而分解文件的方法就有许多种，master stylesheet 使用了最常见的一种。
/*——————————————————————
[Master Stylesheet]
Project:       Smashing Magazine
Version:       1.1
Last change:       05/02/08 [fixed Float bug, vf]
Assigned to:       Vitaly Friedman (vf), Sven Lennartz (sl)
Primary use:       Magazine
——————————————————————-*/
@import “reset.css”;
@import “layout.css”;
@import “colors.css”;
@import “typography.css”;
@import “flash.css”;
/* @import “debugging.css”; */
同时对于大型项目，你也可以加上CSS文件的升级标志或者一些诊断措施，这里不再详述。

2.建立CSS文件索引

为了能够迅速的了解整个CSS文件的结构，在文件开头建立文件索引是一个不错的选择。一种可行的方法是建立树形的索引：结构上的id 和 class 都可以成为该树的一个分支。如下：
/*——————————————————————
[Layout]
* body
      + Header / #header
      + Content / #content
            – Left column / #leftcolumn
            – Right column / #rightcolumn
            – Sidebar / #sidebar
            – RSS / #rss 54ne.com
            – Search / #search
            – Boxes / .box
            – Sideblog / #sideblog
      + Footer / #footer
Navigation         #navbar
Advertisements         .ads
Content header         h2
——————————————————————-*/[

或者也可以这样：
/*------------------------------------------------------------------
[Table of contents]
1. Body
      2. Header / #header
            2.1. Navigation / #navbar
      3. Content / #content
            3.1. Left column / #leftcolumn
            3.2. Right column / #rightcolumn
            3.3. Sidebar / #sidebar
                  3.3.1. RSS / #rss
                  3.3.2. Search / #search 网管网bitsCN.com
                  3.3.3. Boxes / .box
                  3.3.4. Sideblog / #sideblog
                  3.3.5. Advertisements / .ads
      4. Footer / #footer
——————————————————————-*/

另一种方式可以只是先简单的将内容列举出来，也不需要缩进。下面的一个例子中，如果你需要跳至RSS部分你只需要简单的搜索8.RSS。
/*——————————————————————

[Table of contents]
1. Body
2. Header / #header
3. Navigation / #navbar
4. Content / #content
5. Left column / #leftcolumn
6. Right column / #rightcolumn
7. Sidebar / #sidebar
8. RSS / #rss
9. Search / #search
10. Boxes / .box
11. Sideblog / #sideblog
12. Advertisements / .ads
13. Footer / #footer

——————————————————————-*/

<!– some CSS-code –>

/*——————————————————————
[8. RSS / #rss] 54ne.com
*/
#rss { … }
#rss img { … }

定义这样一个样式检索可以很有效的使其他人阅读学习你的代码变得容易。在制作大项目的时候，你也可以将检索打印出来从而在你阅读代码的时候方便查阅。

1. 大型网站css样式命名和应用原则
2. 需要了解的DIVCSS面试题目
3. 小屏幕移动设备网页设计注意事项

把一副大图片按比例缩小到某个尺寸，对于现代浏览器，直接使用max-width和max-height两条CSS属性即可。

    对于IE 6.0及以下版本，以上两条CSS属性均不会被理会。之前处理这种事情，我们往往会借助Javascript，然后为图片加上onload事件。例如：

    这固然能解决问题，但是对以后页面的升级会带来麻烦——随着浏览器对CSS支持的完善，我们迟早会把图片上的onload事件统统去除。该是Expression的Show Time了，既然IE支持通过Expression在CSS中放置一些脚本，而这段脚本又只是提供给IE 6.0及以下版本使用，那么把它写到Expression中再合适不过。

    最终，把一副大图片按比例缩小到50px*50px以内，可以参照以下这段CSS：

 .thumbImage{

max-width:50px;

max-height:50px;

}

*html.thumbImage{

width:expression(this.width>50&&this.width>this.height?50:auto);

height:expression(thhis.height>50?50:auto);

}

1. 需要了解的DIVCSS面试题目
2. 雅虎面试题-你真的了解HTML吗?
3. 大型网站css样式命名和应用原则

　　1、标题标签

　　在Html代码中，标题的标签一共6个，它们的具体代码表现形式分别是：“<h1>标题1</h1>”、“<h2>标题2</h2>”、“<h3>标题3</h3>”、“<h4>标题4</h4>”、“<h5>标题5</h5>”和“<h6>标题6</h6>”，其中标题1的逻辑权重最大，其他的标题重要性随着h后的数字增大而减小。在搜索引擎的文本分析中，标题的信息权重要比文章正文的大，所以我们尤其要注意内容标题的规划和书写。

　　一篇文章中可能会出现很多标题，诸如正文大标题、副标题、段落标题等。我们应该根据标题的逻辑重要性分配合适的标题标签，正文大标题应该是<h1>，副标题可是是<h2>，而段落标题则可分配<h3>，其他的就可以以此类推了。我们不建议所有的标题都采用<h1>标签，这样不能向搜索引擎阐述哪些标题应该比其他的标题更加重要，因而显得标题没有层次逻辑性。

　　2、强调标签

　　为了说明文章正文部分的某些字词或者句子的重要性，我们应该要通过html强调代码来标识它们，从而使其与其他部分的字词或者句子区分开来。
　　一般强调标签：<em>，Html代码表现形式：“<em>强调的字词或句子</em>”，被<em>标签包括了的字词或句子在网页中表现为斜体。
　　重点强调标签：<b>和<strong>，具体Html代码表现形式：“<b>强调的字词或句子</b>”和“<strong>强调的字词或句子</strong>”，被重点强调标签包括了字词或句子在网页中表现为粗体。<b>主要侧重于表现视觉上的强调，而<strong>则是指语意上的强调。

　　以上所谈的两类标签表达的文本逻辑性权重很大，所以其配合表现的字词句段在搜索引擎的文本分析中占有极大的评估优势，这也就不难理解为什么很多的SEO对它们十分重视了。网页设计师在编写代码的时候应当尽量使用丰富多样的标签，让网页的文本信息具有逻辑性，从而让搜索引擎能更好的读“懂”网页中的信息。对于搜索引擎优化人员来说，在这些标签中部署关键词是一个不错的选择。

　　一定要注意，合理运行。不能滥用这些标签，如详细页面的标题使用h1，而不要到处使用。反之会让搜索引擎不知道哪些是主要的了。

转自：标准之路(http://www.aa25.cn)

1. 需要了解的DIVCSS面试题目
2. 大型网站CSS组织架构
3. CSS样式指南：提高CSS的可读性