我们平常习惯了select下拉的形式，如果突然有需求说要做成上拉的形式，你该怎么做？昨天在一个技术交流群里面就有人提出这个问题。

其实select本身会根据自己当前的位置跟option的选项高度来自动判断，是该上拉还是下拉。看例子

Read the rest of this entry »

这个图别看简简单单几个色块，真正实现也不见得有多容易，得看你考虑到哪些东西。大概例子已经做出来了，提供下载 。

由于上下head跟foot两个色彩是单色的，所以要考虑自适应各种分辨率的屏幕，自适应分辨率不是百分百就够的，div的百分百布局会有很多问题。另一个是中间内容需要宽度自适应，左边side1是固定宽度，右边的side2也是固定宽度。

还有一个应该是比较难的一个问题，就是高度自适应，要保证side1红色块内容增多的时候，右边main，side2的色块也要跟着一起延伸，右边side2的内容增多，左边红色块也要跟着一起延伸，中间main的内容增加，红色块依然要继续延伸。先前也发过 关于 高度百分百引发的思考 ，有兴趣的可以去拍砖。
Read the rest of this entry »

不知道你有没有做过这样的一种效果，一个table中的一个连接，javascript 控制 tr 的显示隐藏，来达到显示更多数据的效果。如果没做过，尝试一下吧，你会发现，table中隐藏的tr的含有colspan的td 在再次显示以后，firefox会把内容合并到 第一个td里。

有点绕，把下面的代码copy以后另存为.html 打开 就知道我说的是什么问题了。锻炼自己的动手能力，我就不贴图了，想知道原因跟解决办法就看下去吧。

Read the rest of this entry »

语法：

white-space : normal | pre | nowrap

参数：

normal : 　默认处理方式
pre : 　用等宽字体显示预先格式化的文本。不合并字间的空白距离和进行两端对齐。参阅pre对象
nowrap : 　强制在同一行内显示所有文本，直到文本结束或者遭遇br对象。参阅td，div等对象的nowrap属性（特性）

说明：

设置或检索对象内空格的处理方式。
对应的脚本特性为whiteSpace。请参阅我编写的其他书目。

上面的内容来自 苏沈小雨 的《css2.0中文手册》，很好用，推荐一下。

white-space有几处典型的应用：

1.宽度自适应. 先看代码
Read the rest of this entry »

这个是面对有一定css经验的思考，如果你能够在一个钟头内用css写出这个导航条，并能自适应跟兼容所有浏览器，那么你就应该把css用得非常熟练了。【右键另存上面的图片源文件可以用fireworks编辑，有分层，photoshop打开的话会合并了。】

如果你写不出来，那么你也能通过这个css导航条的思考，让你获益不少。

当我看到这个图的时候，起初觉得挺简单的，一个高度30px的div，里面包含着一个ul跟一个more的a标签，可以用css 的float属性，一个飘左一个飘右，而如果按照ul 然后才是 a的顺序写的话，ie下会分成两行，可以先是a标签，然后才是ul。如果需要ul先load的话，可以用position去实现左右的定位。接下来是ul里面的细节。 一个ul里面包含着每个li，li里面又包含着a标签，a标签的文本嵌套一个span标签，用来控制右边的圆角自适应。这样不就出来了吗？

可实际在做的时候，你会发现问题多多。。

首先这个图你要怎么去切？从哪里入手？如果切整张图，又不能自适应，我看过一个外国人的一个css导航，就是把导航的各种状态都做成一整张，我把图给贴过来了。

Read the rest of this entry »