html代码如下：

<div id="smallTools" class="clearfix">   
<div class="toolBox">   
<div class="innerToolBox">   
<ul>   
<li class="tool1">   
<a href="#" target="_blank">校车表</a>   
</li>   
<li class="tool2">   
<a href="http://online.cumt.edu.cn/dzhbl/" target="_blank">电子海报</a>   
</li>   
<li class="tool3">   
<a href="http://lib.cumt.edu.cn/" target="_blank">图书馆</a>   
</li>   
</ul>   
<ul>   
<li class="tool4">   
<a href="http://stu.cumt.edu.cn/xgxt" target="_blank">学生工作系统</a>   
</li>   
<li class="tool5">   
<a href="http://jwchu.cumt.edu.cn/" target="_blank">教务系统</a>   
</li>   
<li class="tool6">   
<a href="http://service.js.vnet.cn/" target="_blank">网卡查询</a>   
</li>   
</ul>   
<ul>   
<li class="tool7">   
<a href="http://219.219.35.66/index.php" target="_blank">自主学习</a>   
</li>   
<li class="tool8">   
<a href="#" target="_blank">新生入口</a>   
</li>   
<li class="tool9">   
<a href="#" target="_blank">焦点视频</a>   
</li>   
</ul>   
<ul>   
<li class="tool7">   
<a href="http://219.219.35.66/index.php" target="_blank">自主学习</a>   
</li>   
<li class="tool8">   
<a href="#" target="_blank">新生入口</a>   
</li>   
<li class="tool9">   
<a href="#" target="_blank">焦点视频</a>   
</li>   
</ul>   
<ul>   
<li class="tool7">   
<a href="http://219.219.35.66/index.php" target="_blank">自主学习</a>   
</li>   
<li class="tool8">   
<a href="#" target="_blank">新生入口</a>   
</li>   
<li class="tool9">   
<a href="#" target="_blank">焦点视频</a>   
</li>   
</ul>   
</div>   
</div>   
<div class="slideBar">   
<a href="#" class="upBtn"> </a>   
<div class="barBox">   
<div class="innerBar"></div>   
</div>   
<a href="#" class="downBtn"> </a>   
</div>   
<div class="clear"></div>   
</div>  

css代码如下：

 
/***大框***/   
#smallTools   
{   
background:url(../images10/smallBarBg.gif) repeat-x left bottom;   
position:relative;   
height:227px;   
overflow:hidden;   
}   
/***左右两边的布局***/   
#smallTools .toolBox /***左边的工具框区域***/   
{   
height:207px;   
margin-top:10px;   
float:left;   
width:237px;   
margin-left:10px;   
overflow:hidden;   
position:relative;   
}   
#smallTools .slideBar /***右边的滑动条区域***/   
{   
height:227px;   
float:right;   
width:11px;   
}   
/***左框内元素的具体样式***/   
.innerToolBox   
{   
position:absolute;   
left:0px;   
top:0px;   
}   
#smallTools ul   
{   
height:69px;   
}   
#smallTools ul li   
{   
float:left;   
width:79px;   
height:69px;   
text-align:center;   
}   
#smallTools ul li a   
{   
display:block;   
width:79px;   
height:22px;   
padding-top:47px;   
color:#000;   
}   
/***以下是给各工具项设置背景***/   
#smallTools ul li.tool1   
{   
background:url(../images/tool1.gif) no-repeat center 7px   
}   
#smallTools ul li.tool2   
{   
background:url(../images/tool2.gif) no-repeat center 7px   
}   
#smallTools ul li.tool3   
{   
background:url(../images/tool3.gif) no-repeat center 7px   
}   
#smallTools ul li.tool4   
{   
background:url(../images/tool4.gif) no-repeat center 7px   
}   
#smallTools ul li.tool5   
{   
background:url(../images/tool5.gif) no-repeat center 7px   
}   
#smallTools ul li.tool6   
{   
background:url(../images/tool6.gif) no-repeat center 7px   
}   
#smallTools ul li.tool7   
{   
background:url(../images/tool7.gif) no-repeat center 7px   
}   
#smallTools ul li.tool8   
{   
background:url(../images/tool8.gif) no-repeat center 7px   
}   
#smallTools ul li.tool9   
{   
background:url(../images/tool9.gif) no-repeat center 7px   
}   
/***右边滑动条框的具体样式***/   
.slideBar .upBtn /***向上滑动按钮***/   
{   
display:block;   
line-height:0px;   
width:9px;   
height:7px;   
background:url(../images/up_btn.png) no-repeat left top;   
margin-top:2px;   
padding:0px;   
}   
.slideBar .upBtn:hover   
{   
border:1px solid #000000;   
}   
.slideBar .downBtn /***向下滑动按钮***/   
{   
display:block;   
line-height:0px;   
width:9px;   
height:7px;   
background:url(../images/down_btn.png) no-repeat left top;   
margin:0px;   
padding:0px;   
}   
.slideBar .downBtn:hover   
{   
border:1px solid #000000;   
}   
#smallTools .barBox   
{   
height:196px;   
margin:4px 0px;   
width:11px;   
position:relative;   
}   
.innerBar   
{   
position:absolute;   
width:10px;   
background:#a4a4a4;   
cursor:s-resize;   
top:0px;   
}  

(责任编辑：ken)