HTML中如何在大盒子包含的小盒子中添加滚动条

最新推荐文章于 2024-07-22 13:57:13 发布

朱哈哈O_o

最新推荐文章于 2024-07-22 13:57:13 发布

阅读量155

点赞数 3

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/m0_74220769/article/details/137739562

版权

可以使用<iframe></iframe>标签来实现

<div class="item" id="hot">
        <iframe src="hot.html" class="hot-iframe"></iframe>
    </div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
      @keyframes fadeInUpOut {
          0% {
              opacity: 0;
              transform: translateY(100%);
          }
          100% {
              opacity: 1;
              transform: translateY(0);
          }
      }
    #hot{
      grid-column: span 4;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      grid-gap: 20px;
      /*width: 630px;*/
      /*overflow-x: auto; !* 当内容超出盒子高度时，添加垂直滚动条 *!*/
      /*white-space: nowrap; !* 防止内容换行 *!*/
    }
    /*#hot .hot-item{*/
    /*    display: inline-block; !* 使每个项目内联显示，不会换行 *!*/
    /*    margin-right: 10px; !* 每个项目之间的间距 *!*/
    /*    !* 可以根据需要添加其他样式 *!*/
    /*}*/
    .hot-item {
      border: 1px solid #ccc;
      padding: 10px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      overflow: hidden; /* 防止动画导致内容溢出 */
    }

    .hot-image01 {
      width: 100%;
      height: auto;
      transition: transform 0.5s ease; /* 动画过渡效果 */
    }

    .hot-image01:hover {
      transform: scale(1.1); /* 图片放大效果 */
      /* 你可以添加其他动画效果，如 rotate、translate 等 */
    }

    .hot-image02 {
      width: 100%;
      height: auto;
      transition: transform 0.5s ease; /* 动画过渡效果 */
    }

    .hot-image02:hover {
      /* 鼠标悬停时应用旋转效果 */
      transform: rotate(360deg); /* 旋转360度，即一整圈 */
    }
    .hot-image03 {
      width: 100%;
      height: auto;
      animation: fadeInUpOut 4s ease-in-out forwards; /* 动画时间设为5秒 */
    }
    .hot-title {
      margin-top: 10px;
      font-size: 18px;
      font-weight: bold;
    }

    .hot-summary {
      margin-top: 5px;
      font-size: 14px;
      color: #666;
    }

    .hot-time {
      margin-top: 5px;
      font-size: 12px;
      color: #999;
    }
  </style>
</head>
<body>
  <div class="item" id="hot">
            <div class="hot-item">
                <img class="hot-image01" src="image/city04.jpg" alt="News Image 1">
                <h2 class="hot-title">哈尔滨</h2>
                <p class="hot-summary">房屋大小以及相应设施</p>
                <p class="hot-time">发布时间：2021-09-01</p>
            </div>
            <div class="hot-item">
                <img class="hot-image02" src="image/city03.jpg" alt="News Image 2">
                <h2 class="hot-title">云南</h2>
                <p class="hot-summary">云南房子周边环境。</p>
                <p class="hot-time">发布时间：2022-01-29</p>
            </div>
            <div class="hot-item">
                <img class="hot-image03" src="image/city05.jpg" alt="News Image 3">
                <h2 class="hot-title">北京</h2>
                <p class="hot-summary">北京最近的房价处于什么趋势。</p>
                <p class="hot-time">发布时间：2023-10-23</p>
            </div>
      <div class="hot-item">
          <img class="hot-image01" src="image/city06.jpg" alt="News Image 3">
          <h2 class="hot-title">重庆</h2>
          <p class="hot-summary">重庆发展怎么样</p>
          <p class="hot-time">发布时间：2024-01-02</p>
      </div>
      <div class="hot-item">
          <img class="hot-image02" src="image/city07.jpg" alt="News Image 3">
          <h2 class="hot-title">湖南</h2>
          <p class="hot-summary">湖南就业情况</p>
          <p class="hot-time">发布时间：2021-05-01</p>
      </div>
      <div class="hot-item">
          <img class="hot-image03" src="image/city08.jpg" alt="News Image 3">
          <h2 class="hot-title">上海</h2>
          <p class="hot-summary">房子地理位置如何？</p>
          <p class="hot-time">发布时间：2023-11-09</p>
      </div>
  </div>
</body>
</html>

将需要用滚动条展示的部分建立成一个新的界面，然后再将这个新界面放入<iframe></iframe>标签中，如何将<iframe></iframe>标签放入大盒子中，然后通过使用CSS调节从而达到自己想展示的画面大小。

运行后的结果是