一起CSS

当前位置：一起CSS

CSS图像替换技术之Leahy和Langridge的方案

日期：2008-09-6 分类：CSS

以下内容摘自《CSS禅意花园》一书，略有删减。

Seamus Leahy和Stuart Langridge均独立地发现了这种方法。该方法让我们不必再添加那些多余的<span>标签，且在保证屏幕阅读器可以正常阅读文本的同时，也能在页面中隐藏元素中的内容。

HTML代码：

CSS代码：

#header{
padding:25px 0 0 0;
overflow:hidden;
background:url(cola.gif) no-repeat;
height:0;
}

优点：屏幕阅读器可正常访问，没有多余的<span>。

缺点：并没有解决浏览器禁用图象后空白页面的可访问性问题。

点击这里查看其他方案。

查看：303 评论：没有评论标签：图像替换

2003年3月，Douglas Bowman在他的网站Stopdesign上发布了一个技巧（www.stopdesign.com/articles/replace_text)，让设计师能够用一张背景图像替代某元素中的文字，以期显出更美观的字体。为了表示对发明者Todd Fahrner的尊重，这个技巧随后也被叫做“Fahrner图像替换（Fahrner Image Replacement，FIR）”。该技巧实现非常简单：用span将元素中的文本包围起来，然后通过应用CSS样式隐藏这个span中的文本，最后将背景图像应用到该元素之上即可。例如，对于下面的这一段HTML标记：

<h1 id="pageHeader"><span>css Zen Garden</span></h1>

我们可以使用下面的这段CSS容易地实现图像替换：

#pageHeader{
background:url(lemonfresh.gif) top left no-repeat;
width:400px;
height:20px;
}
#pageHeader span{
display:none;
}

通过使用CSS的display:none或visibility:hidden，所有在#pageHeader元素中的span元素都被隐藏起来。Hellsing同时使用了上述两种CSS设定——但它们的效果确实一致的。图像替换技术非常强大且很快开始流行——若是没有它，我们甚至都无法建立禅意花园。该技术可以说是实现复杂、灵活CSS布局的一块最为重要基石。

点击这里查看其他图像替换方案。

查看：342 评论：没有评论标签：图像替换

CSS图像替换技术

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

图像替换就是隐藏元素中的文本，用一副生动的图象替换。如果没有图像替换，那么网页就不可能这么美观、漂亮。《CSS禅意花园》中说：

图像替换技术非常强大且很快开始流行——若是没有它，我们甚至都无法建立禅意花园。该技术可以说是实现复杂、灵活CSS布局的一块最为重要基石。

由此可以见图像替换的重要。

也许你会说直接放一副图片或加上背景不行吗？为什么要写上文本有把文本隐藏呢？这不是多此一举吗？这样做确实能达到一样的视觉效果，但对搜索引擎是不利的。因为搜索引擎不能从这块地方的到任何内容，它就不知道这块地方要表达什么意思。而使用图像替换技术对搜索引擎就很友好。在引用《CSS禅意花园》中的一段：

图像替换技术使用display:none的本意并不只是想要替换文本，这样做还有一些更深层次的理由。实际上，若是没有任何提示或帮助，计算机就无法认出或读取图像中包含的文字。例如HTML中img元素，若是没有了alt属性，那么对于google等搜索引擎，以及辅助浏览设备（例如，屏幕阅读器即可阅读页面内容，并以声音的形式告诉浏览者）之类无法呈现图像的客户端来说，将变的豪无意义。而图像替换技术则保留了被替换元素中的原有文本，因此无论对任何客户而言，理解页面内容都不成问题。

直接使用图像或背景是传统表格布局使用的方法，而图像替换是CSS布局使用的方法。这又一次证明了CSS布局的网站更有优点。

《CSS禅意花园》中提了4种图像替换技术的方法，现在一一摘抄下来，和没有阅读此书的朋友分享：

1、Fahrner的方案

2、Leahy和Langridge的方案

3、Rundle的方案

4、Levin的方案

查看：361 评论：没有评论标签：图像替换

符合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.不会出现表格那样多层嵌套的问题。阅读全文 >

查看：225 评论：没有评论标签：web标准

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;
}

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

查看：363 评论：没有评论

页面 15/19首页...上页 10 11 12 13 141516 17 18 19 下页

CSS图像替换技术之Leahy和Langridge的方案

CSS图像替换技术之Fahrner的方案

CSS图像替换技术

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

CSS中英文双语导航菜单

分类

最新日志

最新评论

存档

链接