天生我才必有用

上次介绍使用了Google API来实现条状图（详见Google Chart API 自动生成图表），它使用的技术是动态生成Image图片的方式。

是否可以使用HTML和CSS? 这个当然没问题，具体实现说明请参考A List Apart: Accessible Data Visualization with Web Standards 网站的文章。

如何实现在有限的空间内显示更多的内容呢？其实很多页面的实现上都考虑了这样的一个问题。

如Thickbox的官方页面中就大量使用了这种技术，对页面的局部内容实现滚动，从而使页面上可以显示更多的内容。

那如何实现这样的滚动呢？其实很实现简单。步骤如下：

1. 使用div标签来定义此区域的范围。
2. 在CSS中对此区域定义宽和高。
3. 在CSS中使用overflow属性来定义div的滚动。

现在我们来看一下如何定义overflow的属性，overflow的属性值可以为以下四种：

• overflow: auto – 这个属性会为所定义的区域添加一个滚动条(Scroll bar)，包括水平、垂直或者两者都显示。不过只有当显示的数据内容超过定义的宽高时，滚动条才会显示。
• overflow: scroll – 这个属性会为所定义的区域添加一个滚动条(Scroll bar)，但不管内容的多少，即使显示的内容很少，屏幕上也会显示一个Disable状态的滚动条。
• overflow: visible – 不剪切内容也不添加滚动条.
• overflow: hidden – 会对内容进行剪切，超过显示宽高的内容不会被显示。

可能常用的即时overflow:auto和overflow: scroll。当然此效果也可以使用iframe来实现，不过屏幕内容的刷新会是一个比较烦人的问题。

HTML:

<div class="scroll">
<p>This is a scrolling are created with the CSS property overflow.</p>
<p><span style="color: red;">This is red color</span> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
<p>This is a normal paragraph.<span style="font-weight: bold; font-size: 22px;">This is big bold text</span>
</p>
<p>This scrolling are can contain normal html like <a href="index.php">link</a></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
</div>

CSS:

div.scroll {
height: 200px;
width: 300px;
overflow: auto;
border: 1px solid #666;
background-color: #ccc;
padding: 8px;
}

前段日子一直在做一个头像的缩略图，把图像的大小设定为48×48，不过很多图片并不可能是正方形的？这样的限制宽高的结果，显而易见的造成了图片的失真。难道还真的必须把头像都使用GD库来进行缩放？其实可能过于从一个程序开发人员的角度思考了这个问题。其实使用两句简单的CSS语句即可把此问题解决：

.thumbnail img{
height:auto;
max-width:48px;
}

通过把宽度最大设定为48像素，高度自动。完全避免使用GD库的需求。条条大路通罗马啊。

测试了一下，才发现这种方法的最大缺点就是ie6并不支持max-width的属性，所以在ie6中必须使用width来代替max-width，不过如果是使用在缩略图的情况中时，这个问题并不突出，毕竟都是缩小图片的情况。

input这个Html标签可以用来定义Form中的各种控件，如何非常方便的按input的属性来指定这类控件的CSS属性呢。其实可以使用以下例子中的CSS定义（唯一缺点此方式IE不支持)
1.例1

input[type=checkbox]{
    width:auto;
}

2.例2

input[type=button] , input[type=submit] , input[type=reset]{
    width: auto;
    margin:0 5px 5px 5px;
}

经常会碰到这样的情况：当用户点击了某个按钮后，此时页面由于网络速度，或者网页在调用Curl等命令，还未能及时地重定向到下一个页面，为了避免用户再次点击（特别是cURL的一些付费过程），必须把此Image Button设为不可见。

可能会想到使用HTML Tag的visible属性来把此按钮设为不可见。其实这种方法对于Image Button并不可行。不过也不必觉得没有办法做到，方法很简单，使用Javascript来控制CSS，把此Image button的宽度设置为零即可，可能从语法的角度来说有些取消，但这的确是非常有效的一种方法。

(更多…)