直接列出代码如下,有需要的自己去参考,可以控制任意 html 容器标签。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS控制DIV层滚动效果 CSS层滚动条效果</title>
</head>
<style type="text/css">
<!--
ul {
border: 3px double #999;
height: 300px;
width: 200px;
overflow: auto;
overflow-x: hidden;
padding: 2px;
scrollbar-3dlight-color:#cccccc;
scrollbar-arrow-color:#ffffff;
scrollbar-base-color:#cccccc;
scrollbar-darkshadow-color:#cccccc;
scrollbar-face-color:#ccc;
scrollbar-highlight-color:#ffffff;
scrollbar-shadow-color:#ffffff;
}
li {
list-style-type: none;
}
li a img {
filter: Alpha(Opacity=70);
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
width:180px;
height:50px;
padding: 2px;
}
li a:hover img {
filter: Alpha(Opacity=100);
border: 1px solid #666666;
padding: 1px;
}
-->
</style>
<body>
<ul>
<li><a href="http://www.songyanjun.net" target="_blank"><img src="images/01.jpg"></a></li>
<li><a href="http://www.songyanjun.net" target="_blank"><img src="images/02.jpg"></a></li>
<li><a href="http://www.songyanjun.net" target="_blank"><img src="images/03.jpg"></a></li>
<li><a href="http://www.songyanjun.net" target="_blank"><img src="images/04.jpg"></a></li>
<li><a href="http://www.songyanjun.net" target="_blank"><img src="images/05.jpg"></a></li>
<li><a href="http://www.songyanjun.net" target="_blank"><img src="images/06.jpg"></a></li>
<li><a href="http://www.songyanjun.net" target="_blank"><img src="images/07.jpg"></a></li>
<li><a href="http://www.songyanjun.net" target="_blank"><img src="images/08.jpg"></a></li>
<li><a href="http://www.songyanjun.net" target="_blank"><img src="images/09.jpg"></a></li>
<li><a href="http://www.songyanjun.net" target="_blank"><img src="images/10.jpg"></a></li>
</ul>
</body>
</html>
<body>
</body>
</html>
以上代码即可以实现
带有滚动条的层
或标签容器 ,不在做解释
。这个玩意不难,基础的东西,看看就能明白。
Over !!!