别开生面纯CSS实现相册预览
body{
font-size:12px;
color: #CC0000;
}
p {
background-color: #F1FAFE;
}
#gallery {
width:495px;
height:240px;
border: 1px solid #888;
margin:0 auto;
padding:0;
list-style:none;
background:#fff url(/files/080628/1_133958.gif);
}
#gallery li {
float: left;
}
#gallery li a {
display: block;
width: 28px;
height: 240px;
border-right: #fff 1px solid;
overflow: hidden;
cursor: default;
}
#gallery li a img {
border:0;
}
#gallery li a:hover {
width: 320px;
}
#gallery2 {
margin:0 auto;
padding:0;
list-style-type:none;
overflow:hidden;
width:572px;
height:238px;
border:1px solid #000;
background:#fff url(/files/080628/1_134055.gif);
}
#gallery2 li {
float:left;
}
#gallery2 li a {
display:block;
height:30px;
width:572px;
float:left;
overflow: hidden;
text-decoration:none;
border-bottom:1px solid #000;
cursor:default;
}
#gallery2 li a img {
border:0;
}
#gallery2 li a:hover {
background:#eee;
height:144px;
}
#gallery2 li a:hover img {
height:144px;
}
-->
原文地址：Sliding Photograph Galleries
翻译整理：西米CC
[Ctrl A 全部选择 提示：你可先修改部分代码，再按运行]
如果觉得《html图片滚动浏览 ul结合CSS制作网页相册滑动浏览效果》对你有帮助，请点赞、收藏，并留下你的观点哦！
