找回密码
 加入怎通
查看: 744|回复: 5

[站长八卦] 如何做好网站优化css布局的细节问题

[复制链接]
cnjdgs 发表于 2012-05-18 14:29:14 | 显示全部楼层 |阅读模式
 对于任何一个网站来说名字是SEO的首选,而H1标签是搜索引擎认为页面上最重要的文字部门,所以我们要把网站的名字放在H1中;问题是代表网站名字的通常是一个LOGO图片,而图片对于SEO来说是不友好的。请看下面jquery的首页的logo部分的图片和代码。
3 Y7 R- Z: {. B& z2 _* Y" @  . R* |7 |8 t; u- B
  <divid="jq-header">
2 Z4 t" b# [6 ~: B  $ A& p& ^5 x, P0 Q& L! l
  <h1><a>jQuery:TheWriteLess,DoMoreJavaScriptLibrary</a></h1>9 t) S( G5 f/ g# |" e' n1 Y
  
7 P  {' Q$ C# L, I. F  .jquery的界面做的很棒,SEO也很棒。很显然图片的效果和Html是联系不起来的。上面的一小段html代码是欺骗搜索引擎用的,和显示根本不搭边。那么这里是如何让浏览器渲染出来的呢,大家都能猜到,是CSS,请看下面的一段CSS代码:
" X: W' C. }3 l* h! a( U* n% Q  3 X; g! v2 R% ~1 B7 y, S5 k
  #jq-headerh1a{}{7 R9 C1 k: p$ j: {0 n# S& f* y/ m% u
  text-indent:-9999em;3 Y# O/ ^5 X3 Q
  background:url(/images/logo_jquery3.png)no-repeat;
6 O' R6 W( p. o2 W5 O# M3 v  width:116px;) A* r4 h" k% W, P% t* |. B
  height:35px;( g6 _- w# V5 z* d8 l
  font-size:0;
6 d2 m! o5 W% ~+ R4 W3 n  display:block;: M  g' [1 ~* a- |8 L" v
  border:0!important;
! Y5 ~3 r" D: r4 ]" I  border-bottom:0;
9 M2 u% I+ z( i! h& J6 a: e  }- V1 M* Y4 b; i* g
  
2 |- `2 p+ r% R0 O  关键的地方有三处:
9 s0 P  C" s! D% Z! K  6 l' k6 G2 Q& ]% J' o: V
  1.text-indent设定了一个很大的负数值,这个的效果就把Html中的那段文字藏到了您的显示器的左边几百米的地方,用来欺骗搜索引擎的文字就从浏览器的界面上消失了。3 |5 g: \( g: h3 E0 R1 z
  
6 w% O# O1 n; D7 g- v  2.只有这样还是不够的,还需要让用户从浏览器中看到LOGO图片,在CSS中肯定就是background了,注意url()括号里面的内容可以用引号也可以不用,如果不用的话就可以省掉俩字符。-:); Q) |' m5 V6 Y( E+ Z9 t7 y( ~
  . Z! k4 D# k: Z) L6 |; ?( G7 {6 `" X
  3.光有上面的两步还是不够的,我们还需要让用户的鼠标放到LOGO上时的表现像放到一个链接上,显示一个小手,由于A标签的真实文本已经被移动到浏览器左侧几百米的地方了,所以浏览器不认为背景图片的地方有链接;这时候就用到了下面的width,height,display的设定。. E2 M. x! l9 x1 ~
  
" c; H) l5 d) q# w9 ~  分析到此为止,细节有时候很重要。
2 ~+ Y1 x4 x4 ^: ]2 q信息来源:简单购-中国,转载请保留链接,谢谢。http://www.cnjdg.com
$ T) V& W- A+ X2 g* k5 f, m
回复

使用道具 举报

客服晓渔 发表于 2025-11-10 02:17:37 | 显示全部楼层
完全赞同,我也是这么认为的,英雄所见略同~
回复 支持 反对

使用道具 举报

蓝色妖姬 发表于 2025-11-10 19:34:30 | 显示全部楼层
说得很实在,没有夸大其词,这种真实分享太难得了
回复 支持 反对

使用道具 举报

qiulan 发表于 2026-01-21 04:14:42 | 显示全部楼层
刚好遇到类似问题,看完这个帖子心里有底了
回复 支持 反对

使用道具 举报

风停花开 发表于 2026-01-24 06:17:49 | 显示全部楼层
这个思路很新颖,打开了新世界的大门,谢谢分享
回复 支持 反对

使用道具 举报

戈瑞德 发表于 2026-02-03 08:47:40 | 显示全部楼层
学习到了,之前一直没注意过这个点,受教了
回复 支持 反对

使用道具 举报

    您需要登录后才可以回帖 登录 | 加入怎通

    本版积分规则

    QQ|手机版|小黑屋|网站地图|真牛社区 ( 苏ICP备2023040716号-2 )

    GMT+8, 2026-3-13 23:35 , Processed in 0.135395 second(s), 24 queries , Gzip On.

    免责声明:本站信息来自互联网,本站不对其内容真实性负责,如有侵权等情况请联系420897364#qq.com(把#换成@)删除。

    Powered by Discuz! X3.5

    快速回复 返回顶部 返回列表