应使用语义化结构、、、替代div和老式float/table布局，因其更稳定、易维护、适配无障碍与SEO；float易塌陷、table语义错乱且不响应式；四大区块需精准控制定位与尺寸，仪表盘卡片推荐CSS Grid实现自适应列数。
直接用 <header></header> + <nav></nav> + <main></main> + <footer></footer> 四块语义化结构，比套一堆 <div class="xxx"> 更稳、更易维护，也天然适配屏幕阅读器和 SEO。
<h3>为什么不用 float 或 table 布局欢迎页</h3>
<p>老式 <code>float 容易塌陷、清浮动麻烦，table 布局语义错乱、响应式几乎不可行——现代管理系统首页必须支持小屏折叠菜单、侧边栏收起、内容区自适应滚动。用 float 写出来的欢迎页，加个「夜间模式」开关或改个主题色都可能牵一发而动全身。
-
float无法约束高度，.pg-content内容超长时侧边栏常被顶出视口 -
table的colspan/rowspan在动态加载模块（如仪表盘卡片）时极易错位 - 所有主流后台框架（Ant Design、Element UI、Bootstrap 5+）默认禁用
float布局，CSS 类名里已不提供float-left这类支持
欢迎页四大区块的定位与尺寸控制要点
真实部署中，最常出问题的是 <nav></nav> 和 <main></main> 的高度/宽度冲突。比如顶部 <header></header> 高 64px，侧边栏要从 64px 下方开始固定，但又不能挡住底部 <footer></footer>。
-
<header></header>：设height: 64px+position: sticky，不是fixed——避免遮挡下方内容且支持滚动回退 -
<nav></nav>（侧边栏）：用position: fixed+top: 64px+bottom: 0，宽度建议设width: 220px，太窄图标挤，太宽浪费空间 -
<main></main>：必须加margin-left: 220px（匹配侧边栏宽）+padding-top: 64px（避让 header），否则内容会从左上角堆叠出来 -
<footer></footer>：不要设position: fixed，用普通流式布局 +margin-top: auto（配合 flex 容器）更可靠
仪表盘卡片区域怎么嵌进 <main></main> 不变形
欢迎页核心是数据卡片（如「今日订单」「用户增长」），它们若用 display: inline-block 或老式浮动，在不同分辨率下极易换行错位或留白异常。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 用
display: grid最省心：grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))，自动适配 1~4 列 - 每张卡片外层包
<section></section>，别用<div>——方便后续加 ARIA 标签或 JS 模块隔离 <li>卡片内文字用 <code>line-clamp: 2截断，避免标题过长撑开高度；图片统一设object-fit: cover，防止拉伸变形 - 禁止在卡片里写
height: 200px这种死值，改用min-height: 200px+flex-direction: column控制内部元素对齐
真正难的不是画出漂亮卡片，而是让整个 <main></main> 区域能在 1280px 屏幕上显示 3 张、在 iPad 上显示 2 张、在手机上变成单列滚动——这靠的是 grid 的 minmax() 和容器的 padding 配合，而不是媒体查询硬切三套样式。
