• 微博
• 腾讯QQ
• E-Mail
• 留言板
• 友情链接

[狂人标准的Html工具条] 作者：狂人=Madman=

呵呵，这一次狂人要来和大家分享一种制作工具条的方法。
想不想知道啊？其实很简单的。
看，完成效果是这样的：
我们先做一个按钮项。我弄的工具条小了一些，每个按钮项20×20大小。
看一下：

呵呵。当鼠标划过的话，按钮项当然要有浮动效果喽。所以，我们还要准备一个对应的图片：

浮动效果在这里开始实现哦。
这就是它的代码：
<a href="###" class="bar_bold" title="【加粗】"></a>
很简单和标准的一句HTML的链接代码。
href属性可以暂时设置为###，这样点击之后就不会有不利于我们的链接反应。
title属性是鼠标移到工具项之上时浮现的提示。
class属性是工具项的样式类。
样式如下：
<style>
<!--
a.bar_bold {
  WIDTH: 20px;HEIGHT: 20px;DISPLAY: block;FLOAT: left;
  background-image:url('teach/teach_toolbar/bar_bold_0.gif');
}
  a:hover.bar_bold {
    BACKGROUND: url('teach/teach_toolbar/bar_bold_1.gif');
  }
-->
</style>
看a.bar_bold，首先定义工具项的宽度与高度。还要定义背景为我们所要的第一幅图片。接下来的DISPLAY: block;FLOAT: left;是关键，每一个工具项是独立的块，并且要一个接一个靠左罗列对齐。

工具条只有这些好象不够吧。不太像？在哪里？对了！要有分隔项可以将不同类别的工具项分割开。
图片在这里：
和
我们一样用类似前面的链接代码来完成：
<a class="bar_0"></a>
和
<a class="bar_3"></a>
样式在这里：
<style>
<!--
a.bar_0 {
  WIDTH: 6px;HEIGHT: 20px;DISPLAY: block;FLOAT: left;
  background-image:url('teach/teach_toolbar/bar_1.gif');
}
a.bar_3 {
  WIDTH: 3px;HEIGHT: 20px;DISPLAY: block;FLOAT: left;
  background-image:url('teach/teach_toolbar/bar_3.gif');
}
-->
</style>
由于分隔项不需要任何反转浮动效果，所以简单得很。

但是当这个时候，你会发现一个问题，由于是自适应宽度的工具条，当窗口宽度小于工具条实际宽度的时候，右侧的工具项会自动折回换行。

但有些朋友不愿意这样。他们希望工具条的宽度固定，这样还有一个好处，就是两个短工具条可以并列，否则整条换行。这样效果会更好！

很简单，那就是把整条工具条视做一个整体。

把先前的各个项目统一套进：
<div class="bar_bar1">...</div>
而这个层的格式为：
<style>
<!--
div.bar_bar1 {
WIDTH: 192px;DISPLAY: block;FLOAT: left;
}
-->
</style>
工具条的宽度是需要定义的，各个工具项计算可以得到是192像素。

就这样，工具条就差不多了。效果是不是很好啊？代码很简单，也很标准。

由于浏览器存在的固有问题，各工具项代码之间必须紧贴。切记！不然工具项之间会出现错开。