2006-04-26

学习使用CSS进行网页布局

Views: 8321 | Add Comments

前几天更改首页,一边参考(或者说模仿)欧美的网站,一边更改代码。做出来之后感觉比以前进步多了。不过,首页与我所喜欢的网页相比,显得空洞不丰满。这可能是我缺少图像素材的原因,主要是经验的问题。自己的经验是不可替代的。

开始我的页面底部有一个表格进行布局,因为我不知道如何使用一个层水平撑大。后来发现使用float和width:100%就可以了。我这一次首页改动主要有下面的几点经验总结:

大量使用列表

列表是一种清晰而优美的表示形式。而且可以通过定义列表图标,hover动作使得列表看起来有动态。列表的地位可以通过查看欧美优秀网站的源码可以看出。

适当地使用绝对定位

开始我做页面顶部的header的时候,因为header高度固定经常使header内的层溢出。后来发现header是独立的和确定的,和其它的页面元素没有定位关系,所以对内层使用position:absolute,从而轻易解决了问题。

大胆使用前景或者背景图像

如果不使用图像,页面将显得空洞。有时候可以使用一张大图作为整个页面或者某个大的区域的背景,就能收到很好的效果。不过,图像的衔接必须自然,不要用得哗众取宠。这需要学习和天生的感觉。

浏览器差异和网页标准的问题

如果你不知道什么样的代码符合标准,那么至少让你的代码能同时在Firefox和IE上正常显示。有时候标准的代码也不能让页面同时在这两个浏览器上正常显示。不过我建议你在安装有Web Developer插件的Firefox里调试CSS,然后在到IE下做结尾修改。

当然,你不能忽略Opera,Sofari,Konqueror等浏览器用户的感情。当他们向你反映页面问题的时候,你必须改正。因为网络的问题,我无法提交我的网页进行验证。不过我知道我的网页在Firefox和IE上都正常显示。

Related posts:

  1. 用Javascript生成弹出窗口
  2. 单启动多个mysql实例mysqld_multi配置
  3. MySQL 数据库双主配置
  4. 好看的在线图表制作工具
  5. tableview新版本发布
Posted by ideawu at 2006-04-26 15:43:52

Leave a Comment