使用非ie浏览器的时候访问五色土时,总会有一些不舒服,甚至还会有一些JS bug,正好3月下旬小学了CSS的一些新知识,五色土导读界面变成了我的实验对象
这次试改有3个版本(试作成果),版本1只有一个boa.css留下
版本1是开始了解五色土导读结构,因此layout和skin代码混杂,没什么可读性及参考性
版本2是初本尝试分离layout和skin,但是在layout的使用上,并不是很满意,主要体现在将字体放大阅读后,和整个界面的布局结合会惨不忍睹
版本3的话是参考了yahoo英文站点的做法,使用了一些合理的css属性,解决了这个问题.
主要实践了几个知识点
1,reset.css的使用
主要是统一各浏览器的默认样式,有了这个,在跨浏览器开发工作中能省下不少调试CSS时间
2,栅格化系统的应用
由于bbs的web界面不是标准的960px宽度,因此在实际操作的时候,是按1000px设计,并使用了40*25的栅格规划,有兴趣的可以量一量每信息栏宽度,但在垂直方向的栅格化并没有做深入的研究
3,layout和skin的分离
layout的问题集中在em的处理及不同浏览器对盒形模型渲染得差异上,网上最好的解决方案是yahoo英文站点,通过对yahoo英文官网的css分析,就可以获得相应的答案,奇怪的是,yahoo中文在使用em上,没有和英文站点使用一样的策略,不知是从什么方面考虑。
这次试改,没有用到任何css hack,可能和界面简单有关,但就个人而言,更倾向于绕开bug解决问题
我所在的企业是做企业信息化的,难免对互联网的标准化开发认识不深,欢迎提出任何意见
参考文章
淘宝CSS框架研究
打造自己的reset.css
网页栅格系统研究（1）：960的秘密
网页栅格系统研究（2）：蛋糕的切法
网页栅格系统研究（3）：粒度问题
网页栅格系统研究（4）：技术实现
Yahoo!