Archive

Posts Tagged ‘’

表格外观的无序列表

5月 26th, 2009
2 comments

[参与测试的浏览器：IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2 ]
[操作系统：Windows]

别看有的东东长得个表格样，其实是披着表格皮的无序列表，为了伟大的语义，我们需要用css实现表格外观的无序列表。

个人喜好，这里采用border和negative margin来实现，非常简单：

提示：你可以先修改部分代码再运行。

这是一个最简单的模型，然而，实战总是残酷的：

  1. 宽度如何自适应分辨率？
  2. 单元格内容过多、形成换行如何处理？
  3. 最纠结的问题：5×4的表格，如果只有17条数据怎么办？empty-cell也黯然失色…

问题1：宽度如何自适应分辨率？
这个问题也许有人说没必要，但是在模块化设计时，几乎任何部件都被要求设置为宽度自适应模式的。

解决1：参考完美的firefox3和ie8百分比宽度处理方案，给剩余的宽度分配给某个“列”，就行了 ^-^
记得二列等高的笨办法吗？——用背景图片模拟。

提示：你可以先修改部分代码再运行。

问题2：单元格内容过多、形成换行如何处理？

解决2：隐藏吧，它已经没有存在的价值了！（ - -! 其实是我想不出别的办法来了）
但为了体验好一点，我加上了text-overflow。这个，FF暂时不支持……aoao有好的解决办法，我也有次点的解决办法和一个完美的解决办法（目前YY中，且仅FF3.5支持）。

提示：你可以先修改部分代码再运行。

问题3：5×4的表格，如果只有17条数据怎么办？empty-cell也黯然失色…
看这个Demo，其实我觉得这个样子不影响阅读，也不难看了，可Boss和他的Money不乐意。

提示：你可以先修改部分代码再运行。

解决3：
首先让我们制造出我们想要的表格（很遗憾，制造了很多空标签，暂时没有找到更合适的纯CSS解决方案，欢迎大家多多指点）。

提示：你可以先修改部分代码再运行。

然后用position:relative实现css移魂大法：

提示：你可以先修改部分代码再运行。

然后让我们隐藏多余的那一行：

提示：你可以先修改部分代码再运行。

09-05-26 补充

幸亏不畏强暴地贴到蓝色去挨批了，现在不用空格了，谢谢birdstudio的思路，要能去掉span就完美了。哦米陀佛，天上赶紧掉个

提示：你可以先修改部分代码再运行。

Chomo xhtml+css , ,

全兼容的纯CSS级联菜单制作要点浅析

5月 20th, 2009
14 comments

[参与测试的浏览器：IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2 ]
[操作系统：Windows]

这次给云南移动网上营业厅做的级联菜单使用了纯CSS的方式，霍霍，能用CSS做的，就用CSS完成吧。^-^

早已有前辈完成过这样的实例了，我以为我能顺利完成，但没想到处处碰壁，故记录一点心得如下，供大家参阅。

废话不多说，咚咚咚，开始制作啦！！！

除了IE6这个坚强的孩子，其他浏览器攻克还是比较容易的。

提示：你可以先修改部分代码再运行。

该实例完成大概就两个要点：

1. 忌浮忌躁，一步步来，先把最低级的display:none;掉。

2. “:hover伪类”的使用，默认状态“display:none;”，“:hover”时则“display:block;”则能很容易完成。

而IE6下折腾就比较复杂了，经过头破血流的教训之后，总结出关键四点：

1. 原理：IE6仅<a>标签支持:hover伪类，但如果a标签里面再嵌入a标签，里面的a标签将不会生效，所以必须在之间套加一层<table>；

  1. <!–[if IE 6]><a href="#nogo"><table><tr><td><![endif]–>
  2. 内容部分可以含有<a>标签
  3. <!–[if IE 6]></td></tr></table></a><![endif]–>

2. 关键样式名：这个用于:hover效果的a标签的命名，如果使用与<li>一致的样式名（在非IE6中是li:hover产生的效果），将不用再另写样式代码，不仅节省了代码开销，而且可维性更好；

  1. <li class="li">
  2. <!–[if IE 6]><a class="li" href="#nogo"><table><tr><td><![endif]–>
  3. 内容部分可以含有<a>标签
  4. <!–[if IE 6]></td></tr></table></a><![endif]–>
  5. </li>

3. visibility的使用：采用display的话将出现onmouseout时上一次显示的optionGroup仍然不消失的情况

  1. .c_subNav .li:hover ul { visibility:visible;}

4.table的设置：[含泪ing]table一定要记得width:100%;啊，一定要记得啊，一定要记得啊，一定要记得啊……

最后完成效果：

提示：你可以先修改部分代码再运行。

Chomo xhtml+css , , ,