纯CSS代码实现的图片列表滚动

来源:互联网 发布:湘北vs陵南数据 编辑:程序博客网 时间:2024/04/29 18:37
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS滚动</title>
</head>
<style type="text/css">
<!--
ul {
border: 3px double #999;
height: 160px;
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="#" target="_blank"><img src="01.jpg"></a></li>
  <li><a href="#" target="_blank"><img src="02.jpg"></a></li>
  <li><a href="#" target="_blank"><img src="03.jpg"></a></li>
  <li><a href="#" target="_blank"><img src="04.jpg"></a></li>
</ul>
</div>
</body>
</html>
0 0
原创粉丝点击