前端常见布局实例

最新推荐文章于 2024-09-05 15:49:53 发布

菠萝君～

最新推荐文章于 2024-09-05 15:49:53 发布

阅读量127

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/coffee_nice/article/details/134104792

版权

一、CSS3瀑布布 局

瀑布布局，设置固定宽度，高度随图片自身自适应，是的页面每部分高度不一致像瀑布一下瀑下来的布局。

多用于视频，图片布局。

1.1HTML部分

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./index.css" />
  </head>
  <body>
    <div class="box">
      <div>
        <img
          src="https://liblibai-online.vibrou.com/web/image/f7f4d02595d9901eee55fdc0634edba68f3317558e6c1f6aa17ae2d3b4176311.png?x-oss-process=image/resize,w_608,m_lfit/format,webp"
          alt=""
        />
      </div>
      <div>
        <img
          src="https://liblibai-online.vibrou.com/web/image/dd025e77195cd34f391dfdd7456b2c0823864a0d9fd93b0a9756adb8cd0c6977.jpg?x-oss-process=image/resize,w_608,m_lfit/format,webp"
          alt=""
        />
      </div>
      <div>
        <img
          src="https://liblibai-online.vibrou.com/web/image/7ee865ad7eff33a19f78cdd8fc2f4c5aace8414096f55df6b1f3f7cf834a1f38.jpg?x-oss-process=image/resize,w_608,m_lfit/format,webp"
          alt=""
        />
      </div>
      <div>
        <img
          src="https://liblibai-online.vibrou.com/web/image/d9014177f69286917ea6330fc999dbd4db65721178cbf08e786ad31d93b9a230.png?x-oss-process=image/resize,w_608,m_lfit/format,webp"
          alt=""
        />
      </div>
      <div>
        <img
          src="https://liblibai-online.vibrou.com/web/image/a0d6ae2552e46cb71236d9cc621bc504d4b93c68c0962bc505e822e8cb598504.png?x-oss-process=image/resize,w_608,m_lfit/format,webp"
          alt=""
        />
      </div>
      <div>
        <img
          src="https://liblibai-online.vibrou.com/web/image/8a15f7c8da74d736d00f8ed565695cf5c8bf020d8fa6b63eaa44f2412c1f74ae.png?x-oss-process=image/resize,w_608,m_lfit/format,webp"
          alt=""
        />
      </div>
      <div>
        <img
          src="https://liblibai-online.vibrou.com/web/image/8a15f7c8da74d736d00f8ed565695cf5c8bf020d8fa6b63eaa44f2412c1f74ae.png?x-oss-process=image/resize,w_608,m_lfit/format,webp"
          alt=""
        />
      </div>
      <div>
        <img
          src="https://liblibai-online.vibrou.com/web/image/acda57c9c3c6ff2fbec7e29aeac22215fc37115eedcfbf01c5e65b43b1957aab.png?x-oss-process=image/resize,w_608,m_lfit/format,webp"
          alt=""
        />
      </div>
      <div>
        <img
          src="https://liblibai-online.vibrou.com/web/image/156d4311fd8e1abb683ca259e6e9ee759ce4bb3538856c1ef62ab2aabb7f50d7.png?x-oss-process=image/resize,w_608,m_lfit/format,webp"
          alt=""
        />
      </div>
      <div>
        <img
          src="https://liblibai-online.vibrou.com/web/image/41c9a7ac9edd68870f608b6eb857ebc368fdb9ef45a31793c69048df4bc6ae38.png?x-oss-process=image/resize,w_608,m_lfit/format,webp"
          alt=""
        />
      </div>
    </div>
  </body>
</html>

1.2.CSS部分


* {
  margin: 0px 0px;
  padding: 0px 0px;
}

.box {
  width: 100%;
  text-align: center;
  /* css3新特性 设置一排元素个数  设置每个元素的间隔 */
 column-count: 4;   
  column-gap: 10px;
}
img {
  width:400px;
}

1.3页面效果展示

二、网格宫格布局

能根据设备的大小进行自适应的调整，页面不会失调。

多用于需要进行自适应布局的地方，方便简单快捷。

1.1 HTML部分

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="grid">
      <div style="background-color: rgb(15, 215, 15)">1</div>
      <div style="background-color: aqua">2</div>
      <div style="background-color: rgb(217, 30, 105)">3</div>
      <div style="background-color: rgb(212, 183, 17)">4</div>
      <div style="background-color: rgb(210, 43, 115)">5</div>
      <div style="background-color: rgb(106, 28, 215)">6</div>
      <div style="background-color: rgb(27, 126, 207)">7</div>
      <div style="background-color: rgb(120, 197, 197)">8</div>
      <div style="background-color: rgb(123, 215, 31)">9</div>
    </div>
  </body>
</html>

1.2CSS部分

grid-template-columns: repeat(3, 1fr);

grid-template-rows: repeat(3, 1fr);

设置每个子元素平均分配父元素，一个子元素占一份，一共三份。

columns设置列 rows设置行

<style>
      .grid {
        width: 300px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 1fr);
        /* grid-gap: 10px; */
        /* grid-gap: 10px 20px; */
        /* grid-gap: 10px 20px 30px; */
        grid-gap: 10px 20px 30px 40px;
        text-align: center;
      }
      .grid div {
        line-height: 100px;
        width: 100px;
        height: 100px;
      }
    </style>