加个float:left，似乎就好了。

近期，老见到一些人在群里或私聊问之：“有没有xxx浏览器啊？帮我看下我的网站有没有错位。”好吧，由于我懒得打开你所说的浏览器并复制你的网址到上面，再查看页面是否错位，所以，我希望你能备下如下浏览器：

IE：IE几都行，自己记得就是；这个随系统装的，就不付下载地址了。

FireFox：火狐，官网和下载地址 http://www.mozillaonline.com/，装好后用firefox打开http://addons.sociz.com/firefox/531/这个，安装firebug。

Chrome：谷歌浏览器，官网和下载地址 http://www.google.com/chrome。

Opera：可以在电脑上浏览wap网址的，官网和下载地址 http://www.opera.com/。

Safair：苹果产的浏览器，也可以在win上运行，官网和下载地址 http://www.apple.com/safari/（安装有中文）。

IE test：可以基本模拟ie6、ie7、ie8的网站效果，以查看是否错位和兼容。有人说不好用，但我还没找到其它的。兼容win7，官网和下载地址 http://www.my-debugbar.com/wiki/IETester/HomePage （安装后有中文）。

若一个网站，能兼容以上全部浏览器，就足够了。

模板 template：

模板，自网络网站伊始，网上就有传“网站模板”，到现在还会有诸多人问“谁有一个茶叶站的网站模板啊？分享下，我想做个网站”之类的问题。而在系列免费程序（blog、cms、shop、wiki、……）已经日臻完善的今天，这个模板，多还是以table且不兼容诸多浏览器的模板，也依然“生机勃勃”。

而据我了解，模板分两种，一种为带网站程序和后台的模板，也就是如上一段所说的模板；另一种可以理解为一个“系列”，比如MSN的界面就被用在了诸多程序上，包括并不限于zblog、wordpress、pjblog、dedecms、帝国cms、discuz、phpwind等。它们的界面可能都一样，图片素材都是用的msn的，css可能也差不多，但，所基于的程序是完全不同的。

模板，一种设计，一种风格，可在不同的程序和应用上显现。

主题 theme：

wordpress官方中文版的后台，写的就是“主题”。主题是可以含有功能的，如各种效果、插件；inove就是一个wordpress里使用者较多的一个主题，其界面被修改成了诸多版本，但依然脱不出这个主题的功能体系。无论外观界面、图片、颜色怎么变，它的主题功能都是具备的和一般不会怎么改变的。

摇曳铃丹 YYLD.net 当前使用的主题，一样含有一些功能，如ajax效果、防spam等（具体可见http://yyld.net/507/）。若想仿制，一般只能仿出“皮肤”这个“形”，而主题内的功能，想仿是极难的。往往具备主题制作能力的人，也不会再选择免费去仿一些站来打造自己的“招牌”，他们会寻找更实际的“网站定制”来赚钱。

博客里，我所认识的，wordpress的主题功能是最强的，以php文件作为模板文件，主题可以实现诸多插件功能；不过也因此容易被邪恶利用，在主题里嵌入木马等。另一个zblog也举报少量的主题功能（主题可附带主题插件），但局限性还是较大，其文件也相比wordpress要多。

至于主题和模板，在zblog的命名方式里可以看到另一种：主题都在theme文件夹里，而每个主题的html文件都放在template里作为xhtml方面修改和标签调用。可是一种诠释的体现。

皮肤 skin：

博客圈里，我所认识的最大的以皮肤为代表的是pjblog，其官方默认的界面相关文件，只有css和图片，其它文件都是所不建议修改的（容易引发错误，造成程序奔溃；修改后升级博客版本时候可能会造成不兼容）。因此，pjblog的界面布局基本是固定的，多为左右两栏，熟悉css的可以在此基础上改成3栏或底部放侧栏内容模式。

早期pjblog的各种布局都是只用css实现，而近年，流行起了改其它文件（源文件、asp文件）来实现3栏或其它布局模式，不好说是不是css水平的退化，倒是这样修改，不兼容和易错问题无疑是增多的。而且不是人人都懂，出错了，就把原因怪在了程序的头上。

皮肤，也就是css样式和图片组合起来的界面效果；主题可以一样（功能一样），皮肤可以不一样（界面外貌不一样）。

主题里可包含无数的皮肤，皮肤可以在无数的不同主题上展现；模板，只是一种界面风格的统称，无论它是否含有后台和数据库；模板亦可作为统称：wp模板里的yyld.net主题——似乎越说越绕了。

PS，看来我以前发布的老久皮肤、主题的说法也该改下了。

1、换域名后的定向

作用：在换域名后，如 old.com 变成了 new.com，以前的域名不想要了，但域名还没过期（若域名已过期或不再解析到此站，那么该设定无效），解析绑定都还在。那么可以用以下代码来处理，当打开 old.com 后会自动转为 new.com。

[ISAPI_Rewrite]
RewriteEngine On
# 3600 = 1 hour 设置缓存时间为3600秒.
CacheClockRate 3600
# 设置正则表达式替换变量个数为32.
RewriteCond Host: ^www\.old\.com$
RewriteRule (.*) http\://new\.com$1 [I,RP]
RewriteCond Host: ^old\.com$
RewriteRule (.*) http\://new\.com$1 [I,RP]

2、把www.yyld.net转为yyld.net

RewriteCond %{HTTP_HOST} ^www\.yyld\.net$ [NC]
RewriteRule ^(.*)$ http://yyld.net/$1 [R=301,L]

3、把yyld.net转为www.yyld.net（上面那个倒过来嘛）

RewriteCond %{HTTP_HOST} ^yyld\.net [NC]
RewriteRule ^(.*)$ http://www.yyld.net/$1 [R=301,L]

个人建的网站——个人网站，顾名思义，一个人自己投资买空间买域名，自己折腾点程序技术，建一个网站，啥内容不管，反正是以个人名义建的。

个人站，也是个人建的网站，但内容仅限这个人，这个站长自己的言辞、自己对社会或对生活或对技术的点滴唠叨、自己的喜好，而不是采集或单纯复制粘帖或网店或伪原创或频繁故意的炒作或论坛——这些内容都不是这个人自己的思想。以此定义，个人站，展现自我价值的网站，确实不多。有很多所谓知名的草根博客，早已脱离个人站的定义，成了单纯的为了钱和流量而写文章的软文站了。

回过头想国家政策，铃丹估计，关掉评论交互的个人站，只要不要那么激动，只谈生活和技术，可以说是非常安全的。只是有太多的个人建的网站，或因自己或因管理（论坛），触及了种种内容，而导致被关站或去了国外……

好在，我还有个不错的个人站的站长圈子，得以消遣和交流。

维基百科（http://zh.wikipedia.org/zh-cn/顶级域）说：顶级域(TLD)是域名的最后一个部份，即是域名最后一点之后的字母。例如在 wikipedia.org这和域名中，顶级域是org(或ORG)，大小写视为相同——这是俗称的“域名后缀”（http://www.hudong.com/wiki/世界各国域名后缀）。

互动百科（http://www.hudong.com/wiki/顶级域名）说：顶级域名即是一级域名，其域名中只含有一个“.”，例如“baidu.com ”。在专业定义中“www.baidu.com ”属于二级域名。

.cn域名的注册局CNNIC把.cn按国家规定划分六类二级域名，后缀为：.com.cn、.net.cn、.org.cn、.gov.cn、.edu.cn等。万网的net.cn属于.cn后缀的顶级域名，据说其和CNNIC有协议，不能使用二级域名，否则和买的.net.cn域名冲突。

综以上资料，应该可以确定：以yyld.net为例，.net为顶级域，yyld.net为顶级域名，www.yyld.net为二级域名。yy.hi.cn为二级域名，所以，其再短从域名上看也没几个价值。

现在在网上，发现“不懂就问”的人似乎挺多，而且似乎都有些养成了“我是菜鸟，我是新手，我不懂就问”的“光荣”心态。为何要加引号呢？在百度知道或搜搜问问上逛过的朋友就知道，在那上面，有很多可以让自己“五体投地”的问题：提这些问题，一方面可能本来就知识面窄得无法形容，另一方面，就是根本没有自己动脑，就直接问了。这个世界，一直不缺乏不喜欢自己动手的懒虫……

以前有段时间，会想，如何学会问问题，直到某天才顿悟，学会问问题不是学习的关键，会思考、会动手才是关键。否则，告诉懒虫解决问题的思路或关键，他也会不知足的继续讨要着更详细的答案或已经完成的成品。

不怕不知道，就怕是个懒虫；当懒虫也行，拿钱来。

QQREADERE7A8A99DA4843E84

现在，网上也流传这很多诸如“会打字就会建站”、“一键建站”的东西，其实绝大部分都是忽悠，其状态和百度空间、新浪博客差不多，不同是功能和界面，还有或许可以让你绑定域名。但其实基本是严重寄人篱下，数据并不在自己手中掌控，一旦卖这个服务的死了，自己的站也就死了——对博客来说，这还不如用新浪博客呢。

想会做网站，需要了解以下概念：空间、域名、FTP、独立建站程序、模板和网站的区别。

若拿建网站和租个临街商铺做生意来比较：空间就是租的店铺、域名就是档位号、独立建站程序是内部装修构架——卖衣服的店子和卖化妆品的店子的装修是不一样的。

现在的做网站，最大的方便是有“独立建站程序”。问这个东西是什么？就是已经帮你开发好的各种程序，比如论坛常用的discuz，网店常用的ecshop；这些程序一般都是免费的，直接从相关网站下载，用FTP传到自己的空间里，按照程序官方提供的安装说明，安装好，登录程序后台进行相关设置，就可以用了——熟练的话，只要10分钟，你就有了一个博客或论坛或网店或资讯站等等等等。至于这些程序在哪这里就不说了——这样的程序太多了；至于这些程序具体怎么用，请先参考相关程序官方的教程和去他们的论坛进行交流吧。（在QQ群47215577的群论坛有这些程序的汇集，不加群也可访问）

我想，大部分想做网站的朋友都是希望网站能随自己所欲，而随自己所欲的第一步就是需要一个虚拟主机（空间），并且有相关管理权限和FTP权限。若是没有空间，只在自己电脑上折腾，那么谁能看到你的网站呢？所以，买空间或找人做网站由对方提供空间的时候，第一步就是要确定自己的权限（诸如后台看到空间大小、默认首页设置、FTP密码修改等等），以保证自己能通过FTP和数据库管理拿到全部网站数据才好，这也才能把整个网站掌控在自己的手心里。

随自己所欲的第二步会安装免费的独立建站程序和相关程序的模板：模板，也就是界面，是一个网站的衣服；没有模板的网站，只有黑色、白色和链接默认的蓝色、紫色。一般免费程序已经自带一套默认模板，而其官方网站或论坛会提供很多免费模板，这些在自己要求不高的情况下就已经基本够用了。

若想要独一无二的模板或网站，除了花钱定制外，就是自己学了。至于做模板只需要会XHTML即可，这个入门并不难；而网站程序，如果你不是非常闲或者非常有信心学好并想靠它吃饭的话，那建议就别学了，没必要浪费时间；一般的免费程序已经够用了。

如果只是用独立建站程序做网站，那就不需要啥工具，比如dreamwear之类。事实证明，很多啥代码都不会的，dw也不会的，都能把网站做的风生水起——自己做，不求人的——所以，对一般人或大部分人来说，做网站，不需要会那么多东西。除非想跟进一步：但若连空间、程序这类概念都没，就去追求asp、php，那和还不会走路就学跑步的区别不太大。

至于dreamwear，我并不是说它不好，但在我认为，它并不适合初学者：无论初学XHTML或asp或php。过度的沉迷于dw的可视化和各种效果按钮，只看结果不知其所以然，遇到问题也不会解决，离开了dw就变得啥都不会，甚至连个链接代码都不会写，那么，说的不好听，学了等于没学。DW更合适工作时候用来加快工作效率用。

1、搜索结果里的标题和内容重复：标题一般都没有得到很好的定义和优化，大部分的标题都是重复的；

2、关键词叠加：并没有根据自己的公司或网站主题来定义关键词，只是一味得凑热门关键词的热闹，结果弄个两头空，甚至连自己的品牌或公司名字都排不到前面；

3、描述定死：有些网站知道要加描述（meta里的description信息），但和关键词一样不知道怎么加。往往一加，每个页面都是这个描述，效果是适得其反的。描述就是页面描述，是对当前这个页面的内容进行的简短介绍，而不是重复一段公司介绍或其它。

4、反向链接：并不知道如何更好的处理好这块，极少找同类网站进行一些主动的链接行为；而颇为依赖一些所谓推广，这类推广喜欢做的是把你的公司网址放在群发工具里，发向各个博客或论坛，然后被相关管理员删除。这类链接，即便留下，权重也低（非首页），而且会给人造成反感（这公司咋这样呢？）

5、图片和flash：觉得图片和flash好看，会较大幅度的使用这两块，尤其是flash。而其实flash在菜单上使用对收录是不好的，因为搜索引擎不会访问flash里的链接。而图片，有些做网站的为了方便或简单，把一些链接图片化，这也会造成对收录的不好。当前，flash一般只用在视频或图片广告展示。

6、忽略了没有www的域名：我已经遇到几个企业站，没有www的顶级域名（如本站的 yyld.net）没有进有效的行解析绑定，造成无法访问。

7、只知道百度谷歌的关键词推广：其实网站的宣传推广有很多方法，未必要跻身在关键词推广这个无底洞下。有公司和我说，一旦停止关键词，网站排名就掉下去了；而关键词感觉就是个无底洞……这是不奇怪的，因为基础没打好，一旦少了钱这个激素，效果就会消失殆尽。

翻译：http://www.vfresh.org/w3c/727

（这篇文章主要是整理出来以便于自己使用，所以进行了大量的简化和加入了自己的看法。）

1、终极方法：条件注释

<!--[if lte IE 6]> 这段文字仅显示在 IE6及IE6以下版本。 <![endif]-->

<!--[if gte IE 6]> 这段文字仅显示在 IE6及IE6以上版本。 <![endif]-->

<!--[if gt IE 6]> 这段文字仅显示在 IE6以上版本（不包含IE6）。 <![endif]-->

<!--[if IE 5.5]> 这段文字仅显示在 IE5.5。 <![endif]-->

<!--在 IE6及IE6以下版本中加载css-->

<!--[if lte IE 6]> <link type="text/css" rel="stylesheet" href="css/ie6.css" mce_href="css/ie6.css" /><![endif]-->

缺点是在IE浏览器下可能会增加额外的HTTP请求数。

2、CSS选择器区分

IE6不支持子选择器；先针对IE6使用常规申明CSS选择器，然后再用子选择器针对IE7+及其他浏览器。

/* IE6 专用 */

.content {color:red;}

/* 其他浏览器 */

div>p .content {color:blue;} -->

3、PNG半透明图片的问题

虽然可以通过JS等方式解决，但依然存在载入速度等问题，所以，这个在设计上能避免还是尽量避免为好。以达到网站最大优化。

4、IE6下的圆角

IE6不支持CSS3的圆角属性，性价比最高的解决方法就是用图片圆角来替代，或者放弃IE6的圆角。

5、IE6背景闪烁

如果你给链接、按钮用CSS sprites作为背景，你可能会发现在IE6下会有背景图闪烁的现象。造成这个的原因是由于IE6没有将背景图缓存，每次触发hover的时候都会重新加载，可以用JavaScript设置IE6缓存这些图片：

document.execCommand("BackgroundImageCache",false,true);

6、最小高度

IE6 不支持min-height属性，但它却认为height就是最小高度。解决方法：使用ie6不支持但其余浏览器支持的属性!important。

#container {min-height:200px; height:auto !important; height:200px;}

7、最大高度

//直接使用ID来改变元素的最大高度
var container = document.getElementById('container');
container.style.height = (container.scrollHeight > 199) ? "200px" : "auto";

//写成函数来运行
function setMaxHeight(elementId, height){
var container = document.getElementById(elementId);
container.style.height = (container.scrollHeight > (height - 1)) ? height + "px" : "auto";
}

//函数示例
setMaxHeight('container1', 200);
setMaxHeight('container2', 500);

8、100% 高度

在IE6下，如果要给元素定义100%高度，必须要明确定义它的父级元素的高度，如果你需要给元素定义满屏的高度，就得先给html和body定义height:100%;。

9、最小宽度

同max-height和max-width一样，IE6也不支持min-width。

//直接使用ID来改变元素的最小宽度
var container = document.getElementById('container');
container.style.width = (container.clientWidth < width) ? "500px" : "auto";

//写成函数来运行
function setMinWidth(elementId, width){
var container = document.getElementById(elementId);
container.style.width = (container.clientWidth < width) ? width + "px" : "auto";
}

//函数示例
setMinWidth('container1', 200);
setMinWidth('container2', 500);

10、最大宽度

//直接使用ID来改变元素的最大宽度
var container = document.getElementById(elementId);
container.style.width = (container.clientWidth > (width - 1)) ? width + "px" : "auto";

//写成函数来运行
function setMaxWidth(elementId, width){
var container = document.getElementById(elementId);
container.style.width = (container.clientWidth > (width - 1)) ? width + "px" : "auto";
}

//函数示例
setMaxWidth('container1', 200);
setMaxWidth('container2', 500);

11、双边距Bug

当元素浮动时，IE6会错误的把浮动方向的margin值双倍计算。个人觉得较好解决方法是避免float和margin同时使用。

12、清除浮动

如果你想用div(或其他容器)包裹一个浮动的元素，你会发现必须给div(容器)定义明确的height、width、overflow之中一个属性（除了auto值）才能将浮动元素严实地包裹。

#container {border:1px solid #333; overflow:auto; height:100%;}
#floated1 {float:left; height:300px; width:200px; background:#00F;}
#floated2 {float:right; height:400px; width:200px; background:#F0F;}

更多：http://www.twinsenliang.net/skill/20090413.html

13、浮动层错位

当内容超出外包容器定义的宽度时，在IE6中容器会忽视定义的width值，宽度会错误地随内容宽度增长而增长。

浮动层错位问题在IE6下没有真正让人满意的解决方法，虽然可以使用overflow:hidden;或overflow:scroll;来修正，但hidden容易导致其他一些问题，scroll会破坏设计；JavaScript也没法很好地解决这个问题。所以建议是一定要在布局上避免这个问题发生，使用一个固定的布局或者控制好内容的宽度（给内层加width）。

14、躲猫猫bug

在IE6和IE7下，躲猫猫bug是一个非常恼人的问题。一个撑破了容器的浮动元素，如果在他之后有不浮动的内容，并且有一些定义了:hover的链接，当鼠标移到那些链接上时，在IE6下就会触发躲猫猫。

解决方法很简单：
1.在（那个未浮动的）内容之后添加一个<span style="clear: both;"> </span>
2.触发包含了这些链接的容器的hasLayout，一个简单的方法就是给其定义height:1%;

15、绝对定位元素的1像素间距bug

IE6下的这个错误是由于进位处理误差造成（IE7已修复），当绝对定位元素的父元素高或宽为奇数时，bottom和right会产生错误。唯一的解决办法就是给父元素定义明确的高宽值，但对于液态布局没有完美的解决方法。

16、3像素间距bug

在IE6中，当文本(或无浮动元素)跟在一个浮动的元素之后，文本和这个浮动元素之间会多出3像素的间隔。
给浮动层添加 display:inline 和 -3px 负值margin
给中间的内容层定义 margin-right 以纠正-3px

17、IE下z-index的bug

在IE浏览器中，定位元素的z-index层级是相对于各自的父级容器，所以会导致z-index出现错误的表现。解决方法是给其父级元素定义z-index，有些情况下还需要定义position:relative。

18、Overflow Bug

在IE6/7中，overflow无法正确的隐藏有相对定位position:relative;的子元素。解决方法就是给外包容器.wrap加上position:relative;。

19、横向列表宽度bug

如果你使用float:left;把<li>横向摆列，并且<li>内包含的<a>（或其他）触发了hasLayout，在IE6下就会有错误的表现。解决方法很简单，只需要给<a>定义同样的float:left;即可。

20、列表阶梯bug

列表阶梯bug通常会在给<li>的子元素<a>使用float:left;时触发，我们本意是要做一个横向的列表(通常是导航栏)，但IE却可能呈现出垂直的或者阶梯状。解决办法就是给<li>定义float:left;而非子元素<a>，或者给<li>定义display:inline;也可以解决。

21、垂直列表间隙bug

当我们使用<li> 包含一个块级子元素时，IE6(IE7也有可能)会错误地给每条列表元素（<li>）之间添加空隙。

解决方法：把<a>flaot并且清除float来解决这个问题；另外一个办法就是触发<a>的hasLayout（如定义高宽、使用zoom:1;）；也可以给<li> 定义display:inline;来解决此问题；另外还有一个极有趣的方法，给包含的文本末尾添加一个空格。

22、IE6中的:hover

在IE6中，除了(需要有href属性)才能触发:hover行为，这妨碍了我们实现许多鼠标触碰效果，但还是有一些法子是可以解决它的。最好是不要用:hover来实现重要的功能，仅仅只用它来强化效果。

23、IE6调整窗口大小的 Bug

当把body居中放置，改变IE浏览器大小的时候，任何在body里面的相对定位元素都会固定不动了。解决办法：给body定义position:relative;就行了。

24、文本重复Bug

在IE6中，一些隐藏的元素（如注释、display:none;的元素）被包含在一个浮动元素里，就有可能引发文本重复bug。解决办法：给浮动元素添加display:inline;。