2401_85320769 2024-05-27 17:51 采纳率: 0%
浏览 3

用html写出四行三列的页面布局

请写出一个四行三列的页面布局。

要求：整个页面居中，整体宽度为900px，左边栏宽度为300px，左边栏与主体内容栏中间有5px空隙。

      各个部分使用不同的背景颜色分隔。
  • 写回答

2条回答 默认 最新

  • 专家-赤兔[在线] 全栈领域优质创作者 2024-05-27 17:51
    关注

    引自免费微信小程序：皆我百晓生

    为了实现这个布局，我们可以使用HTML结构和CSS样式。以下是详细的代码示例：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-family: Arial, sans-serif;
        }

        .container {
            width: 900px;
            display: grid;
            grid-template-columns: 300px 1fr;
            grid-gap: 5px;
            background-color: #f2f2f2;
            padding: 20px;
        }

        .left-sidebar {
            grid-column: 1 / 2;
            background-color: #e6e6e6;
        }

        .main-content {
            grid-column: 2 / -1;
            background-color: #ffffff;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left-sidebar">
            <!-- 左侧栏内容 -->
            <h2>新媒体运营</h2>
            <p>这里是左侧栏的一些信息...</p>
        </div>
        <div class="main-content">
            <!-- 主体内容栏 -->
            <h2>主体内容标题</h2>
            <p>这里是主体内容区域...</p>
        </div>
    </div>
</body>
</html>

    这段代码创建了一个四行三列的页面布局。整个页面被包含在一个名为.container的div中，它是一个网格容器，具有两列（一个固定宽度的左侧栏和一个自适应宽度的主体内容栏）。左侧栏宽度为300px，并且与主体内容栏之间有5px的间隙。页面内容在垂直方向上居中对齐，整体宽度为900px。每个部分都有不同的背景颜色以区分它们。

    这是一个简单的布局示意图：

    +------------------------+
|                         |
|   +---------+           |
|   |  Left   |  Main     |
|   |  Bar    |  Content  |
|   +---------+           |
|   +-------------------+
|                         |
|                         |
+------------------------+

    这里没有具体的文本内容，你可以根据实际需求替换相应的文字和图片等内容。

    评论 编辑记录

报告相同问题？

问题事件

  • 创建了问题 5月27日

悬赏问题

  • ¥15 如何在vue.config.js中读取到public文件夹下window.APP_CONFIG.API_BASE_URL的值
  • ¥50 浦育平台scratch图形化编程
  • ¥20 求这个的原理图 只要原理图
  • ¥15 vue2项目中，如何配置环境，可以在打完包之后修改请求的服务器地址
  • ¥20 微信的店铺小程序如何修改背景图
  • ¥15 UE5.1局部变量对蓝图不可见
  • ¥15 一共有五道问题关于整数幂的运算还有房间号码 还有网络密码的解答？(语言-python)
  • ¥20 sentry如何捕获上传Android ndk 崩溃
  • ¥15 在做logistic回归模型限制性立方条图时候，不能出完整图的困难
  • ¥15 G0系列单片机HAL库中景园gc9307液晶驱动芯片无法使用硬件SPI+DMA驱动，如何解决？