html + css 自适应首页布局案例

文章目录

前言
一、组成
二、代码
- 1. css 样式
- 2. body 内容
- 3.全部整体
三、效果

前言

一个自适应的html布局

一、组成

整体居中，宽度1200px，小屏幕宽度100%

二、代码

1. css 样式

代码如下（示例）：

<style>
      * {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        font-family: Arial, sans-serif;
      }

      .header {
        background-color: #f1f1f1;
        padding: 10px;
        text-align: center;
        margin: 0 auto;
        /* 水平居中 */
        max-width: 1200px;
        /* 最大宽度为1200px */
        width: 100%;
        /* 宽度为100% */
      }

      .content {
        display: flex;
        flex-wrap: wrap;
        /* 允许子元素换行 */
        margin: 0 auto;
        /* 水平居中 */
        max-width: 1200px;
        /* 最大宽度为1200px */
        width: 100%;
        /* 宽度为100% */
      }

      .left,
      .right {
        padding: 20px;
        min-height: 300px;
        /* 可以根据需要调整高度 */
      }

      .left {
        background-color: #ccc;
        flex: 1;
        /* 默认占据剩余空间 */
      }

      .right {
        background-color: #ddd;
        flex: 1;
        /* 默认占据剩余空间 */
      }

      @media (max-width: 1199px) {

        .left,
        .right {
          flex: 100%;
          /* 当屏幕宽度小于1200px时，左右两侧各占100%宽度 */
        }
      }

该处使用的css布局。

2. body 内容

代码如下（示例）：

<body>
    <div class="header">
      <h1>导航栏</h1>
    </div>
    <div class="content">
      <div class="left">
        <h2>左侧内容</h2>
        <p>这里是左侧的内容区域。</p>
      </div>
      <div class="right">
        <h2>右侧内容</h2>
        <p>这里是右侧的内容区域。当屏幕尺寸变小时，我会移动到左下方。</p>
      </div>
    </div>
  </body>

该处使用div组成。

3.全部整体

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式布局示例</title>
    <style>
      * {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        font-family: Arial, sans-serif;
      }

      .header {
        background-color: #f1f1f1;
        padding: 10px;
        text-align: center;
        margin: 0 auto;
        /* 水平居中 */
        max-width: 1200px;
        /* 最大宽度为1200px */
        width: 100%;
        /* 宽度为100% */
      }

      .content {
        display: flex;
        flex-wrap: wrap;
        /* 允许子元素换行 */
        margin: 0 auto;
        /* 水平居中 */
        max-width: 1200px;
        /* 最大宽度为1200px */
        width: 100%;
        /* 宽度为100% */
      }

      .left,
      .right {
        padding: 20px;
        min-height: 300px;
        /* 可以根据需要调整高度 */
      }

      .left {
        background-color: #ccc;
        flex: 1;
        /* 默认占据剩余空间 */
      }

      .right {
        background-color: #ddd;
        flex: 1;
        /* 默认占据剩余空间 */
      }

      @media (max-width: 1199px) {

        .left,
        .right {
          flex: 100%;
          /* 当屏幕宽度小于1200px时，左右两侧各占100%宽度 */
        }
      }
    </style>
  </head>
  <body>
    <div class="header">
      <h1>导航栏</h1>
    </div>
    <div class="content">
      <div class="left">
        <h2>左侧内容</h2>
        <p>这里是左侧的内容区域。</p>
      </div>
      <div class="right">
        <h2>右侧内容</h2>
        <p>这里是右侧的内容区域。当屏幕尺寸变小时，我会移动到左下方。</p>
      </div>
    </div>
  </body>
</html>