一起CSS

淘宝UED的主题我觉得很不错，想用他的主题，但不好意思问人家要。所以我就“拿”了他的图片，仿着做了这么一个主题。

本主题已经通过CSS2.1标准的验证，在 IE6 、IE7、FF2 中测试通过（其他浏览器未测试）。

为了增强SEO，头部加了meta（虽然效果已不如从前，但比没有好），即网页关键字和描述。你可以添上相应的内容，不添加也没影响。如果觉得不需要也可以删掉。

由于第一次做主题，技术不够成熟，没有把插件集成到主题里，所以为了显示正常，请安装分页插件WP-PageNavi和wordpress中文工具箱。另：如有其他bug或问题，请留言。

主题下载

overflow是一种很好的清除浮动的方法（至少我这么认为），先前发表的《三种有效的清除浮动的方法》里介绍了这种方法，从发表到现在也有一段时间了，这期间在其他地方也看到介绍overflow清除浮动文章，但和《三种有效的清除浮动的方法》里面的不太一样，下面就再说说overflow清除浮动。

以下面的XHTML代码为例：

我以前用的方法是（CSS代码）：

这种方法有效的清除了浮动，但 IE6 里没有效果，所以为了兼容 IE6 ，需要为父元素设了一个宽度，并且是一个合适的宽度。

再一种方法是把 overflow:hidden 换成 overflow:auto ，但 IE6 仍然没有效果，为了兼容 IE6 ，还是要做“手脚”，可以为父元素加上 height:1% 或 zoom:1 ，有人说 height:1% 应该写成 _height:1% ，但我并没有发现不加_符号有什么影响。而 zoom:1 则不能通过W3C验证。

总结一下：清除浮动可以用 overflow:hidden 或 overflow:auto ，在比较标准的浏览器里没有问题，但 IE6 没有效果，为了兼容 IE6 ，可以为父元素：

1、设置一个合适的宽度，但“合适的宽度”有的时候不好掌握；

2、加上 height:1% ，什么都不用管，加上就有效，我还没有发现缺点；

3、加上 zoom:1 ，不能通过W3C验证。

为了兼容 IE6 的这三种方法根据自己的实际情况和个人喜好选择吧。

:hover 是我们在 CSS 设计中最常运用的伪类之一，许多绚丽效果的实现离不开伪类 :hover，比如我们常见的纯 CSS 菜单、相册效果等等。

或许用了这么久的伪类 :hover，还有部分朋友还不完全了解 hover 的规则：

在 CSS1 中此伪类仅可用于 a 对象。且对于无 href 属性（特性）的 a 对象，此伪类不发生作用。

在 CSS2 中此伪类可以应用于任何对象。但目前 IE5.5、IE6 仅支持 CSS1 中的 :hover，不过新出的 IE7 是支持 CSS2 中的 :hover。

当我们用伪类 :hover 做某些特殊效果时，依据 CSS2 很好完成，但为了现在占据主流浏览器的 IE6 ，我们又不得不做很多工作，比如给添加a元素等来模拟完成最终的效果。

或许这样讲太空洞，请看下面一个常见的触发显示的例子（仅选择IE6为例讲解）。

我们先用 CSS2 的写法来实现：

XHTML部分：

CSS部分：

大家可以测试发现在 Firefox 等对 CSS2 支持很好的浏览器中，可以显示我们所要达到的效果，但在 IE6 中却无法实现。

下面让我们换一种思维，所用 CSS1 的写法来看看，这个时候由于无法支持 li 元素 :hover 的使用，我们只好把所有文字包含到 a 中，对 a 使用 :hover ，并且将要显示隐藏的部分放到 span 元素中，首先我们对 XHTML 进行部分调整，调整如下：

XHTML部分：

CSS 中我们将 a 的设置成块级元素，并使 a 的大小和宽度和 li 的相同，并设置 a 为相对位置，用 a 来模拟上例中的 li ；而用 span 来模拟上例中的 a ，设置 span在默认情况下隐藏（display:none;），当 a 被触发时（:hover），则 span 显示（display:block;）

CSS部分：

可我们发现上例中的效果，在 IE6 中依然无法显示，难道我们的代码写错了，可检查来检查去一点错误也没有（不信你找个高高手问问，他们依然会回答你，这代码完全正确），难道是标准中的说明是错的？还是 IE6 浏览器连 CSS1 也不支持？很多疑问从四面八方跑来了……

那到底是什么问题呢？

不是标准说明的错，也不是 IE 浏览器不支持 CSS1，而是 IE 浏览器自身解析的问题，是 IE5.5 和 IE6 中伪类:hover 的 BUG。

那又该如何解决这个问题呢？

这个 BUG 可以通过在链接的属性中增加某些特殊的 CSS 属性声明来消除。

下面我们对上面的第二个例子进行实验，究竟哪些属性可以帮我们来消除这些 BUG。

对 CSS 代码我们增加：

li a:hover {}对其属性我们仅设定 width:100px; 发现在 IE6 中依旧没有变化，我们尝试着更改 width 的 value ，比如使其 width:99px，奇怪的事情发生了，在 IE6 中，隐藏的部分在触发的时候显示出来了。我们再对 li a:hover 的属性仅设定 color 来测试（初始值为 #fff），更改 color 值，发现在 IE6 下却也不能触发显示，奇怪，奇怪，真奇怪……是不是依旧是一头雾水……没关系，继续往下实验，或许归类了我们就能发现规律了！

我们再用其他属性进行设置：width，positon，background，text-decoration，font-size，font-weight，font-family，border，float，display，font-style，margin，padding，text-align，overflow，text-transform，text-indent，z-index，vertical-align。

我们发现除了 text-decoration，color，z-index 不能触发显示（对于不能触发显示的部分，可以还有某些遗漏的属性，欢迎朋友补充）外，其他属性均可以做为消除伪类 :hover BUG 的特定属性。

说明：

对于 dispaly 不可以用本例来测试，可另外写个更简单的例子（去除 ul/li，a和span中的position ）。在实际应用中怿飞不建议改变 display 值来做为特定属性消除此 BUG，而且在某些例子中此属性不一定能消除 BUG。
对于做为特定属性的 border 和 background 中的颜色我们还可用全写和简写来改变，如 #fff 和 #ffffff 在消除 BUG 中解析为 2 个不同的值。

文章转摘自：PlanABC - 怿飞’s Blog

原文地址：http://www.planabc.net/2007/02/15/ie_hover_bug/

对于大型门户，海量信息平台及多模块，多区域化网站，更需要对CSS，XHTML的标准化，符合语意的HTML框架，复用性强的CSS代码，这些才能保障你的网站，具有很好的“地基”。

第一部：关于构建CSS框架我们要实现的目的：

1.实现标准化，具备主流平台适应性的前端实现；
2.快速开发，在站点风格确定后，前端不应该成为整个项目里瓶颈；
3.重构的需求，尽可能的让类和区块样式可重用；
4.分离结构和表现的需求，遵守了语义化结构的约定;
5.构架完全符合金融网特色的CSS框架。
6.对代码进行必要的搜索引擎优化。

第二部：关于CSS命名的一些约定：

1.不使用大写形式的类名和id名;
2.尽可能使用描述性的英文单词的组合作为类名和id名;
3.id名及类名的多个英文单词之间使用“_”短横线分隔;
4.按区域进行描述编号 例：main01_div01_ul01 (可以理解为主体第一区域 第一DIV下的第一个UL)

下来我们要对整个网站及设计稿进行分析，去做符合自己门户结构特色的CSS框架。我们以新浪网为例子进行站点结构分析，整个页面分为：首页，更多页，内容页，专题页，数据中心，新闻中心，频道页，广告……

我们对这些页面进行整理，去发现他们的公共部分：CSS的样式,及区域，模块的碎片。我们需要做的是把这些公有的部分提出来，我们可以把CSS分以下几类：

主体样式表：sjweb.css
font(字体样式，字号，颜色的集合)
layout(框架结构 集合)
global(全局默认样式集合)
component（组成页面部分样式表，模块碎片集合）
这些讲统统的被import到sjweb.css主体样式表里，主体样式表做为一个loader加载新的外来样式，比如广告样式表。

这样这些页面只需要写一点点 属于自己特殊要求的CSS样式代码就可以了。

在构建这个CSS框架的时候有很多细节的东西最好能统一化，比如：行间距，模块之间间隔距离等。

下面是某门户网的首页结构图：

规则：

1.所有area之间，模块之间，间距上下左右为：8 Pixel ;
2.新闻列表颜色#333 ;
3.新闻列表行间距20 pixel；
……等等

调整环境：IE7,ff,IE6,IE5.x,Opera。

PS：其实更多是你在构建的时候细节上的问题，好了不多说了。呵呵。

文章摘自：http://www.sjweb.cn/

开始使用wordpress是的版本是2.5.1，现在已经更新到2.6.2，由于不太懂wordpress，又没有升级过wordpress，在论坛上又看到很多wordpress在升级过程中或升级之后遇到这样那样的问题，所以我迟迟没有升级。

前两天偶然知道Wordpress Automatic Upgrade这个插件，据说是一个可以让wordpress自动升级的插件。我很惊讶，我在怀疑这个插件到底行不行，是不是真的有这么神奇。怀疑归怀疑，为了不麻烦自己，我抱着试试的态度装上了这个插件。装上之后按常规的方法启用插件，可是到设置里却没有看到这个插件。怎么搞的？难道就是这样的？难道它就正在帮我升级了？然而浏览我的wordpress却依然可以访问（如果正在升级，会出现网站正在维护的提示），查看源代码提示版本也仍是2.5.1。继续捣鼓了几下，还是没有任何反应，就没有理它了。

今天登陆wordpress后台，突然发现管理导航下比以前多了一行英文提示，又看到Upgrade这个单词，我就怀疑是Wordpress Automatic Upgrade插件的作用，我点击“Click me”后转到一个英文页面，由于不上很懂英文，所以找了个在线翻译，翻译了几句，知道这确实就是Wordpress Automatic Upgrade开始升级的页面，于是我就开始自动升级起来。为了防止升级过程中出现问题，所以我小心翼翼的进行着。一遇到看不懂的地方就进行翻译。最终，我的wordpress升级成功，整个过程不超过5分钟。

有了这个插件，wordpress升级就不那么麻烦了，太好了。