上海SEO » 上海SEO 网站制作

最简单网页变灰代码，网页变灰CSS（一句代码）

admin — Wed, 21 Apr 2010 01:02:39 +0000

以下为全站CSS代码。html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }

使用方法：这段代码可以变网页为黑白，将代码加到CSS最顶端就可以实现素装。建议全国站长动起来。为在地震中遇难的同胞哀悼。

如果网站没有使用CSS，可以在网页/模板的HTML代码和之间插入：

有一些站长的网站可能使用这个css 不能生效，是因为网站没有使用最新的网页标准协议

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
http://www.w3.org/1999/xhtml“>

请将网页最头部的替换为以上代码。

有一些网站FLASH动画的颜色不能被CSS滤镜控制，可以在FLASH代码的和之间插入：

最简单的把页面变成灰色的代码是在head 之间加

html {
FILTER: gray
}

一般的discuz论坛在你的控制css 文件下修改
/images/header/header.css 这个文件

挥别8年竞价历史 Baidu凤巢系统全面上线

admin — Thu, 03 Dec 2009 07:58:51 +0000

　　12月1日-12月6日是百度全面启用搜索营销专业版(即凤巢系统)。简单的来说，左测排名保持最上方三条和最下方三条，和现有google 版面一样。

　　以竞价排名为主的网络营销是百度最重要的收入来源，今年第三季度百度总营业收入为12.787亿人民币，其中来自网络营销的收入为12.782亿元人民币，比重已接近100%。不过竞价排名在为百度创收的同时，也一度带来负面影响。

　　2008年底，百度CEO李彦宏首度向外界透露，将推出专业版搜索营销系统凤巢，以解决普通搜索和竞价排名搜索结果混淆的问题。今年百度发布第三季财报时，李彦宏正式对外公布将于12月1日全面向凤巢系统切换。

　　百度商业产品重大更新

　　在原竞价排名的机制下，百度将普通的搜索结果和竞价排名的搜索结果排列在一起，仅在相关搜索结果的右下角以“推广”二字标出；另外在一个搜索结果页面上最多可能出现十条竞价排名内容，并且排列在最上面，容易造成用户使用的不便。

　　启用凤巢之后，百度将搜索页面的广告位分为左上、左下、右侧三个部分，其中变化最大的就是左侧的广告位和表现形式。

　　在新的凤巢系统下，百度在普通搜索结果的最上方和最下方分别开辟了两个广告区域，以较深的底色、并在右上角标注“推广链接”字样等方式，同普通的搜索结果内容进行显著的区隔，并且每个区域的推广链接一般不会超过三条。

　　不过，如果推广信息和用户的搜索结果匹配度非常高，百度仍将沿用原竞价排名采用的“推广”模式。如果达不到相关的标准，就会以新的方式予以展现。

　　除了外在的表现形式，凤巢和竞价排名在结构方面也有了明显的变化。百度方面透露，此前竞价排名的结构方式为“推广平台-关键词组-关键词A……N-单一创意”，而在凤巢系统下这一结构变为“推广平台-推广计划-推广单元-关键词对应创意”。

　　对于上述变化，百度商业运营副总裁沈晧瑜指出凤巢能够针对不同产品线、不同的推广战役、不同的地域市场，带来面向不同推广目标的精细化管理模式。“凤巢是百度商业产品的一次重大更新”。

针对语言或地区选择器的SEO解决方案

admin — Tue, 17 Nov 2009 02:21:17 +0000

你的大品牌网站终于得到了回报，吸引了大量的关键词查询。你的网站获得了国际性的流量，则你需要确保用户能获得适当的内容，而不要牺牲你建立的SEO.

今天，我们讨论全球性或是语言选择器背后的意图。这一问题可能会引起你的SEO宣传活动，语言选择器的替代品。如果你只是无法消除它，最终会有最佳实践来执行。为了完成本专栏的目的，你的网站必须是英文版本的，但不论你身处何地，你的网站是什么类型的，相同的原则都是适应的。

全球性品牌经常需要网站或是内容要针对特定地区或操某种语言的用户。本专栏的目的不是对此进行辩论，而是研究最有效的办法为用户提供替代内容。

第一，要解决一款出色的语言选择器来帮助你建立网站用户群。需要考虑以下因素：

当你在本土以外的地区搜索你的品牌诸如谷歌法国或是雅虎阿根廷，特定地区内容是否显示或者在搜索结果网页附近？如果是，你可能需要在主页上放一个语言选择器，因为需要替代内容的用户可能已自动获得这些内容。

你的主要域名的作用是什么？诸如宝马、可口可乐和本田等基本上是把直接流量导向正确儿童网站的门户。你现有流量的语言细目分类是什么？如果80%到90%的流量来自你的你的本土或是主网站语言区，是否需要一个出色的语言选择器？

最后一个问题有点难度。你可以说，如果有80―90%的流量集中在一个地区，一个出色的语言选择器可能会帮助流量的多元化。

如果你把主页的大部分用于语言地区选择，你可能会面临失去部分SEO资产的风险。

第一，你的Sitelinks质量可能会面临危险。要知道Sitelinks的两大主要功能：提供深度内部内容的快速接入，确保消费有价值的SERP资产，让竞争对手减少网页。分析一下谷歌搜索引擎对可乐的查询。网站的架构提供其8个 Sitelinks，其中8个指向不同的国际内容门户。

这是可乐想要的，但是否是你想要的？

第二，你可能盗用了你的主页的权威性。任何链接到你的主页的网页都是重要的。设想一下，有大量的链接指向你的主页，然后决定你想如何区分并冲淡其中国际门户网页的权威性。你的国际主页是否应该分享，或者他们会象国际主页一样会产生自己的权威性？

在回答这个问题前，先来分析一下你的分析工具，看有多少用户目前使用你的Sitelinks.在测试中，我针对多外网站运行。我发现有 20－35%的用户点击其中的8个Sitelinks，并直接引向深度产品和服务内容。如果只有Sitelinks选择是来自不同地区的内容，他们是否会如此做？

最好的办法是在网页上设置一个地区语言选择器，如此，你就可以轻松地从主页找到内容。一般来说，这是一个标题链接，用户可以从任何网页接触。这给用户找到适合自己内容的方便机会，但它不会给你的主要增加大量或是更多的链接。如果这种架构影响你的Sitelinks，它只会增加链接到选择器网页的链接。

尽管每个问题都讨论了，你可能还没有重要的选择。你的指示可能是，“开发一个语言选择器，让它成为用户第一个看到的东西，保持它与SEO的友好关系。”这个任务很艰巨，但不是不可能。要记住以下方法：

――在主页上建立一个传统的导航计划，可以对核心地区的内容进行深度链接。换句话说，要确保你的左边或是顶部的导航计划的完整性，这样，搜索引擎就可以从根部索引重要的网页。

――在JavaScript中编写语言选择器，这样，搜索引擎就会不可能多次地索引链接。

除了语言选择器，要考虑阅读你的用户IP地址，并自动地向用户发送根据他们的IP地址确定的针对特定地区的内容。从搜索引擎的角度看，这不但有效而且完全可以接受，因为它有时就是搜索引擎的做法。

第三，我意识到你可以在谷歌站点管理工具中调整并封锁特定的Sitelinks.因此，它可以很容易地进行封锁。但最为重要的是，没有调整重要架构因素时，谷歌可以选择取代你的封锁链接。

HTML兼容总结

admin — Tue, 10 Nov 2009 01:24:55 +0000

接触DIV+CSS架构已经快两年了，个人觉得css入门不难，但要学精并非一朝一夕的，现在大部分网络公司都比较主张用div+css来布局，这就面临着一个比较难的问题——浏览器的兼容性。
下面整理了一下相关的兼容问题，希望大家再在其基础上补充！
所有浏览器通用（市面上主要用到的IE6 IE7 FF）
height: 100px;

IE6 专用
_height: 100px;

IE6 专用
*height: 100px;

IE7 专用
*+height: 100px;

IE7、FF 共用
height: 100px !important;
一、CSS 兼容
以下两种方法几乎能解决现今所有兼容.

1, !important (不是很推荐，用下面的一种感觉最安全)

随着IE7对!important的支持, !important 方法现在只针对IE6的兼容.(注意写法.记得该声明位置需要提前.)

代码:

2, IE6/IE77对FireFox

*+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签.

代码:

注意:
*+html 对IE7的兼容必须保证HTML顶部有如下声明：

代码:
http://www.w3.org/TR/html4/loose.dtd“>

二、万能 float 闭合(非常重要!) 可以用这个解决多个div对齐时的间距不对，

关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup]
将以下代码加入Global CSS 中,给需要闭合的div加上 class=”clearfix” 即可,屡试不爽.

代码:

三、其他兼容技巧(相当有用)

1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决)
2, 居中问题.
1).垂直居中.将 line-height 设置为当前 div 相同的高度, 再通过 vetical-align: middle.( 注意内容不要换行.)
2).水平居中. margin: 0 auto;(当然不是万能)
3, 若需给 a 标签内内容加上样式, 需要设置 display: block;(常见于导航标签)
4, FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float的div在ie下 margin加倍等问题.
5, ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表)
6, 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应.
7, 关于手形光标. cursor: pointer. 而hand 只适用于 IE.贴上代码:
8、IE6 的双倍边距 BUG

   浮动后本来外边距10px, 但IE 解释为20px, 解决办法是加上 display:inline
9、为什么FF 下文本无法撑开容器的高度？
　标准浏览器中固定高度值的容器是不会象IE6 里那样被撑开的, 那我又想固定高度，又想能被撑开需要怎样设置呢？办法就是去掉height 设      置min-height:200px; 这里为了照顾不认识min-height 的IE6 可以这样定义：
   div { height:auto!important; height:200px; min-height:200px; }
兼容代码:兼容最推荐的模式。
/* FF */
.submitbutton {
float:left;
width: 40px;
height: 57px;
margin-top: 24px;
margin-right: 12px;
}
/* IE6 */
*html .submitbutton {
margin-top: 21px;
}
/* IE7 */
*+html .submitbutton {
margin-top: 21px;
}
什么是浏览器兼容：当我们使用不同的浏览器（Firefox IE7 IE6）访问同一个网站，或者页面的时候，会出现一些不兼容的问题，有的显示出来正常，有的显示出来不正常，我们在编写CSS的时候会很恼火，刚修复了这个浏览器的问题，结果另外一个浏览器却出了新问题。而兼容就是一种办法，能让你在一个CSS里面独立的写支持不同浏览器的样式。这下就和谐了。呵呵！
程序代码

第一个兼容，IE FF 所有浏览器公用（其实也不算是兼容）
height:100px;
第二个兼容 IE6专用
_height:100px;
第三个兼容 IE6 IE7公用
*height:100px;
height:100px;
*height:120px;
_height:150px;

在FF下，第2、3个属性FF不认识，所以它读的是 height:100px;

在IE7下，第三个属性IE7不认识，所以它读第1、2个属性，又因为第二个属性覆盖了第一个属性，所以IE7最终读出的是第2个属性 *height:120px;

在IE6下，三个属性IE6都认识，所以三个属性都可以读取，又因为第三个属性覆盖掉前2个属性，所以IE6最终读取的是第三个属性。

1 针对firefox ie6 ie7的css样式

现在大部分都是用!important来兼容，对于ie6和firefox测试可以正常显示，但是ie7对!important可以正确解释，会导致页面没按要求显示！找到一个针对IE7不错的兼容方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了现在写一个CSS可以这样：

#1 { color: #333; } /* Moz */
* html #1 { color: #666; } /* IE6 */
*+html #1 { color: #999; } /* IE*/

那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999。

2 css布局中的居中问题

主要的样式定义如下：

body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }

说明：

首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。

但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”

需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。

3 盒模型不同解释.

#box{
width:600px;
//for ie6.0- w\idth:500px;
//for ff+ie6.0
}
#box{
width:600px!important
//for ff
width:600px;
//for ff+ie6.0
width /**/:500px;
//for ie6.0-
}

4 浮动ie产生的双倍距离

#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}

这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,…不可控制(内嵌元素);

#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的的效果 diplay:table;

5 IE与宽度和高度的问题

IE 不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：

#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}

6 页面的最小宽度

min- width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把 width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个

放到标签下，然后为div指定一个类：
然后CSS这样设计：

#container{
min-width: 600px;
width:expression(document.body.clientWidth < 600? “600px”: “auto” );
}

第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

7 清除浮动

.兼容box{
display:table;
//将对象作为块元素级的表格显示
}

或者

.兼容box{
clear:both;
}

或者加入:after（伪对象）,设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie 浏览器支持，所以并不影响到IE/WIN浏览器。这种的最麻烦的

……#box:after{
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}

8 DIV浮动IE文本产生3象素的bug

左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.

#box{
float:left;
width:800px;}
#left{
float:left;
width:50%;}
#right{
width:50%;
}
*html #left{
margin-right:-3px;
//这句是关键
}
HTML代码
<DIV id=box>

9 属性选择器(这个不能算是兼容,是隐藏css的一个bug)

p[id]{}div[id]{}
p[id]{}div[id]{}

这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用

属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.

10 IE捉迷藏的问题

当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。
有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。
解决办法：对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。

11 高度不适应

高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用
margin 或paddign 时。例：

p对象中的内容

CSS：

#box {background-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }

解决方法：在P对象上下各加2个空的div对象CSS代码：.1{height:0px;overflow:hidden;}或者为DIV加上border属性。

屏蔽IE浏览器（也就是IE下不显示）
*:lang(zh) select {font:12px !important;} /*FF,OP可见*/
select:empty {font:12px !important;} /*safari可见*/
这里select是选择符，根据情况更换。第二句是MAC上safari浏览器独有的。

仅IE7识别
*+html {…}
当面临需要只针对IE7做样式的时候就可以采用这个兼容。

IE6及IE6以下识别
* html {…}
这个地方要特别注意很多地主都写了是IE6的兼容其实IE5.x同样可以识别这个兼容。其它浏览器不识别。
html/**/ >body select {……}
这句与上一句的作用相同。

仅IE6不识别
select { display /*IE6不识别*/:none;}
这里主要是通过CSS注释分开一个属性与值，流释在冒号前。

仅IE6与IE5不识别
select/**/ { display /*IE6,IE5不识别*/:none;}
这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。

仅IE5不识别
select/*IE5不识别*/ { display:none;}
这一句是在上一句中去掉了属性区的注释。只有IE5不识别

盒模型解决方法
selct {width:IE5.x宽度; voice-family :”"}”"; voice-family:inherit; width:正确宽度;}
盒模型的清除方法不是通过!important来处理的。这点要明确。

清除浮动
select:after {content:”.”; display:block; height:0; clear:both; visibility:hidden;}
在Firefox中，当子级都为浮动时，那么父级的高度就无法完全的包住整个子级，那么这时用这个清除浮动的兼容来对父级做一次定义，那么就可以解决这个问题。

截字省略号
select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrapoverflow:hidden; }
这个是在越出长度后会自行的截掉多出部分的文字，并以省略号结尾，很好的一个技术。只是目前Firefox并不支持。

只有Opera识别
@media all and (min-width: 0px){ select {……} }
针对Opera浏览器做单独的设定。

以上都是写CSS中的一些兼容，建议遵循正确的标签嵌套(div ul li 嵌套结构关系)，这样可以减少你使用兼容的频率，不要进入理解误区，并不是一个页面就需要很多的兼容来保持多浏览器兼容)，很多情况下也许一个兼容都不用也可以让浏览器工作得非常好，这些都是用来解决局部的兼容性问题，如果希望把兼容性的内容也分离出来，不妨试一下下面的几种过滤器。这些过滤器有的是写在 CSS中通过过滤器导入特别的样式，也有的是写在HTML中的通过条件来链接或是导入需要的补丁样式。

IE5.x的过滤器，只有IE5.x可见
@media tty {
i{content:”";/*” “*/}} @import ’ie5win.css’; /*”;}
}/* */

IE5/MAC的过滤器，一般用不着
/**//*/
@import “ie5mac.css”;
/**/

IE的if条件兼容自己可以灵活使用参看这篇IE条件注释
Only IE
所有的IE可识别

只有IE5.0可以识别
Only IE 5.0+
IE5.0包换IE5.5都可以识别

仅IE6可识别
Only IE 7/-
IE6以及IE6以下的IE5.x都可识别
Only IE 7/-
仅IE7可识别

Css 当中有许多的东西不不按照某些规律来的话，会让你很心烦，虽然你可以通过很多的兼容，很多的!important 来控制它，但是你会发现长此以往你会很不甘心，看看许多优秀的网站，他们的CSS让IE6,Ie7,Firefox,甚至Safari,Opera运行起来完美无缺是不是很羡慕？而他们看似复杂的模版下面使用的兼容少得可怜。其实你要知道IE 和 Firefox 并不不是那么的不和谐，我们找到一定的方法，是完全可以让他们和谐共处的。不要你认为发现了兼容的办法，你就掌握了一切，我们并不是兼容的奴隶。

div ul li 的嵌套顺序

具体嵌套写法

遵循上面得嵌套方式，

< /div> 然后在CSS 里面告诉 ul {Margin:0px;Padding:0px;list-style:none;}，其中list-style:none是不让

标记的最前方显示圆点或者数字等目录类型的标记，因为IE和Firefox显示出来默认效果有些不一样。因此这样不需要做任何手脚，你的IE6、和 IE7、Firefox显示出来的东西(外距，间距，高度，宽度)就几乎没什么区别了，也许细心的你会在某一个时刻发现一、两个象素的差别，但那已经很完美了，不需要你通过调整大片的CSS来控制它们的显示了，你愿意，你可以仅仅兼容一两个地方，而且通常这种兼容可以适应各种地方，不需要你重复在不同的地方调试不同的兼容方式–减轻你的烦。你可以ul.class1, ul.class2, ul.class3 {xxx:xxxx}的方式方便的整理出你要兼容的地方，而统一兼容。尝试一下吧，再也不要乱嵌套了，虽然在Div+CSS的方式下你几乎可以想怎么嵌套就怎么嵌套，但是按照上面的规律你将轻松很多，从而事半功倍！

W3C 验证失败的常见原因

admin — Mon, 28 Sep 2009 09:15:17 +0000

本文开始前介绍一些使用W3C验证程序时需要注意的问题。
　　不要担心验证程序的警告——如果验证程序说发现12处错误以及83处警告，不要理它，继续进行下一步。

　　一次更正一个错误——按顺序进展工作，从上到下，一次修正一个错误。HTML用浏览器从上到下浏览，这些错误也是按同样顺序显示。

每次修正代码后要刷新代码，使它们重新生效——一个小错误常常会引发之后整页的连串错误。因此如果操作不当，“修正错误”也可能引发更多错误。每次修正后使代码重新生效，这样就可以确保完全解决问题。

　　知道了上面这些基本的异常情况，下面我们就来看看版面设计无效的几个原因。

1、div 标签未关闭

　　这是版面设计失效的最常见原因之一。当我们了解到这是多少精致的版块设计失效的罪魁祸首时，总会大吃一惊。开启的div标签是最普遍的版块设计失误之一，也是最难诊断的失误之一。验证程序有时会指向错误的开启div标签，诊断时就像大海捞针一样麻烦。

2、麻烦的embed标签

　　九十年代早期，Microsoft和Netscape的浏览器开始能够辨认非标准的独有字体。遗憾的是这意味着W3C验证程序还不能识别某些关键HTML 标签，如“embed”，即使这些标签已经被广泛使用。如果确实希望得到严格的DOCTYPE（文档类型）验证，就只能放弃嵌套。

如果同时想要生效的版面设计和嵌入式媒体，可以试试Flash Satay方法。

3、不当的DOCTYPE声明

　　不声明DOCTYPE，或者在文件开始错误声明DOCTYPE，也是一个常见错误。根据一般经验，Strict DOCTYPE是大家追求的最高级验证。Strict validation表明你的网页能够在所有浏览器上都得到最佳展示。Strict 声明代码如下：

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
4、结尾斜线

　　如果你的网站不能验证，很有可能是在代码的某个地方漏写了结尾斜线。我们很容易忽略结尾斜线之类的东西，特别是在image标签等元素中。例如：

在严格的DOCTYPE中这是无效的。要在img标签结尾处加上“/”以解决此问题。

5、Align标签

　　如果DOCTYPE被设为Transitional，你就会使用“align”标签，但如果要求更高一点希望得到Strict验证，你会看到很多错误。 Align是另一个不可用于版面设计的标签。可以尝试用“float”或者“text-align”来代替align转换元素。

6、JavaScript

　　如果已经声明Strict DOCTYPE，就需要在JavaScript中覆盖CDATA标签。验证程序的这一方面难倒了很多程序员，因为网站倾向于为广告和追踪脚本使用嵌入的 JavaScript。如果必须用到JavaScript，可以在其前后加上如下标签：

7、图像需要“alt”属性

　　你可能还没有注意到，图像也是高级验证的潜在绊脚石。除了结尾斜线，高级验证也要求用alt标签来描述图像，如alt= ”Scary vampire picture”。

　　搜索引擎也靠alt标签来识别网页上的图像，所以无论怎样加上alt标签总是好的。

8、未知实体数据

　　实体数据是又一个影响验证的易犯错误。我们可以考虑用适当的编码字符来代替“&”等符号。entire list中列出在XHTML版块设计中可用的适当的编码字符实体数据。

9、不良嵌套

　　嵌套就是元素里又包括元素，如下所示：

Sweet!

　　我们容易混淆嵌套元素的顺序。例如在div标签前启动strong标签，但又先关闭div标签。这可能不会改变版块布局，但却会使你的版块设计失效。

10、缺少“title”标签

　　尽管这看上去是一个很明显的错误，很多程序员（包括我自己）还是经常会在“head”版块中遗漏title标签。当你看到“missing a required sub-element of HEAD”（缺少HEAD的必要子元素）时，才会发现自己忘记添加title标签了

5种方法立刻写出更好的CSS代码

admin — Mon, 28 Sep 2009 09:12:00 +0000

每个人都可以编写CSS代码，甚至你现在已经让它为你的项目工作了。但是CSS还可以更好吗？开始用这5个Tips改进你的CSS吧！
1.重置
首先，很认真的告诉你，总是要重置某些分类。无论你是使用 Eric Meyer Reset、YUI Reset

或者你自己编写的重置代码，只要使用就对了。

它能很简单的移除所有元素的填充（padding）和边距（margin）：

html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
pre, form, fieldset, table, th, td { margin: 0; padding: 0; }

Eric Meyer Reset和YUI Reset都是非常强大的，但是对于我而言，它们走的太远了。我觉得你最终需要重置一切，然后重新定义所有元素的属性。这就是为什么Eric Meyer推荐更有效的使用（重置样式表），而你不要只是使用他的重置样式表，将它拖放到你的项目中。调整它（的重置样式表），建立属于自己的重置样式表。

噢，请停止使用：

* { margin: 0; padding: 0; }

花更多的时间去制作它，当你移除了填充（padding）你认为单选按钮会发生什么变化？表单元素有时能够做些时髦的事情，所以最有效的方式就是将他们独立。

2.排序
一个小的测试
这个例子就是要让你思考如何更快的找到右边距属性？

Example#1

div#header h1 {
z-index: 101;
color: #000;
position: relative;
line-height: 24px;
margin-right: 48px;
border-bottom: 1px solid #dedede;
font-size: 18px;
}

Example#2

div#header h1 { border-bottom: 1px solid #dedede; color: #000; font-size: 18px; line-height: 24px; margin-right: 48px; position: relative; z-index: 101;}你不能告诉我Example#2不能更快的找到右边距属性。根据字母排序你的元素属性。一致的创建你的CSS，将帮助你节省花费在寻找一个特殊属性的时间。

我知道一些人用这样的方法去组织代码，其他人又用另一种方法去组织，但是在我的公司，我们协商一致做出决定，所有的代码都将按照字母排序来组织。通过这样组织代码与其他人协同工作一定是有帮助的。当我碰到属性没有按照字母排序的层叠样式表我每一次都会退缩。

3.组织
你应该组织你的样式表以致相关的内容靠在一起，更简单的找到想要的。使用更有效的注解。举个例子，这是我如何构造我的层叠样式表：

/*****Reset*****/移除元素的填充（padding）和边距（margin）。/*****Basic Elements*****/定义基本元素的样式: body, h1-h6, ul, ol, a, p, 等./*****Generic Classes*****/定义简单的风格，好像浮动的某一侧, 移除元素的下边距, 等当然，它们大部分都与我们希望的语义不相关,但是它们是高效处理代码所必须的。/*****Basic Layout*****/定义基本的模板: header, footer等. 帮助定义网页布局的基本元素/*****Header*****/定义所有Hearder元素/*****Content*****/定义所有内容框内的元素/*****Footer*****/定义所有Footer的元素/*****Etc*****/定义其他的选择器。通过注解和归类相似元素的分组，将更快的找到你想要的。

4.一致性
无论你决定使用什么方式去编写代码，保持一致。我已经对全部放在1行VS多行的CSS编写编写方式的争论感到乏味和疲倦。这是不需要争辩的。每个人都有自己的观点，所以选择一种你喜欢的工作方式，并在所有的样式表中保持一致。

就我个人而言，我将使用两者结合的方式。如果一个选择器超过了3个属性，我将截断它采用多行的方式编写。

div#header { float: left; width: 100%; }
div#header div.column {
border-right: 1px solid #ccc;
float: rightright;
margin-right: 50px;
padding: 10px;
width: 300px;
}
div#header h1 { float: left; position: relative; width: 250px; }

所以找到你喜欢的工作方式然后保持一致。

5.从正确的地方开始
在完成标记语言之前不要去尝试靠近你的样式表。

当我准备分割一张网页的时候，创建CSS文件之前，我需要预览并且标记body开标签到body的闭合标签之间的所有文档。我不会增加额外的DIV ,ID,或者类选择器。我将会添加一些一般的DIV，就好像hearder、content、footer.因为我知道这些东西是现实存在的。

通过先标记文档，你将不会碰到本已注定的divities1和classitis2麻烦!/*You only need to add in that stuff once you have begun to write the CSS and realize that you are going to need another hook to accomplish what you are trying to achieve.*/(原文未译）。

利用CSS子选择器指定子元素；不要只是机械的给元素添加类或者ID选择器。记住：没有一个良好的格式化文档（或者标记结构）CSS是无价值的。

总结
这些Tips能够帮助我更好的完成CSS代码的编写。但是这并不意味着这张列表的结束，接下来我将会去带来一些其他的与大家分享。

Google Analytics高级群体功能使用方法

admin — Fri, 18 Sep 2009 03:28:12 +0000

因客户要求需要查看具体产品从各省市访问的人数，或查看上海地区有多少人访问了该主品页面。要出这样的一个报告当然原有的 Google analytics 一般功能也可以实现的，不过analytics还有一个高级群体测试版本。通过这个高级群体可以生成更加复杂的报告。下面简单的说一下使用方法.

其实高级群体的定义方法很简单。通过 OR 和AND 指令和拖动功能就能实现。

1.访问Google Analytics帐户，在控制台的设置中进入“高级群体”管理选项。

2.点击右上方的“创建新的自定义群体”（如果尚未创建过自定义群体，最下方也有创建的链接）

3.从左侧的列表视图中维度的访问者选取“访问者类型”选项卡，并拖动到右侧的“维度或指标”虚线框内，条件选择“完全匹配”，值选择为“Returning Visitor”；同时添加and语句，将“市县”拖动到“维度或指标”虚线框内，条件选择“完全匹配”，值选择为“Beijing”。可以点击右上方的测试群体细分，来获知以上条件下网站的访问次数为多少。

4.给该群体命名为：“北京回访者”后，创建群体。

5.回到“管理高级群体”，将自定义群体的“北京回访者”应用到报告

现在再查看报告，就已经帮我们把群体筛选好了，赶快试试吧。

CSS Reset的应用

admin — Thu, 10 Sep 2009 01:57:59 +0000

知道CSS Reset是什么吗？通常情况下，它也被写成Reset CSS，即重设浏览器的样式。在各种浏览器中，都会对CSS的选择器默认一些数值，譬如当h1没有被设置数值时，显示一定大小。但并不是所有的浏览器都使用一样的数值，所以，有了CSS Reset，以让网页的样式在各浏览器中表现一致。

正在使用CSS的你，用过CSS Reset吗？当然，或许你用了，却不知道正在用，比如你可能用到：

* { padding: 0; margin: 0; border: 0; }

这也是一款CSS Reset的方法，让所有的选择器的padding、margin和border都设置成0。这是一种强大的方法，也是最简单，最安全的方法，不过，也是最占用资源的方法。对于小型的网站来说，用这个并不会带来大的资源浪费，但如果是像Yahoo这种架构非常大的网站，刚需要有选择地进行CSS重设，以减少资源浪费。下面是Yahoo的CSS重设代码，也是受最多人喜爱的CSS Reset方法，YUI选择的方法是：

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
padding: 0;
margin: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset,img {
border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-weight: normal;
font-style: normal;
}
ol,ul {
list-style: none;
}
caption,th {
text-align: left;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
font-size: 100%;
}
q:before,q:after {
content:”;
}
abbr,acronym { border: 0;
}
OK，相信你也已经了解了CSS重设的目的，或许你也可以根据自己的喜好，写一个自己的CSS重设系统，毕竟大家的需求和习惯的不同的。而你可以参照下面的几款：

Ateneu Popular CSS Reset
html, body, div, span, applet, object, iframe, h1, h2, h3,
h4, h5, h6, p, blockquote, pre, a, abbr, acronym,
address, big, cite, code, del, dfn, em, font, img, ins,
kbd, q, s, samp, small, strike, strong, sub, sup, tt,
var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
:focus { outline: 0;}
a, a:link, a:visited, a:hover, a:active{text-decoration:none}
table { border-collapse: separate;border-spacing: 0;}
th, td {text-align: left; font-weight: normal;}
img, iframe {border: none; text-decoration:none;}
ol, ul {list-style: none;}
input, textarea, select, button {font-size: 100%;font-family: inherit;}
select {margin: inherit;}
hr {margin: 0;padding: 0;border: 0;color: #000;background-color: #000;height: 1px}

Chris Poteet’s Reset CSS
* {
vertical-align: baseline;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border: none;
padding: 0;
margin: 0;
}
body {
padding: 5px;
}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl {
margin: 20px 0;
}
li, dd, blockquote {
margin-left: 40px;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

Eric Meyer Reset CSS
html, body, div, span, applet, object, iframe, table, caption,
tbody, tfoot, thead, tr, th, td, del, dfn, em, font, img, ins,
kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,
acronym, address, big, cite, code, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend {
vertical-align: baseline;
font-family: inherit;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
outline: 0;
padding: 0;
margin: 0;
border: 0;
}
:focus {
outline: 0;
}
body {
background: white;
line-height: 1;
color: black;
}
ol, ul {
list-style: none;
}
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
font-weight: normal;
text-align: left;
}
blockquote:before, blockquote:after, q:before, q:after {
content: “”;
}
blockquote, q {
quotes: “” “”;
}
Tantek Celik Reset CSS
:link,:visited { text-decoration:none }
ul,ol { list-style:none }
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
{ margin:0; padding:0 }
a img,:link img,:visited img { border:none }
address { font-style:normal }
Christian Montoya Reset CSS
html, body, form, fieldset {
margin: 0;
padding: 0;
font: 100%/120% Verdana, Arial, Helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6, p, pre,
blockquote, ul, ol, dl, address {
margin: 1em 0;
padding: 0;
}
li, dd, blockquote {
margin-left: 1em;
}
form label {
cursor: pointer;
}
fieldset {
border: none;
}
input, select, textarea {
font-size: 100%;
font-family: inherit;
}
Rudeworks Reset CSS
* {
margin: 0;
padding: 0;
border: none;
}
html {
font: 62.5% “Lucida Grande”, Lucida, Verdana, sans-serif;
text-shadow: #000 0px 0px 0px;
}
ul {
list-style: none;
list-style-type: none;
}
h1, h2, h3, h4, h5, h6, p, pre,
blockquote, ul, ol, dl, address {
font-weight: normal;
margin: 0 0 1em 0;
}
cite, em, dfn {
font-style: italic;
}
sup {
position: relative;
bottom: 0.3em;
vertical-align: baseline;
}
sub {
position: relative;
bottom: -0.2em;
vertical-align: baseline;
}
li, dd, blockquote {
margin-left: 1em;
}
code, kbd, samp, pre, tt, var, input[type='text'], textarea {
font-size: 100%;
font-family: monaco, “Lucida Console”, courier, mono-space;
}
del {
text-decoration: line-through;
}
ins, dfn {
border-bottom: 1px solid #ccc;
}
small, sup, sub {
font-size: 85%;
}
abbr, acronym {
text-transform: uppercase;
font-size: 85%;
letter-spacing: .1em;
border-bottom-style: dotted;
border-bottom-width: 1px;
}
a abbr, a acronym {
border: none;
}
sup {
vertical-align: super;
}
sub {
vertical-align: sub;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.8em;
}
h3 {
font-size: 1.6em;
}
h4 {
font-size: 1.4em;
}
h5 {
font-size: 1.2em;
}
h6 {
font-size: 1em;
}
a, a:link, a:visited, a:hover, a:active {
outline: 0;
text-decoration: none;
}
a img {
border: none;
text-decoration: none;
}
img {
border: none;
text-decoration: none;
}
label, button {
cursor: pointer;
}
input:focus, select:focus, textarea:focus {
background-color: #FFF;
}
fieldset {
border: none;
}
.clear {
clear: both;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
body {
text-align: center;
}
#wrapper {
margin: 0 auto;
text-align: left;
}
Anieto2K Reset CSS
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big,
cite, code, del, dfn, em, font, img,
ins, kbd, q, s, samp, small, strike,
strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
center, u, b, i {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: normal;
font-style: normal;
font-size: 100%;
font-family: inherit;
vertical-align: baseline
}
body {
line-height: 1
}
:focus {
outline: 0
}
ol, ul {
list-style: none
}
table {
border-collapse: collapse;
border-spacing: 0
}
blockquote:before, blockquote:after, q:before, q:after {
content: “”
}
blockquote, q {
quotes: “” “”
}
input, textarea {
margin: 0;
padding: 0
}
hr {
margin: 0;
padding: 0;
border: 0;
color: #000;
background-color: #000;
height: 1px
}

CSSLab CSS Reset
html, body, div, span, applet, object, iframe, h1, h2, h3,
h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address,
big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot,
thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
:focus {
outline: 0;
}
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
a img, iframe {
border: none;
}
ol, ul {
list-style: none;
}
input, textarea, select, button {
font-size: 100%;
font-family: inherit;
}
select {
margin: inherit;
}
/* Fixes incorrect placement of numbers in ol’s in IE6/7 */
ol { margin-left:2em; }
/* == clearfix == */
.clearfix:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}
像你看到的，这些都大同小异，需求不同，方法也就不同。我自己偏向于喜欢Yahoo的CSS Reset，也用了Yahoo的代码。你，有自己的CSS Reset体系吗？或许可以分享出来！

CSS隔行换色

admin — Wed, 09 Sep 2009 07:42:28 +0000

在网站制作过程中我们会经常遇到表格处理数据，当然要想做的好看点就要运用到CSS隔行换色了。这相表格才会看上去不那么呆板。

选中表格行变色标记效果 by okajax.com

接入方式	上网时间	下网时间	上网时长
上海SEO　　当前页：第1页共2页　　总次数：66　　总时长：284小时36分27秒
宽带接入	2008-4-23　12:40:18	2008-4-23　14:50:28	2小时10分10秒
宽带接入	2008-4-23　12:40:18	2008-4-23　14:50:28	2小时10分10秒
宽带接入	2008-4-23　12:40:18	2008-4-23　14:50:28	2小时10分10秒
宽带接入	2008-4-23　12:40:18	2008-4-23　14:50:28	2小时10分10秒
宽带接入	2008-4-23　12:40:18	2008-4-23　14:50:28	2小时10分10秒
宽带接入	2008-4-23　12:40:18	2008-4-23　14:50:28	2小时10分10秒

CSS hack

admin — Mon, 03 Aug 2009 07:45:35 +0000

提出了“CSS hack 用CSS条件注释实现”观点。我们一并看看他的感受。开始我写的DIV结构，CSS代码，感觉还很流畅，很清晰，注释说明也写得很详细。对着Firefox三张页面的初稿完成，我发现CSS文件才7KB，自己明显地进步了不少。然后我开始在IE7 IE6下作兼容性调试，那个痛苦哇！页面没有大的差错，不外乎就是页面因为宽度问题，被挤扁了，但是小小的问题，一修正起来，要写一大段代码，有些还得修改DIV结构。靠！折腾了一天，CSS文件臃肿到了17KB。IE真不是人造的。
我这次做浏览器兼容性调试不再是使用我上次介绍的CSS HACK技术，而是新学了一招：CSS条件注释。我看到不少博客都在力荐这个方式，所以试水一下。

说明：以上例子中，第一条是给FF看的，下面的if IE 6 if IE 7判断语句是个IE6 IE7看的。这个顺序不能随便换，因为浏览器也是从上至下解释的，后面的效果覆盖前面的。然后再在IE6 IE7单独的样式文件中针对性地写代码。
　　实际上，CSS条件注释和CSS hack本质上一样，只是表现形式不同而已。条件注释把HACK代码写在了独立的CSS文件中而已。这样的优点是：CSS代码可读性强些了，更加清晰了，没有杂乱的HACK符号。缺点是：在IE6 7 单独的CSS文件中写的语句，支离破碎，以后要想修改，维护起来特别麻烦。如果你的ID CLASS命名比较规范，比较语义化，那还好点。
　　总结：如果你的XHTML页面体积小，就用一般的CSS HACK方法，直接写在一个样式文件里吧。页面大了再考虑CSS条件注释。