IMLC
Home/html/layout-desktop-app
Article

布局 - 桌面端应用的 工具栏-边栏-内容区-状态栏 布局

L
Lawrence
|Reading time

布局 - 桌面端应用的 工具栏-边栏-内容区-状态栏 布局

本教程假设你已经基本了解了 CSS Grid 布局

**实现思路**

使用 CSS Grid 的 `grid-template-areas` 定义区域布局 然后使用 `grid-area` 将元素分配到对应区域

第一步: 创建 Grid 容器

设置容器为 `display: grid`，并定义行列尺寸。

css 
body {
    margin: 0;
    height: 100vh;
    display: grid;
    grid-template-rows: 48px 1fr 24px;
    grid-template-columns: 240px 1fr;
}

第二步: 定义布局区域

使用 `grid-template-areas` 定义区域名称和布局结构。

css 
body {
    margin: 0;
    height: 100vh;
    display: grid;
    grid-template-rows: 48px 1fr 24px;
    grid-template-columns: 240px 1fr;
    grid-template-areas: 
        "header header"
        "sidebar main"
        "footer footer";
}

第三步: 应用区域样式

使用 `grid-area` 将元素分配到对应区域，并添加样式。

css 
.header {
    grid-area: header;
    background-color: #f3f3f3;
    border-bottom: 1px solid #d1d1d1;
}

.sidebar {
    grid-area: sidebar;
    background-color: #333333;
    border-right: 1px solid #1e1e1e;
}

.main {
    grid-area: main;
    background-color: #ffffff;
}

.footer {
    grid-area: footer;
    background-color: #007acc;
    border-top: 1px solid #005a9e;
}