Demo6：简单图片容器的实现

最新推荐文章于 2024-03-16 21:59:07 发布

ljl_web

最新推荐文章于 2024-03-16 21:59:07 发布

阅读量340

点赞数

分类专栏： HTML入门文章标签：图片容器 overflow

本文链接：https://blog.csdn.net/ljl_web/article/details/50755962

版权

HTML入门专栏收录该内容

15 篇文章 0 订阅

订阅专栏

简单图片容器拉动显示效果的实现

实现效果

这里写图片描述

实现代码

<!DOCTYPE html>
<html>
 <head>
  <title> new document </title>
  <meta charset="utf-8" />
  <style>
    #d1{
        width:500px;
        height:150px;
        border:1px solid #000;
        overflow-x:auto;
    }
    #d1>p{
        width:800px;
        height:100px;
    }
    #d1 p img{
        width:100px;
        height:100px;
        border:1px solid #ddd;
        border-radius:8px;
    }
    #d1 p img:hover{
        border:2px solid #f00;
    }

  </style>
 </head>

 <body>
    <div id="d1">
        <p>
            <img src="a.png" />
            <img src="b.png" />
            <img src="c.png" />
            <img src="d.png" />
            <img src="e.png" />
            <img src="f.png" />
            <img src="g.png" />
        </p>
    </div>
 </body>
</html>