divcss布局:CSS布局中常用的CSS图像置换、图片替代的方法举例来源: 发布时间:星期五, 2008年9月26日 浏览:84次 评论:0
在xhtml+CSS网页布局中,我们很多结构与表现的图片,都用背景来进行操作的。例如栏目的标题,我们可以制作一幅图片,由于是图片,所以加上装饰性的图案纹理,文字字体也可以更加的多样化。我们常用的方法是background-image:url(http://www.52css.com/skins/52css_logo4.png)但我们需要考虑到两种情况的发生: 1、如果访客在浏览网页时,丢失了css文件,直接显示了页面的xhtml标签。我们的页面就变的难以读懂了,因为背景图片是在css文件中定义了,而此时根本显示不出来,我们无法阅读页面内容。 2、搜索引擎蜘蛛程序对图片中的文字根本无法辩认。它根本不清楚这里描述与表现的是什么。 我们就可以通过CSS图像置换、图片替代的方法来解决上面的两个问题。相当于说,栏目的标题我们用背景图片来表现,当css文件丢失时,可以显示出文字。当搜索引擎蜘蛛读取网页时,也能知道此标签的内容。也就是让图像替换掉文字,美化页面,更具有兼容性与搜索引擎优化。我们进入主题,下面例举了一些常用的CSS图像置换、图片替代的方法,希望对你有参考意义。本文章由52css.com原创! 小提示:你可以用WebDeveloper插件去掉CSS效果来查看丢失css文件时的情况。关于WebDeveloper插件的教程,可以52CSS.com的WebDeveloper专题:http://www.52css.com/article.asp?id=322 一、直接隐藏文字法display:none Example Source Code [www.52css.com] <h1id=\"header\"> <span>52CSS.com-CSSWebDesign</span> </h1> #header{ width:200px; height:90px; background-image:url(http://www.52css.com/skins/52css_logo4.png); } #headerspan{ display:none; } 直接将h1标签中的span元素设置成display:none直接隐藏掉,实现了图像替代的效果。运行效果如下: Source Code to Run [www.52css.com] #header { width: 200px; height: 90px; background-image: url(http://www.52css.com/skins/52css_logo4.png);}#header span { margin: 0 0 0 -2000px;} 0
相关文章
读者评论
发表评论 |