五、CSS图片替换技巧
一般都建议用标准的HTML来显示文字,而不要使用图片,这样不但快,也更具可读性。但如果你想用一些特殊字体时,就只能用图片了。
比如你想整个卖东西的图标,你就用了这个图片:
- <h1><imgsrcimgsrc=”widget-image.gif”alt=”Buywidgets”/>h1>
这当然可以,但对搜索引擎来说,和正常文字相比,它们对alt里面的替换文字几乎没有兴趣这是因为许多设计者在这里放许多关键词来骗搜索引擎。所以方法应该是这样的:
广州网站建设,网站建设,广州网页设计,广州网站设计
- <h1>Buywidgetsh1>
但这样就没有特殊字体了。要想达到同样效果,可以这样设计CSS:
- h1{background:url(widget-image.gif)
- no-repeat;height:imageheighttext-indent:-2000px}
注意把imageheight换成真的图片的高度。这里,图片会当作背景显示出来,而真正的文字由于设定了-2000像素这个缩进,它们会出现在屏幕左边2000点的地方,就看不见了。但这对于关闭图片的人来说,可能全部看不到了,这点要注意。
六、CSSbox模型的另一种技巧
这个Box模型的调整主要是针对IE6之前的IE浏览器的,它们把边界宽度和空白都算在元素宽度上。比如:
- #box{width:100px;border:5px;padding:20px}
这样调用它:
这时盒子的全宽应该是150点,这在除IE6之前的IE浏览器之外的所有浏览器上都是正确的。但在IE5这样的浏览器上,它的全宽仍是100点。可以用以前人发明的Box调整方法来处理这种差异。 但用CSS也可以达到同样的目的,让它们显示效果一致。
- #box{width:150px}
- #boxdiv{border:5px;padding:20px}
这样调用:
- <dividdivid=”box”><div>…div>div>
这样,不管什么浏览器,宽度都是150点了。
七、CSS设置块元素水平居中对齐
如果想做个固定宽度的网页并且想让网页水平居中的话,通常是这样:
广州网站建设,网站建设,广州网页设计,广州网站设计
- #content{width:700px;margin:0auto}
你会使用
- body{text-align:center}#content{text-align:left;width:700px;margin:0auto}
这会把网页内容都居中,所以在Content中又加入了:text-align:left。



