水平滑动的图片浏览器

来源:互联网 发布:淘宝页面模板在哪买 编辑:程序博客网 时间:2024/04/30 07:18

以下是较为简单的水平滑动的图片浏览器,主要用CSS来实现的

<!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>无标题文档</title>
<style>
.leng{
width:500px;
overflow:scroll;//如果图片满溢的话,就用滚动条来显示其他的内容。
margin:auto;

}
.images{
width:790px; /*关键在这里,因为将宽度设置为能够容纳所有图片的大小,滚动条才会实现水平滚动条*/
margin:auto;
}


</style>
</head>


<body>
<div class="leng">
<div class="images">
<img src="file:///G|/web/images/4.jpg" width=150px heignt=150px/>
<img src="3.jpg" width=150px heignt=150px/>
<img src="file:///G|/web/images/1.jpg" width=150px heignt=150px/>
<img src="file:///G|/web/images/18.jpg" width=150px heignt=150px/>
<img src="file:///G|/web/images/19.jpg" width=150px heignt=150px/>
</div>
</div>
</body>

</html>



0 0
原创粉丝点击