繁体中文
设为首页
加入收藏
当前位置:网页设计首页 >> HTML/Xhtml >> WEB标准教程:Div+CSS布局入门教程

WEB标准教程:Div+CSS布局入门教程 (2)

2007-12-13 19:14:06  作者:  来源:  浏览次数:1141  文字大小:【】【】【

示例请见四川省建设厅信息门户,界面切换在右上方,如图1所示。由于时间原因,并未通过XHTML和CSS校验,但原理是一样的。

  

  图1:界面样式切换

  1、重新设计站点的HTML

  首先我们要去掉网页中有关外观的标签。在以前的代码中,我们常用一个表格用来在页面的内容中创建一个有边框的区块,我们还使用〈b〉来加粗文本。用来改变字体颜色等等。用

  标签来创建段落等。

  而要做出能适应XHTML标准和能随意换肤的网站,我们须要避免在页面中使用有关外观的标签。使文档结构和表示形式分离的一个最大的好处就是它使文档在没有CSS时,仍然可以使用和访问。表现(就是文档看上去的样子)在一个支持性好的浏览器中也将呈现的不一样,但是它的内容将永远不变,大多数情况,对于访问网站的人来说,内容实际上比表现的方式更加重要。这就是为什么给那些支持性不好的浏览器发送一个没有样式的页面,要比把他们排斥在外要好的原因。

  现在比较流行的做法是使用DIV、SPAN等标签来布局整个页面,而TABLE,UL,PRE,CODE等标签来显示数据,用UL是用来显示无序的列表信息,而OL显示有序的列表信息。这将比用TABLE来显示一个列表更有语义上的意义,同时UL和OL在浏览器中比TABLE标签更快有下载速度,并且相对于TABLE,CSS对UL和OL的外观控制更加灵活。当然对于复杂的数据,比如报表,用TABLE来显示仍然是不二的选择。

  2、建立基本的通用样式

  由于所有的XHTML文件都是由各种各样的HTML标签和标签内的文字组成,而一些基本的标签在每个XHTML文件都存在的,如:body、table、td、div、h1—h6、ul、li、input等等,如果我们定义好了这些标签的CSS样式,如:字体,字号,行距,背景色,背景图等等,我们就有了一个基本的样式风格,就如同在Word或PowerPoint中的主题,每个主题就是一套风格样式。 因此,我们可以根据基本的HTML标签定义出一个通用的样式来,例如建立一个siteComm.css文件,定义如下:

[1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14] [15] [16] [17] [18]

责任编辑:


相关文章
 

最新文章

更多

· png图片在ie不透明的解决...
· 如何禁用 radio ,设置为只读
· 符号对照表
· XHTML常用标签介绍
· 根据网页HTML结构选择最...
· HTML 5新增的元素
· 三种简洁的Tab导航简析
· XHTML 2 抢先试用
· 如何为Web页面选择合适的...
· HTML向XHTML转化

推荐文章

更多

· png图片在ie不透明的解决...
· 如何禁用 radio ,设置为只读
· 符号对照表
· XHTML常用标签介绍
· 根据网页HTML结构选择最...
· HTML 5新增的元素
· 三种简洁的Tab导航简析
· XHTML 2 抢先试用
· 如何为Web页面选择合适的...
· HTML向XHTML转化

热点文章

更多

· png图片在ie不透明的解决...