FF显示与隐藏,表格高度递增

Posted on: 2008-05-08 By: Gulu77 Under: Web Standards No Comments

在Firefox中切换display:block;与display:none;时,块状为表格的高度依次递增.
这有可能是FF的一个BUG,经测试IE、Ns、Op、Sf均正常.

很明显在FF这个BUG是针对表格而来,凡块状为表格,而且利用display:block/none 作状态切换的都有可能出现上述的BUG.

FF对应的BUG
表格实例: http://blog.gulu77.com/demo/200805/FF_bugTest1.html
CSS模拟表格实例: http://blog.gulu77.com/demo/200805/FF_bugTest1.html

解决方案
给两个例子的子级板块, 添加了 float , 问题得以解决.
表格实例: http://blog.gulu77.com/demo/200805/FF_test1.html
CSS模拟表格实例: http://blog.gulu77.com/demo/200805/FF_test2.html

注意: 请用FF浏览以上例子,测试时间为 2008年05月08日 测试版本为 Firefox/2.0.0.14

不用图片实现,不规则导航

Posted on: 2008-04-26 By: Gulu77 Under: Web Standards 2 Comments

灵感来自经典的phantom 所发出的题目: [xhtml+css实例]不规则导航的制作

特点: 不使用图片,制作不规则的菜单。
重点: 利用 position margin boder 属性!
提示:请弄懂border的特性…

html:

<ul>
<li><a href="#" mce_href="#"><span>文字</span></a></li>
<li><a href="#" mce_href="#"><span>文字</span></a></li>
<li><a href="#" mce_href="#"><span>文字</span></a></li>
<li><a href="#" mce_href="#"><span>文字</span></a></li>
</ul>

Read more…

实现左文右图板块

Posted on: 2008-04-09 By: Gulu77 Under: Web Standards No Comments

这两天制作页面遇如下图的问题, 整理了一下方便自己同时也希望方便了同行们…
备注: 根据要求,XHTML架构是固定以下的代码, 另外图片跟文字的,宽度比例是随内容而改变

实现左文右图板块-Gulu77
Read more…

页面制作要点总结

Posted on: 2008-03-26 By: Gulu77 Under: Web Standards 1 Comment

降低网络成本

1.最大限度减少HTTP请求数。
2.控制网站流量，合并样式图片。
3.图片优化压缩处理，无损地减少图片体体积。
4.减少CSS文件的体积，合并css样式文件。
5.提高客户端渲染速度，尽量不使用占用过多CUP，占用过多内存的代码 如: text-indnt:-9999px 、IE滤镜等
6.减少HTML的嵌套，减少无语义代码。 如: <div class=”clear”></div>消除浮动等

Web内容可访问性 / 兼容性

1.电脑浏览器兼容性。
2.电脑分辨率兼容性。
3.其它屏幕阅读器兼容性。
4.语音浏览器兼容性。(暂时没有考虑,关注中,网易新闻有声版 做得不错)
5.需要的话打印机兼容性也考虑，要求能准确的打印到需要的信息。

Read more…

腾讯的三栏布局考题

Posted on: 2008-03-25 By: Gulu77 Under: Web Standards 4 Comments

这是TC 06年初的一道布局考题,最近还要朋友在讨论,也就挖出来写写我的理解啦!
按附件(下图)制作要求如下:
制作一个页面，首先要一个top，下面是一个bottom，中间是一个三列块的模式，leftpart，midpart，rightpart。特殊要求是这个页是一个门户网站的基本框架,访问量大于100W每日。因成本限制，网络带宽可能满足不了此访问量，会出滞连情况。(另备注:此布局不可用背景图片辅助实现。)
腾讯的三栏布局 Read more…

Next Page »