一起CSS

当前位置:一起CSS

符合web标准的css网站相当于已经做了30%的SEO工作

日期:2008-09-5 分类:CSS

现在的网站都在向web标准进军,大到门户,小到个人博客。这是因为符合web标准的css网站优点多多,这里着重说说符合web标准的css网站对SEO的影响(下面内容转载自互联网)。

CSS DIV设计的网站是按照W3C标准的,如果一个站点完全是CSS+div制作的,那么你网站的SEO(搜索引擎优化)工作已经完成了30%!为什么会这么说?SEO其他方面在哪?好,请接着我的思路往下看:

符合web标准的css网站相当做了30%的SEO工作

1、css div网站遵循“网页结构、表现、行为分离,互不干涉抢功”理念

且不说SEO,其实按照这个理念建设起来的网站,网页打开速度会明显的加快。因为按照这个理念,网页将会分成html、css、js三种类型的文件,而css、js又是可以缓存的,所以浏览一个这样的网页其实就是下载html代码就行了,速度当然变快。

我们先看看SEO都做些什么:

a.网页META标签会添加的比较齐全,如keywords、description、robots;

b.被搜引擎抓取的内容,代码比较精简,非内容代码大大减少,文件小;

c.文本会比较靠前。几乎都在200字内就可以搜索到正文,重要内容;

d.不会出现表格那样多层嵌套的问题。 阅读全文 >

查看:357 评论:没有评论 标签:

CSS中英文双语导航菜单

日期:2008-09-2 分类:CSS

CSS中英文双语导航菜单已经不新鲜了,但下面这种方法我觉得比较有意思,思路比较特别,所以拿出来分享一下:

首先看具体代码:

XHTML代码:

<ul id="nav">
<li><a href="#">Home<span>首 页</span></a></li>
<li><a href="#">About us<span>关于我们</span></a></li>
<li><a href="#">Products<span>产品展示</span></a></li>
<li><a href="#">Services<span>售后服务</span></a></li>
<li><a href="#">Contact<span>联系我们</span></a></li>
</ul>
<div id="navbar"></div>

CSS代码:

* {
margin:0;
padding:0;
}  
#nav{
padding: 10px 10px 0;
font-size: 12px;
font-weight: bold;
font-family:Arial, Helvetica, sans-serif,宋体;
margin: 1em 0 0;
list-style:none;
}
#nav li{
float: left;
margin-right: 1px;
}
#nav li a,#nav li a:hover span{
line-height: 20px;
text-decoration: none;
background: #DDDDDD;
color: #666666;
display: block;
width: 80px;
text-align: center;
overflow:hidden;
}
#nav li a span{
display:none;
}
#nav a:hover{
position: relative;
}
#nav a:hover span{
display:block;
position:absolute;
top: 0;
left: 0;
cursor: pointer;
padding-top:2px;
}
#nav li a:hover,#nav li a:hover span{
color: #FFFFFF;
background: #DC4E1B;
}
#navbar{
background: #DC4E1B;
height: 8px;
overflow: hidden;
clear: both;
}

你可以点击这里查看效果。

查看:590 评论:1

让指定分类的文章在WordPress首页不显示

日期:2008-09-2 分类:WordPress

你有一些文章(比如隐私或广告)不想在Wordpress首页显示吗?如果有的话那你就要用到这个插件了:Front Page Excluded Categories(点击链接即可到官方下载)。 官方的描述是:

A basic plugin that excludes posts in one or more categories from appearing on the front page. This is especially useful if you use an automated posting system, like the del.icio.us bookmark blog posting feature, that updates your blog regularly. In such a case, you can assign these posts to an excluded category so they don't appear on the front page, but do appear in a category page.

意思就是让你指定的一个或多个分类的文章不在首页显示。 使用方法:

  1. 下载,并上传到:wp-content/plugins目录下
  2. 登陆后台,插件-启用
  3. 打开所下载的front_page_excluded_cats.php文件,找到$cats_to_exclude(约第14行),将后面的数字改为你希望不在首页显示的分类的ID,如果有多个的话用英文的逗号割开

保存后在首页就看不到你指定的分类的文章了,不过其他地方还是可以看到的,比如日志分类或直接输入地址又或者搜索,不过我觉得这样已经达到我们的目的了。

需要注意的是:要把该日志的 所有分类(如果有)的 ID 及标签的 ID 都写上,漏了一个都不行。

查看:1,475 评论:6 标签:

CSS Sprites

日期:2008-08-28 分类:CSS

上次写了《图片对网站速度的测试》,只知道这样对网站的性能有提高。今天才知道,原来它有一个名字叫CSS Sprites

CSS Sprites是什么技术呢?就是把网页要用的很多小图片合并成一个图片,从而大大的减少HTTP的连接数,使网站速度更快。

下面简单介绍一下CSS Sprites

CSS Sprites技术不新鲜,早在2005年 CSS Zengarden 的园主 Dave Shea 就在 ALA 发表对该技术的 详细阐述 。原先只在CSS玩家之间作为一种制作方法流传,后来出来个 14 Rules for Faster-Loading Web Sites , 技术人员之间竞相传阅,其中第一条规则Make Fewer HTTP Requests就提到CSS Sprites。于是这个小妖精就火了起来,甚至出现了在线生成工具,势不可挡也。近来国内很多blog都提到CSS Sprites,最著名的例子莫过于 http://www.google.co.kr/  下方的那几个动画。最新发布的YUI中,也是使用到CSS Sprites,几乎都有的CSS装饰图都被一个 40×2000的图 包办。社交大站Facebook最近也使用了一个 22×1150的图片 承担了所有icon.一时间,CSS Sprites无处不在。

优点

我们从前面了解到,CSS Sprites为什么突然跑火,跟能够提升网站性能有关。显而易见,这是它的巨大优点之一。普通制作方式下的大量图片,现在合并成一个图片,大大减少了HTTP的连接数。HTTP连接数对网站的加载性能有重要影响。

缺点

至于可维护性,这是一般双刃剑。可能有人喜欢,有人不喜欢,因为每次的图片改动都得往这个图片删除或添加内容,显得稍微繁琐。而且算图片的位置(尤其是这种上千px的图)也是一件颇为不爽的事情。当然,在性能的口号下,这些都是可以克服的。

总结

性能压倒一切。CSS Sprites是值得推广的一种技术。尤其适宜用于FIR,比如固定大小的icon替换。为保持兼容性,图片中的各个部分保持一定的距离是一种不错的做法。

想更详细的了解CSS Sprites,请点击这里。

不管你怎么想,反正我是爱上了CSS Sprites

查看:500 评论:没有评论

CSS hack区分浏览器(IE6、IE7、FF)

日期:2008-08-27 分类:CSS

由于各个浏览器(这里仅指IE6、IE7、FF)对CSS的解释并非完全相同,导致所写代码网页在各个浏览器中的效果不一样。为了使网页在各个浏览器中显示同样的效果,就需要针对不同的浏览器写不同的CSS code,这就叫CSS hack。

下面针对区分IE6、IE7、FF这三种浏览器举几个常用的简单的CSS hack:

全部浏览器都识别:

h2{
color:#f00;
}

IE系列识别:

h2{
+color:#0f0;
}

仅IE6识别:

h2{
_color:#00f;
}

区分IE6、IE7、FF

h2{
color:#f00;/*所有浏览器识别*/
+color:#0f0;/*IE浏览器识别*/
_colro:#00f;/*仅IE6识别*/
}

所以,h2在FF、IE7、IE6这三个浏览器中的解释为:

FF:#f00

IE7:#0f0

IE6:#00f

要注意书写顺序,不然可不是这样子哦。

当然,我不太赞成用这种通不过验证的CSS hack,本人就极少用。但实在没办法的时候拿来用用还是可以的。

查看:587 评论:1

分类

最新日志

最新评论

存档

链接

  • 亚当学院
  • CSS视频教程下载
  • 前沿视频教室
  • 前端爱好者
  • GoodText
  • Kily`s Blog
  • mymickey
  • 秦丰网站策划
  • 奥想创意
  • 我的职业生涯
  • 蜗爱CSS
  • 蜈蚣's Blog
  • web标准学习—小辉博客
  • 十字花匠

© Copyright 2010 一起CSS All Rights Reserved