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

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

[复制链接]
cnjdgs 发表于 2012-05-18 14:29:14 | 显示全部楼层 |阅读模式
 对于任何一个网站来说名字是SEO的首选,而H1标签是搜索引擎认为页面上最重要的文字部门,所以我们要把网站的名字放在H1中;问题是代表网站名字的通常是一个LOGO图片,而图片对于SEO来说是不友好的。请看下面jquery的首页的logo部分的图片和代码。
2 {8 @% r+ C: t+ ?  
& q: w1 }% K/ E4 A$ n  <divid="jq-header">
5 u( n& ^9 z: N/ r  
, ^) M* s/ t. K+ `7 u  <h1><a>jQuery:TheWriteLess,DoMoreJavaScriptLibrary</a></h1>
1 l/ M! m' X; x9 m) E5 A( B# Q  U, d; l0 H  ; K3 v! \# d4 v( m7 M. A- ^
  .jquery的界面做的很棒,SEO也很棒。很显然图片的效果和Html是联系不起来的。上面的一小段html代码是欺骗搜索引擎用的,和显示根本不搭边。那么这里是如何让浏览器渲染出来的呢,大家都能猜到,是CSS,请看下面的一段CSS代码:, b; o* j/ [0 h- I- y/ n' s% z! X
  
  i, {) k8 E& |+ p% u  #jq-headerh1a{}{" b- ^8 G6 u9 g5 r/ Y5 a; e+ t- a
  text-indent:-9999em;
& G1 q3 w2 U8 C  background:url(/images/logo_jquery3.png)no-repeat;0 J. Q: E- K& C4 H! [$ q
  width:116px;
. H' O- r% [: ?1 e& v: }- `5 j  height:35px;
. X+ X# z/ F: J# j" x  font-size:0;1 ?7 Q4 K# U0 A6 I7 }1 o7 u, J
  display:block;
) I/ J1 b7 z  N5 u  border:0!important;5 Q1 q8 h% P( ^0 t  W" E( h
  border-bottom:0;
; U6 e3 b4 w) U  k% \/ H  }
+ y5 I. ?' J. M* r! O. X8 u6 t  + @6 n  v" |3 G: t  V
  关键的地方有三处:
. H! P: W1 e! Y7 V+ L1 a. H$ A  9 F7 X+ z: j0 J5 n
  1.text-indent设定了一个很大的负数值,这个的效果就把Html中的那段文字藏到了您的显示器的左边几百米的地方,用来欺骗搜索引擎的文字就从浏览器的界面上消失了。, O# B$ w/ s. b3 `. r; ?$ @
    Z0 l! G! l9 \; ]  x
  2.只有这样还是不够的,还需要让用户从浏览器中看到LOGO图片,在CSS中肯定就是background了,注意url()括号里面的内容可以用引号也可以不用,如果不用的话就可以省掉俩字符。-:)- l. M0 x$ D. u9 p
  . [( k- F4 g1 T/ J1 A: O! \( w
  3.光有上面的两步还是不够的,我们还需要让用户的鼠标放到LOGO上时的表现像放到一个链接上,显示一个小手,由于A标签的真实文本已经被移动到浏览器左侧几百米的地方了,所以浏览器不认为背景图片的地方有链接;这时候就用到了下面的width,height,display的设定。
% o, s0 ^: `! J- V4 K# c  ) p: ~0 U0 R% J2 e0 B1 Y
  分析到此为止,细节有时候很重要。  H3 z7 a) C4 H' v/ Y" O6 j0 q  m% S
信息来源:简单购-中国,转载请保留链接,谢谢。http://www.cnjdg.com( U3 L9 [5 H5 s
回复

使用道具 举报

客服晓渔 发表于 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 | 显示全部楼层
学习到了,之前一直没注意过这个点,受教了
回复 支持 反对

使用道具 举报

2026年3月12日真牛社区(fd.znbgj.com)签到记录贴
我今天最想说:「www.hzzdsw.com 加油」.

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

    本版积分规则

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

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

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

    Powered by Discuz! X3.5

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