• 17
  • 九月

背景图片设置对CSS渲染效率的研究

 发布于 11:00:39  |  阅读 608 次 |  评论  

这篇文章主要讲了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)这种代码来实现的,样式表负责填充背景图。

以下为引用的内容:
Example Source Code [www.52css.com]
#www_52css_com .l0{background:url(line0.gif) no-repeat center}
#www_52css_com .l1{background:url(line1.gif) no-repeat center}
#www_52css_com .l2{background:url(line2.gif) no-repeat center}
#www_52css_com .l3{background:url(line3.gif) no-repeat center}
#www_52css_com .l4{background:url(line4.gif) no-repeat center}
#www_52css_com .ll{background:url(line5.gif) no-repeat center}
#www_52css_com .pm0{background:url(plus0.gif) no-repeat center}
#www_52css_com .pm1{background:url(plus1.gif) no-repeat center}
#www_52css_com .pm2{background:url(plus2.gif) no-repeat center}
#www_52css_com .pm3{background:url(plus3.gif) no-repeat center}
#www_52css_com .expand .pm0{background:url(minus0.gif) no-repeat center}
#www_52css_com .expand .pm1{background:url(minus1.gif) no-repeat center}
#www_52css_com .expand .pm2{background:url(minus2.gif) no-repeat center}
#www_52css_com .expand .pm3{background:url(minus3.gif) no-repeat center}


查看全文>>

  • 17
  • 九月

几个经典的css技巧

 发布于 11:00:25  |  阅读 734 次 |  1 条评论  

使用 line-height 垂直居中

line-height:24px;

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

清除容器浮动

#main {
overflow:hidden;
}

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

不让链接折行

a {
white-space:nowrap;
}

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

始终让 Firefox 显示滚动条

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


查看全文>>

  • 17
  • 九月

Div+CSS网页布局对SEO的影响漫谈

 发布于 10:59:02  |  阅读 537 次 |  评论  

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布局为好。