【Web·基础学习】基础布局

需要注意知识

须知

普通元素（默认 display: block）里的内容是从上到下排列的。

加上 display: flex; 之后，这个元素就变成了 Flex 布局容器，里面的子元素可以用更灵活的方式排列和居中。

属性	默认值	效果
display: flex;	-	变成弹性布局
flex-direction: row;	默认就是这个	从左到右排列
flex-direction: column;	需要手动写	从上到下排列

CSS样式说明

标签选择器：全局修改引用界面对应的标签属性
calss选择器：可以支持自定义标签
id选择器：可以修改特定的样式

属性	含义	说明
`<link>`	HTML 标签	用来引入外部资源（这里是样式表）
rel="stylesheet"	关系类型	明确告诉浏览器：这是一个样式表（stylesheet）
type="text/css"	文件类型	声明这是 CSS 文件（现代 HTML5 中可省略，浏览器默认就是 CSS）
href="css/MyLaout.css"	文件路径	指向 CSS 文件的位置（相对路径）

支持多样式CSS文件引用

复制代码

<link rel="stylesheet" href="css/reset.css">      <!-- 重置样式 -->
<link rel="stylesheet" href="css/common.css">     <!-- 公共样式 -->
<link rel="stylesheet" href="css/index.css">      <!-- 当前页面样式 -->

代码

简单的代码模块

HTML

html 复制代码

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <meta name="description" content="描述在这里" />
    <meta name="keywords" content="HTML, 初始化, 模板" />
    <meta name="author" content="Your Name" />

    <title>我的练习</title>

    <!-- 引入外部 CSS -->
    <link rel="stylesheet" href="css/MyLaout.css" />

    <!-- 使用 defer：DOM 解析完成后按顺序执行，不阻塞页面渲染 -->
    <!-- <script src="js/main.js" defer></script> -->
  </head>

  <body>
    <header></header>
    <div class="frame">
      <div class="top_frame">
        <div class="top_left">Left</div>
        <div class="top_right">
          <span class="itme2">Right</span>
          <div class="itme2 itme">Item 1</div>
          <div class="itme">Item 2</div>
          <div class="itme">Item 3</div>
        </div>
      </div>

      <div class="bottom_frame">
        <div class="top_right">
          上的发生的<br />sdf<br />s<br />dfs<br /><br />
          <span class="itme" style="margin-left: 0; max-width: 100px">Top</span>
        </div>
        <div class="top_left">under</div>
      </div>
    </div>

    <footer>
      <p>© 2026 示例</p>
    </footer>

    <script>
      // 自动设置范围
      function setScale() {
        const design = document.getElementById("design");
        const designWidth = 1920;
        const designHeight = 1080;

        // 获取当前窗口宽高
        const windowWidth = window.innerWidth;
        const windowHeight = window.innerHeight;

        // 计算缩放比例（取较小值，保证完整显示）
        const scaleX = windowWidth / designWidth;
        const scaleY = windowHeight / designHeight;
        const scale = Math.min(scaleX, scaleY);

        // 应用缩放并居中
        design.style.transform = `scale(${scale}) translate(-50%, -50%)`;
      }

      // 初始化 + 窗口变化时重新计算
      setScale();
      window.addEventListener("resize", setScale);
    </script>
  </body>
</html>

CSS文件

项目里的完整路径：ss/MyLaout.css

css 复制代码

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 /* 默认（桌面） */
 .desktop {
     display: block;
 }

 .mobile {
     display: none;
 }

 /* 手机屏幕时切换 */
 @media (max-width: 768px) {
     .desktop {
         display: none;
     }

     .mobile {
         display: block;
     }
 }

 /* 让body全屏*/
 html,
 body {
     width: 100%;
     height: 100%;
     /* 或 min-height: 100vh; */
     margin: 0;
     padding: 0;
     background-color: rgb(163, 177, 232);
     /* 防止出现滚动条 */
     overflow: hidden;

 }

 /* 设计稿容器：固定 1920 × 1080 */
 .design {
     width: 1920px;
     height: 1080px;
     position: absolute;
     top: 50%;
     left: 50%;
     transform-origin: left top;
     background: #1a1a1a;
     /* 你的页面背景色 */
     /* 这里放你原来的布局 */
 }

 .frame {
     display: flex;
     flex-direction: column;
     border: 3px solid #ffffff;
     background-color: rgb(124, 232, 232);
     height: 100%;
 }

 .top_frame {
     display: flex;
     flex: 1;
     width: 100%;
     height: 100%;
     border: 3px solid #ffffff;
     background-color: rgb(48, 2, 232);
 }

 .bottom_frame {
     display: flex;
     flex-direction: column;
     /* 子元素竖着排 */
     flex: 1;
     height: 100%;
     border: 3px solid #ffffff;
     background-color: #698beb;
 }



 .top_left {
     flex: 1;
     display: flex;
     background-color: blueviolet;
     font-size: 23px;
     font-weight: bold;
     border: 2px solid #ffffff;
     justify-content: center;
     align-items: center;
 }

 .top_right {
     display: flex;
     /* 自动填充剩余空间 */
     flex: 1;
     border: 2px solid #ffffff;
     background-color: rgb(65, 74, 241);
     /* 水平居中 */
     justify-content: center;
     /* 垂直居中 */
     align-items: center;
 }



 .itme {
     flex: 1;
     background-color: #9fe867;
     margin-left: 10px;
     color: #4604e0;
     font-size: 23px;
     text-align: center;
     border: 2px solid #000000;
 }

 .itme2 {
     color: #eb0a0a;
 }