网页制作深入学习之重新认识 button 标签

网页制作深入学习之重新认识 button 标签(2) 1、它们要看起来像按钮。
2、它们在不同的浏览器里看起来要一样。
3、我用在按钮上的样式需要同样用在我可能会用的链接上。
4、标签应该是灵活的，易用于许多不同的情况。
5、我将能够有效地使用图标和色彩来传递将会发生的交互类型的信息。

带着这些适当的挑战，我在解决了夸浏览器的挑战后钻进了CSS之中，得出了下面的结果：

结果：

没有什么了不起的，简单，但有效。现在，我喜欢用这种方式处理按钮是因为我可以使用FAMFAMFAM的1000个图标库来举例说明大量可笑的想法和动作而不用每一次我需要新东西的时候非得用Photoshop来做一些东西。如果我们快速看一下这些标签，你会注意到最后那两个按钮实际上就像：

<div class="buttons">
    <button type="submit" class="positive">
        <img src="http://www.webjx.com/images/icons/tick.png" />
        Save
    </button>
    <a href="/passWord/reset/">
        <img src="http://www.webjx.com/images/icons/textfield_key.png" />
        Change Password
    </a>
    <a href="#" class="negative">
        <img src="http://www.webjx.com/images/icons/cross.png" />
        Cancel
    </a>
</div>

这个有用的原因是网页程序中的许多动作是依靠激发的，因而通过一个链接简单的发送一个用户到一个特殊的URL将引发它们需要做的动作。使用样式可以为两个元素（链接和按钮）工作，无论是用于AJAX或者标准提交都能给我们保持交互方法的一致和适当的灵活性。

只是一个短暂旁白，你可能想知道为什么在那些图片中我让ALT标签空白呢。可能会觉得惊奇于alt属性在每个图片都是必须的，事实上不是这样的。空的alt属性是完全有效的和有利于屏幕前的人知道哪些信息是有效忽略，当你的用户努力寻找下一个目标时节省他们的宝贵时间。由于这些图标确实是多余的，我宁愿不去浪费用户睐接收我使用的图片而不是接着呈现出来。他们将只会收到“Submit”而不是“Checkmark Submit”，那确实会让事情变的有点乱。

CSS

在极大程度上，控制那些按钮的CSS是相当直截的。浏览器间丝发般的差别导致了一定数量的填充差距，不过天下没有不可能的事儿，对你来说幸运的是，它已经解决了。

/* BUTTONS */
.buttons a, .buttons button{
    display:block;
    float:left;