等待喝彩_OnEcho

这篇文章主要讲了CSS对背景图片渲染效率的一些经验和研究：

书写高效的CSS – 漫谈CSS的渲染效率http://www.52css.com/article.asp?id=787

CSS对Web页面载入效率的影响http://www.52css.com/article.asp?id=751

树型结构竖线用样式表（背景图）来实现，样式表背景图片只需要加载一次，而现在这个模式（用多个<img>）图片虽然有缓存机制，但还是有可以每张小图片都请求一次服务器的，所以我想用样式表来实现有多么的好呀，代码又精简，结构又清晰，效果又酷，但是结果我将近一个星期的测试，我这种设想彻底失败，原因就是样式表的渲染效率太差。新的构想没能实现，心情有些沮丧，但我想也应该让大家分享一下这个测试成果。

这里我再解释一下树型里的竖线，树的左边都有 ┌ ├ └ │ 这些竖线图表示树层次，我的1.0版里是用一张张的小图片堆积起来的，而这种使用样式表的是用<div class=”l2″></div> （l是字母L）这种代码来实现的，样式表负责填充背景图。

查看全文>>

使用 line-height 垂直居中

line-height:24px;

使用固定宽度的容器并且需要一行垂直居中时，使用 line-height 即可（高度与父层容器一致），更多的垂直居中总结可以看这里。

清除容器浮动

#main {
overflow:hidden;
}

期前也提到过这样的问题，更多信息可以看这里。

不让链接折行

a {
white-space:nowrap;
}

上面的设定就能避免链接折行，不过个人建议长链接会有相应的这行（有关换行方面的讨论，参看圆心的记录）。

始终让 Firefox 显示滚动条

html {
overflow:-moz-scrollbars-vertical;
}

查看全文>>

CSSdiv网页布局对SEO的影响漫谈

SEO是指搜索引擎优化，主要就是通过对网站的结构、标签、排版等各方面的优化，使搜索引擎更容易抓取网站的内容，并且让网站的各个网页在等搜索引擎中获得较高的评分，从而获得较好的排名。DIVCSS网页布局对SEO有着积极而富有意义的影响。看以下几个方面：

一、精简网页代码

使用DIVCSS布局，页面代码精简，这一点相信对XHTML有所了解的都知道。

代码精简所带来的直接好处有两点：一是提高Spider爬行效率，能在最短的时间内爬完整个页面，这样对收录质量有一定好处；二是由于能高效的爬行，就会受到Spider欢迎，这样对收录数量有很大好处。

二、解决表格的嵌套问题

很多“网站如何推广”的文章中称，搜索引擎一般不抓取三层以上的表格嵌套，这一点一直没有得到搜索引擎相关的官方证实。我的几项实验结果没有完全出来，但根据目前掌握的情况来看，Spider爬行Table布局的页面，遇到多层表格嵌套时，会跳过嵌套的内容或直接放弃整个页面。

使用Table布局，为了达到一定的视觉效果，不得不套用多个表格。如果嵌套的表格中是核心内容，Spider爬行时跳过了这一段没有抓取到页面的核心，这个页面就成了相似页面。网站中过多的相似页面会影响排名及域名信任度。

而DIVCSS布局基本上不会存在这样的问题，从技术角度来说，XHTML在控制样式时也不需要过多的嵌套。

这虽然没有得到确认，但还是建议使用Table布局的朋友们，在设计时尽可能的不要使用多层表格嵌套，SEOer们在文章中说明了这一点，相信他们也不是没有依据。

三、提高访问速度

DIVCSS布局较Table布局减少了页面代码，加载速度得到很大的提高，这在Spider爬行时是非常有利的。过多的页面代码可能造成爬行超时，Spider就会认为这个页面无法访问，影响收录及权重。

另一方面，真正的SEOer不只是为了追求收录、排名，快速的响应速度是提高用户体验度的基础，这对整个搜索引擎优化及营销都是非常有利的。

四、对搜索引擎的排名

基于XTHML标准的DIVCSS布局，一般在设计完成后会尽可能的完善到能通过W3C验证。截止目前没有搜索引擎表示排名规则会倾向于符合W3C标准的网站或页面，但事实证明使用XTHML架构的网站排名状况一般都不错。这一点或许会有争议，但从本人的观点来看，非常有益。

我想，这样的情况可能不是排名规则，最大的可能还是spider爬行网站时，出现以上差异导致收录质量的不同。

建议建站或改版的朋友们，技术许可的情况下，还是选择DIVCSS布局为好。

Firefox是什么就不用说了，地球上的站长都知道，他的浏览器市场占有率仅次于IE，尤其被各大小站长所喜爱。除了大家都熟知的标签显示，定制外观等许多功能外，被站长们喜欢的还有以下两个重要原因，一是Firefox是完全符合W3C标准的，而IE却自成体系，搞自己的一套，导致很多网页只能在IE 下浏览，可怜的站长们为了保证所有用户的正常浏览，不得不在开发时，在IE、Firefox中频繁切换，以求兼容；另一个原因是Firefox提供了大量的各种免费功能插件给用户，用户可以方便获得众多附加功能。

Firefox的插件实在是太多了，今天，我们只讲一下在进行网站的DIV/CSS设计与调试中所使用到的几个插件。

1、 IE Tab 插件

首先就是IETab，这个插件的功能很简单，就是一个在Firefox 的框架下，在IE内核与Firefox内核之间切换的工具，安装完毕以后，就会在Firefox下方的状态栏中出现一个图标，单击这个图标，就可以轻松实现这两个内核的切换，这样，可怜的站长们就不用在两种浏览器中频繁切换来看网页的设计效果了。

2、 Web Developer 插件

其次就是大名鼎鼎的Web Developer，这个工具在这里就不再细讲，他的功能确实太牛了，网上有很多有关他的教程，这里有详细教程：http：//hi.baidu.com/lesliespace/blog/item/88f4b9b596ea80c836d3cab3.html。大家去看就是了。在这里只是简单的说一下他的CSS菜单，在这个菜单中，除了能显示css代码、显示各个元素的样式信息、显示网页的手持式设备显示效果等功能外，最方便的就是它可以在线调试css代码，在界面上可以实时看到调整后的显示效果。调试css代码简直太方便了。

查看全文>>

看过很多网页设计教程文章，但不是说的太高深，对我们实际设计工作并无什么用处，就是东拼西凑的用PHOTOSHOP做几个效果，就是所谓“设计”。最近在网上看到这篇文章，觉得不错，通俗而实际，有利于新手理解和快速上手。转载过来让更多的人看到。

⒈ 网页设计理念

⑴ 内容决定形式

先把内容充实上，再分区块，再定色调，再处理细节。

⑵ 先整体，后局部，最后回归到整体。

全局考虑，把能填上的都填上，占位置。然后定基调，分模块设计。最后调整不满意的几个局部细节。

⑶ 功能决定设计方向

看网站的用途，决定设计思路。商业性的就要突出赢利目的；政府型的就要突出形象和权威性的文章；教育性的，就要突出师资和课程。

⒉ 网页配色基本概念

⑴ 白纸黑字是永远的主题，谁都说不出不好来。

⑵ 网页最常用流行色

兰色——蓝天白云，沉静整洁的颜色。

绿色——绿白相间，雅致而有生气。

橙色——活泼热烈，标准商业色调。

暗红——宁重、严肃、高贵，需要配黑和灰来压制刺激的红色，

⑶ 颜色的忌讳

忌脏——背景与文字内容对比不强烈，灰暗的背景令人沮丧！

忌纯——艳丽的纯色对人的刺激太强烈抗议，缺乏内涵。

忌跳——再好看的颜色，也不能脱离整体。脱离群众是自取其辱！

忌花——要有一种主色贯穿其中，主色并不时面积最大的颜色，而是最重要，最能揭示和反映主题的颜色，就象领导者一样，虽然在人数上居少数，但起决定作用。

忌粉——颜色浅固然显的干净，但如果对比过弱，整得苍白无力了，就象病夫一样无可救药。

蓝色忌纯，绿色忌黄，红色忌艳

⑷ 几种固定搭配

蓝白橙——蓝为主调。白底，蓝标题栏，橙色按钮或ICON做点缀。

绿白兰——绿为主调。白底，绿标题栏，兰色或橙色按钮或ICON做点缀。

橙白红——橙为主调。白底，橙标题栏，暗红或桔红色按钮或ICON做点缀。

暗红黑——暗红主调。黑或灰底，暗红标题栏，文字内容背景为浅灰色。

⒊ 如何快速高效的完成设计工作

天下文章一大抄。

就看你会抄不会抄。抄的是道念，思想，局部精致的点缀。

在网上搜索同类网站，找几个顺眼的，用一个为基本兰图，把几个优点整和成自己的，这样最高效快捷，而且还出成果，能学到很多东西。

作者系 网页设计大本营（code-123.com）站长 感谢投递

原文地址：http://www.code-123.com/html/2008829153022580.html

NAVT Lists 是一个能让你轻松设置导航栏的插件。点击可以下载，下面我们来看看他如何使用，详细很多人安装之后并不能熟练掌握技巧。

下载后安装到 wordpress/wp-content/themes/ 目录下面，在后台插件启用NAVT Lists ,然后在“管理”中找到该插件的设置选项：

查看全文>>

大家都希望自己的网站特别又好看，其实自己设计的东西才是自己最喜欢的，网站也是，我相信大家对基本的代码是掌握的，但离成为一个优秀的网站设计师还有一段距离，不要紧，只要有了好的指引，好网站咱们自己也可以设计。Jacob Gube在自己的博客征求读者的意见，总结了16个优秀网站设计网站。可能大家对于外国人的东西不是很喜欢，但无可否认的是，他们有些东西确实值得咱们学习。
以下是这16个网站的简介，希望对大家有帮助：
1、The Best Designs

查看全文>>

CSS bug是布局中最头疼的问题。我们需要兼顾各种浏览器，以期待获得一致的效果。非常遗憾的是各厂商之间的竞争导致很多问题的存在。而IE6与IE7在很多问题上也存在着很大的差别。在52CSS.com大量的技术文档中，也包含了这方面的内容。轻松的解决CSS bug是我们必须掌握的技能。现在整理出最常用的12种CSS BUG解决方法以及CSS BUG类的小技巧。希望对您的学习、工作有所帮助，如果您依然有疑问，欢迎您到52CSS.com查阅、搜索相关内容。

一、 针对浏览器的选择器

这些选择器在你需要针对某款浏览器进行css设计时将非常有用。

要使用这些选择器,请将它们放在样式之前. 例如:

IE 7 以下

只对IE 7

只对IE 7 和现代浏览器