Easy To Manage The World Network Technology

TEL:18995488365 QQ:627252942

首 页 企业建站 维护助理 代管之家 网站优化 推广精灵 技术交流 下载中心 客户中心
易管天下域名注册、虚拟主机租售
SEO:CSS制作网页时的优化与技巧
易管天下-最新信息:《SEO:CSS制作网页时的优化与技巧 》2007/4/27 16:36:19!网站托管,网站保姆,网站SEO,网站优化,以及搜索引擎研究,SEO技术等
分享到QQ空间 分享到腾讯朋友

width:760px; /* 修改为你的层的宽度 */
margin:0 auto;
}

  但是IE5/Win不能正确显示这个定义,我们采用一个非常有用的技巧来解决:用text-align属性。就象这样:

body {
text-align:center;
}
#wrap {
width:760px; /* 修改为你的层的宽度 */
margin:0 auto;
text-align:left;
}

  第一个body的text-align:center; 规则定义IE5/Win中body的所有元素居中(其他浏览器只是将文字居中) ,第二个text-align:left;是将#warp中的文字居左。

  导入(Import)和隐藏CSS

  因为老版本浏览器不支持CSS,一个通常的做法是使用@import技巧来把CSS隐藏起来。例如:

@import url(main.css);

  然而,这个方法对IE4不起作用,这让我很是头疼了一阵子。后来我用这样的写法:

@import main.css;

  这样就可以在IE4中也隐藏CSS了,呵呵,还节省了5个字节呢。想了解@import语法的详细说明,可以看这里《centricle’s css filter chart》

  针对IE的优化

  有些时候,你需要对IE浏览器的bug定义一些特别的规则,这里有太多的CSS技巧(hacks),我只使用其中的两种方法,不管微软在即将发布的IE7 beta版里是否更好的支持CSS,这两种方法都是最安全的。

  1.注释的方法

  (a)在IE中隐藏一个CSS定义,你可以使用子选择器(child selector):

html>body p {
/* 定义内容 */
}

  (b)下面这个写法只有IE浏览器可以理解(对其他浏览器都隐藏)

* html p {
/* declarations */
}

  (c)还有些时候,你希望IE/Win有效而IE/Mac隐藏,你可以使用反斜线技巧:

/* */
* html p {
declarations
}
/* */

  2.条件注释(conditional comments)的方法

  另外一种方法,我认为比CSS Hacks更加经得起考验就是采用微软的私有属性条件注释(conditional comments)。用这个方法你可以给IE单独定义一些样式,而不影响主样式表的定义。就象这样:

  调试技巧:层有多大?

  当调试CSS发生错误,你就要象排版工人,逐行分析CSS代码。我通常在出问题的层上定义一个背景颜色,这样就能很明显看到层占据多大空间。有些人建议用border,一般情况也是可以的,但问题是,有时候border 会增加元素的尺寸,border-top和boeder-bottom会破坏纵向margin的值,所以使用background更加安全些。

  另外一个经常出问题的属性是outline。outline看起来象boeder,但不会影响元素的尺寸或者位置。只有少数浏览器支持outline属性,我所知道的只有Safari、OmniWeb、和Opera。

  CSS代码书写样式

  在写CSS代码的时候,对于缩进、断行、空格,每个人有每个人的书写习惯。在经过不断实践后,我决定采用下面这样的书写样式:

selector1,
selector2 {
property:value;
}

  当使用联合定义时,我通常将每个选择器单独写一行,这样方便在CSS文件中找到它们。在最后一个选择器和大括号{之间加一个空格,每个定义也单独写一行,分号直接在属性值后,不要加空格。

  我习惯在每个属性值后面都加分号,虽然规则上允许最后一个属性值后面可以不写分号,但是如果你要加新样式时容易忘记补上分号而产生错误,所以还是都加比较好。

  最后,关闭的大括号}单独写一行。空格和换行有助与阅读

本新闻共3页,当前在第3页  1  2  3  

分享到QQ空间 分享到腾讯朋友
今日头条

·短篇小说:《情场父子兵》
·学海日记:《十年青春正流逝》(卷二
·学海日记:《十年青春正流逝》(卷一
·诗集:《无题的意象》(71-80)
·诗集:《无题的意象》(61-70)
·诗集:《无题的意象》(51-60)
·诗集:《无题的意象》(41-50)
·诗集:《无题的意象》(31-40)
·诗集:《无题的意象》(21-30)
·诗集:《无题的意象》(11-20)

技术交流

· 腾讯微博-iWeibo系统 打造属于
· 什么是WAP?深入了解WAP
· 全面封阻六种主要网络威胁
· 应用指南:利用网络设备防范TC
· 三招提高FTP服务器安全性

网站维护

· 通用电气(中国)网站维护案例分析
· 网站建设、网站维护、网站运营过
· 国家计算机病毒中心发现恶意木马
· 《计算机信息网络国际联网安全保
· 一切从零开始 如何快速提升网站的

客户中心

· 个人诗集《幸福若海》(作者:
· 中卫精艺汽车服务有限公司
· 中卫街搜,爱生活,爱中卫,爱
· 中卫SEO培训-“中卫市企业网站
· 宁夏SEO免费培训--我为自己做代
· 北京九鹿鹿业-鹿血酒(保健酒)
· 电子商务十二五发展规划(全文)
· 易管天下免费培训--我为自己做

相关连接:
上一篇:网站建设技术:Dreamweaver制作技巧四则
下一篇:2006 十大Windows备份技巧总结
相关网络广告: