1. 首页
  2. 卡片 Card
  3. card-page 页面网格

卡片 · card-page 页面网格

卡片家族 索引 base cpanel crumb full page border radius api artic namecode imgs tips total default box checkbox form form-item form-inpselect table pager multipled menubar mode menus tabmenu code json template tab slide paginate tree toggle marquee timeaxis waterfall popup nav chatbox drag choose progress roll
页面化卡片：把卡片内部变成 上(header) / 中(body) / 下(footer) 三行网格（grid-template-rows: max-content auto max-content），中间行自动伸缩。常与 card-full 组合用于固定高度区域。
本页内容 三区网格 page-full：主体滚动 card-fixed 全屏容器

三区网格

头部
中部内容
底部
<div class="card card-page"> <div class="card-head">头部</div> <div class="card-body">中部内容</div> <div class="card-foot">底部</div> </div>

page-full：主体滚动

<div class="card card-page page-full"> <div class="card-head">固定头部</div> <div class="card-body">可滚动主体</div> <div class="card-foot">固定底部</div> </div>

card-fixed 全屏容器

<div class="card card-fixed"> <div class="card-head">全屏标题栏</div> <div class="card-body">全屏滚动主体</div> <div class="card-foot">关闭按钮区</div> </div>
上一张（循环） card-full 满宽分割
下一张 card-border 描边框
KuoqiUI v2.00 · 离线静态文档 · 界面基于 KuoqiUI · 返回首页