改页面布局，不懂页面布局（大一知识）

这个页面怎么改成下面这样
不懂11111111111111

1111111
css


/* 改变主题色变量 */
$--color-primary: #5df1ac;

/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';

@import "~element-ui/packages/theme-chalk/src/index";

布局

</style>
<style lang="scss" scoped>
.home {
  overflow: hidden;
  padding-bottom: 50px;
  .reason {
    padding-top: 70px;
    padding-bottom: 80px;
    text-align: center;
    .top {
      position: relative;
      display: inline-block;
      font-size: 36px;
      color: #133b28;
      font-weight: bold;
      .line {
        position: absolute;
        opacity: 0.2;
        background: #1e4c35;
        width: 582px;
        height: 1px;
        top: 26px;
        &.line-l {
          right: 460px;
        }
        &.line-r {
          left: 460px;
        }
      }
    }
    .intro {
      font-size: 24px;
      color: #252525;
      line-height: 38px;
      padding-top: 36px;
    }
    .icons {
      width: 1200px;
      margin: 0 auto;
      padding: 90px 60px 0;
      .part {
        width: 160px;
        margin: 0 100px;
        .part-top {
          width: 100%;
          height: 160px;
          line-height: 160px;
          opacity: 0.3;
          background: #133b28;
          box-shadow: 0 0 8px 0 #133b28;
          border-radius: 100%;
          text-align: center;
          margin-bottom: 16px;
          &.second {
            opacity: 1;
          }
          &.third {
            opacity: 0.5;
          }
        }
        .part-title {
          font-size: 18px;
          color: #133b28;
        }
      }
    }
  }
  .header {
    height: 80px;
    line-height: 80px;
    border-bottom: 2px solid #133b28;
    padding: 0 20px;
    font-weight: bold;
    margin-bottom: 40px;
    .fl {
      font-size: 36px;
      color: #555555;
    }
    .fr {
      font-size: 24px;
      color: #133b28;
    }
  }
  .review,
  .news {
    background: #ffffff;
    box-shadow: 0 0 8px 0 rgba(19, 59, 40, 0.25);
    padding-top: 20px;
    .lists {
      padding: 0 15px;
      .list {
        width: 370px;
        margin: 0 10px 40px;
        .list-poster {
          width: 100%;
          height: 200px;
          border-radius: 10px;
          overflow: hidden;
          a {
            display: block;
            width: 100%;
            height: 100%;
            position: relative;
            img {
              width: 100%;
              height: 100%;
            }
            .list-brief {
              width: 100%;
              position: absolute;
              bottom: -100px;
              left: 0;
              padding: 10px;
              background-image: linear-gradient(
                -180deg,
                rgba(19, 59, 40, 0.5) 0%,
                #133b28 100%
              );
              color: #ffffff;
              line-height: 18px;
              transition: all 0.3s;
            }
            &:hover {
              .list-brief {
                bottom: 0;
              }
            }
          }
        }
        .list-msg {
          padding: 10px 10px 0;
          .list-title {
            font-size: 18px;
            color: #133b28;
            font-weight: bold;
          }
          .list-info {
            margin-top: 6px;
            .fl {
              opacity: 0.3;
            }
            .fr {
              width: 58px;
              height: 18px;
              line-height: 18px;
              text-align: center;
              border: 1px solid #133b28;
              font-size: 12px;
            }
          }
        }
      }
    }
  }
  .teachers {
    padding-top: 20px;
    padding-bottom: 40px;
    .teachers-lists {
      width: 1348px;
      margin: 0 auto;
      .teachers-list {
        padding: 0 90px;
        .item {
          display: block;
          width: 270px;
          height: 493px;
          margin: 0 11px;
          background: #ffffff;
          box-shadow: 0 0 8px 0 rgba(30, 76, 53, 0.25);
          border-radius: 10px;
          overflow: hidden;
          .avator {
            width: 100%;
            height: 236px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .intro {
            padding: 30px 20px 0;
            .name {
              color: #133b28;
              font-size: 18px;
              font-weight: bold;
              margin-bottom: 20px;
            }
            .brief {
              color: #666666;
              line-height: 40px;
            }
          }
        }
      }
    }
  }
  .news {
    padding-bottom: 30px;
    .loadmore {
      width: 370px;
      height: 48px;
      line-height: 48px;
      margin: 0 auto;
      border: 2px solid #133b28;
      border-radius: 10px;
      text-align: center;
      font-size: 18px;
      color: #133b28;
      cursor: pointer;
    }
  }
}
@media screen and (max-width: 1348px) {
  .home {
    .teachers {
      .teachers-lists {
        width: 1200px;
        .teachers-list {
          padding: 0 16px;
        }
      }
    }
  }
}
</style>

需要源码的可以发源文件

代码看下

你可参考这个实例讲解：https://blog.csdn.net/weixin_42504145/article/details/82795076?spm=1001.2101.3001.6650.9&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-9-82795076-blog-79485607.235%5Ev36%5Epc_relevant_default_base3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-9-82795076-blog-79485607.235%5Ev36%5Epc_relevant_default_base3&utm_relevant_index=10

该回答引用GPT与博主@晓码自在合作编写：

改变页面布局主要有以下几个方面:

改变元素显示方式:内联、块级或内联块元素。可以通过设置display样式改变元素类型。

css
display: inline;     /* 设置内联元素 */ 
display: block;      /* 设置块级元素 */
display: inline-block; /* 设置内联块元素 */

改变元素位置:通过设置position与top、bottom、left、right等样式可以改变元素位置。

css
position: static;    /* 默认位置 */ 
position: relative;  /* 相对位置 */
position: absolute;  /* 绝对位置 */ 
position: fixed;     /* 固定位置 */

top: 0;             /* 距上方距离 */ 
bottom: 0;          /* 距下方距离 */  
left: 0;            /* 距左方距离 */
right: 0;           /* 距右方距离 */

使用浮动改变布局:通过设置float样式可以使元素浮动,并影响周围元素位置和显示。常用的有left、right和none。

css 
float: left;      /* 左浮动 */
float: right;     /* 右浮动 */ 
float: none;      /* 默认不浮动 */

修改宽高:通过设置width、height、min-width、max-width、padding等样式可以改变元素大小,影响布局。
修改外边距和内边距:通过设置margin和padding可以改变元素之间和内部的间距,进而改变布局。
使用盒模型:通过设置box-sizing为border-box,可以让设置的width和height包含内边距和边框,简化布局处理。
利用Flexbox或Grid等新布局方案:这些布局方案可以轻松实现复杂布局,是目前页面布局的主流方案。
使用媒体查询实现响应式:通过设置不同屏幕宽度的样式,可以实现元素在不同设备上的最佳布局。

综上,改变页面布局的手段主要有:改变元素类型、设置定位、使用浮动、修改大小尺寸、设置间距、Flexbox与Grid布局、媒体查询等。可以根据需求选择使用以上一种或多种手段来实现页面的布局调整。

学 flex gird 定位这三会一个肯定可以解决

flex布局就好了。直接搜索一下flex布局

flex布局可解决
也可以使用display属性修改为行内块级元素
也可以使用position属性进行定位解决
也可以考虑引入bootstrap处理

首先你把页面布局的相关css学习一下，其次就是学会在浏览器中调试，打开f12，自己根据需求修改样式，看样式的变化。

对于上面这个列表，如果你的html代码是这样的

<div class="review-container">
<a v-for="...">
  <img src="...">
</a>
</div>

那么scss这么写

.review-container {
display: flex;
justify-content: space-around; // 也可以设置成space-between，但注意设置margin或者padding,距离自己判断
       & > a {
display:flex;
justify-content: center;
align-items: center;
width: 60px; //  宽高你自己设置
height: 60px;
    & > img {
  width: 50%; //  宽高你自己设置
height: 50%;
}    
}
}

对于下面这个列表是存在换行的，html结构这么写

<div class="class-container">
<div v-for="...">
    <a > 
        <img src="...">
        <h5>标题</h5>
       ...
    </a>
</div>
</div>

scss这么写

.class-container {
width: 100%;
    display: flex;
flex-wrap: wrap;
& > div {
width: calc(100% / 3);
padding: 15px;
  & > a {
width: 100%;
display: block;
    & > img{
width: 100%;
height: ...; // 自己设置高度，不设置的话就是按比例来，如果你的图片像素宽高比都一样，那么就推荐不设置高度，如果宽高比不同，则需要设置高度，来保证各个容器高度一致
}
 & > h5 {
height: ...;  // 要让高度一致，同样需要设置高度值，且需要设置overflow:hidden;
}

}
}
}