复刻网页 能按照浏览器大小适应

img


3.1 使用技术：div+css。
3.2 要求将所有css写在单独的文件中，由css文件夹存储。
3.3 要求将所有图片存储在一个文件夹中，并且按照名称有序摆放。
3.4 要求所有内容能按照浏览器大小自适应。

-

用bootstrap实现：

<div class="container">
   <div class="row">
      <div class="col-md-2 col-12"> <!-- 左侧2列 /-->
         <div class="row">
            <div class="col-12"> <!-- 左上角单元格 /-->
               Left Top
            </div>
         </div>
         <div class="row">
            <div class="col-12"> <!-- 左下角单元格 /-->
               Left Bottom
            </div>
         </div>
      </div>
      <div class="col-md-10 col-12"> <!-- 右侧3列 /-->
         <div class="row">
            <div class="col-4"> <!-- 右上角单元格 /-->
               Right Top 1
            </div>
            <div class="col-4"> <!-- 右上角单元格 /-->
               Right Top 2
            </div>
            <div class="col-4"> <!-- 右上角单元格 /-->
               Right Top 3
            </div>
         </div>
         <div class="row">
            <div class="col-12"> <!-- 右下角单元格 /-->
               Right Bottom
            </div>
         </div>
      </div>
   </div>
</div>



/* Reset some default styles */
body, h1, h2, p, ul, li {
  margin: 0;
  padding: 0;
}

/* Basic styling */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

header, nav, main, footer {
  padding: 20px 0;
}

nav ul {
  list-style: none;
  display: flex;
}

nav li {
  margin-right: 20px;
}

/* Responsive styles */
@media screen and (max-width: 768px) {
  nav ul {
    flex-direction: column;
  }

  nav li {
    margin-right: 0;
    margin-bottom: 10px;
  }
}

/* Image styling */
.image img {
  max-width: 100%;
  height: auto;
}

如果直接使用div+css3 实现自适应的话，还是比较麻烦的，推荐使用 vant、bootstrap 前端框架实现

参考gpt：
结合自己分析给你如下建议：
要使用div+css技术，您需要以下几个步骤：
在HTML文件中，使用

标签来创建不同的区域或部分，比如头部、导航栏、内容、底部等，并为每个
元素添加一个class或id属性，以便于后续的样式设置。
在CSS文件中，使用class选择器或id选择器来为不同的
元素指定样式规则，比如宽度、高度、背景色、边框、对齐方式等。
在HTML文件中，使用标签来引用CSS文件，使得CSS样式能够应用到HTML元素上。
为了满足您的要求，您还需要注意以下几点：
将所有CSS代码写在一个单独的文件中，并将该文件放在一个名为css的文件夹中。在HTML文件中，使用相对路径来引用该文件，比如。
将所有图片存储在一个名为images的文件夹中，并按照名称有序摆放。在CSS文件中，使用相对路径来引用图片，比如background-image: url("images/logo.png");。
为了使网页能够按照浏览器大小自适应，您可以使用百分比或者视口单位来指定
元素的宽度和高度，而不是使用像素或者其他绝对单位。比如width: 80%;或者height: 50vh;

bootstrap手写吧

推荐您直接使用前端代码生成器，直接有布局和css代码

看浏览器的设置中的UA标识




```<div class="container">
   <div class="row">
      <div class="col-md-2 col-12"> <!-- 左侧2列 /-->
         <div class="row">
            <div class="col-12"> <!-- 左上角单元格 /-->
               Left Top
            </div>
         </div>
         <div class="row">
            <div class="col-12"> <!-- 左下角单元格 /-->
               Left Bottom
            </div>
         </div>
      </div>
      <div class="col-md-10 col-12"> <!-- 右侧3列 /-->
         <div class="row">
            <div class="col-4"> <!-- 右上角单元格 /-->
               Right Top 1
            </div>
            <div class="col-4"> <!-- 右上角单元格 /-->
               Right Top 2
            </div>
            <div class="col-4"> <!-- 右上角单元格 /-->
               Right Top 3
            </div>
         </div>
         <div class="row">
            <div class="col-12"> <!-- 右下角单元格 /-->
               Right Bottom
            </div>
         </div>
      </div>
   </div>
</div>