当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > 标准化你的网页

CSS样式表
css 简单区别ie6,ie7,firefox的写法
解决在IE6下文字溢出(多出一行字)的解决方法小结
纯css 鼠标移上查看大图的效果
css 完美清除浮动的两种解决方案
css 透明度的设置兼容所有浏览器
pre 自动换行的问题
CSS 图片定位的几种方式
div+css学习笔记(IE与fox好多不兼容的问题)
让你的页面对 IE6 显示出黑白色(多浏览器)
li 自适应宽度
样式表达式实现交替显示table行颜色
css 控制图片大小 小于固定值 控制大小
CSS 各种滤镜代码解释 用法案例
针对firefox ie6 ie7 ie8的css样式hack
CSS 样式 层裁剪图片
十个非常实用的CSS属性(IE不支持)
CSS渲染速度改善的十个方法与建议
css z-index 最大值
css z-index 在IE中的迷惑
IE与Firefox中兼容的html设计中使用CSS改变鼠标为手形

CSS样式表 中的 标准化你的网页


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-12   浏览: 102 ::
收藏到网摘: n/a

Web标准是越来越突出了,现在建站都讲究个符合标准,通过W3C的XHTML和CSS验证,那么怎样才能做出一个符合标准的站点呢,下面是我在BLOG重构和制作OSdev Resource过程中的一些经验^_^。

网页设计师看一些有关Web标准方面的文章

虽然w3.org更权威,但对于母语是中文的我们来说,这个更容易看懂:)个人觉得比去w3.org看那些满屏的E文舒服。可以在这里找到很多有关XTHML,DIV+CSS布局,CSS技巧等的文章。还有站长阿捷写的《循序渐进》的教程,介绍了怎么一步一步来制作一个符合标准的网站。

丢掉table,采用div+css布局

这似乎是设计一个符合标准的网页首先应该做到的了:),DIV+CSS布局也是一种趋势。用DIV+CSS布局可以参考w3cn.org的文章:CSS基本布局16例典型的三行二列居中高度自适应布局

关闭标签

在以前,可能我们并不注意关闭标签这个问题,例如img,p等,在用这些标签时往往只用了开头,而没有正确的关闭它。通常情况,我们是这样用img的:

<img src="sample.gif">

但是在XHTML中,不允许这样的情况存在,而是应该关闭它:

<img src="sample.gif" />

再者如段落标记<p>,以前用它都是直接一个<p>,而没有想过在段落结束时加上</p>,这在XHTML也是不允许的。

正确嵌套标签

浏览器的容错性使得我们在编写了一个不符合规则的网页也能得到正确的显示效果,如用

<p><b>sample</p><b>

并没有什么问题,同样的,这在XHTML中是不被允许的。XHTML从XML而来,而XML必须具有结构性,所以嵌套标签时,必须一层一层嵌套,而不能交错。

正确设置字符集

似乎没有什么大关系,但设置好字符集更有利于浏览器对文档的解析。

图片的对齐

在XHTML中,align属性只能是left、middle、right或者top、middle、bottom这三个值中的一个,而很多时候我们需要图片与文本绝对中间对齐,即用absmiddle。使用XHTML之后,就要丢掉这个属性了,解决方法?我也不知道,不过网页设计师里有文章有提到这个问题,我在BLOG重构时,把图片对齐一律设为top,显示效果也还过得去。

处理链接中的&

动态网站中在用GET方法传参时,如果有多个参数,就会用到&来连接各个参数,但在XHTML中如果有&就意味之后是一个实体,但是应该没有人会把参数名取nbsp、lt、gt这样的吧。在XHTML中规定所有不是实体的&必须转换成&,如果不进行转换的话,在进行W3C校验时就会报错找不到实体。

其实个人感觉按照标准来制作网站比按传统方式来制作网站轻松很多,因为结构与内容分离,在改变显示效果时不需要整个页面重新做过,只需要在CSS中重写样式就行了。而且方便以后改版什么的,再者如Fdream的FBS,无刷新换肤,不错的东东~~