SAP Spartacus b2b 页面 banner 的grid layout设计
SAP 设计 页面 Spartacus Grid layout B2B Banner
2023-09-14 09:02:54 时间
如下图所示:
每个banner里的a标签,都应用了grid layout模型:
this element behaves like a block element and lays out its content according to the grid model.
In HTML programming, a block-level element is any element that starts a new line (e.g., paragraph) and uses the full width of the page or container. A block-level element can take up one line or multiple lines and has a line break before and after the element.
a标签里包含三个元素:
grid layout模型的例子:
<!DOCTYPE html>
<html>
<head>
<style>
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
display: grid;
grid-template-areas:
'header header header header header header'
'menu main main main right right'
'menu footer footer footer footer footer';
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Grid Layout</h1>
<p>This grid layout contains six columns and three rows:</p>
<div class="grid-container">
<div class="item1">Header</div>
<div class="item2">Menu</div>
<div class="item3">Main</div>
<div class="item4">Right</div>
<div class="item5">Footer</div>
</div>
</body>
</html>
最终效果:
更多Jerry的原创文章,尽在:“汪子熙”:
相关文章
- 测试 SAP 电商云 Spartacus UI 3.4.x 和 4.3.x 的 guest checkout 功能
- SAP UI5 的规则构建器控件介绍
- SAP操作小技巧
- SAP UI5 sap.ui.export.Spreadsheet API 介绍
- 使用 SAP UI5 sap.ui.export.Spreadsheet API 进行 Excel 导出的一些限制
- SAP UI5 sap.ui.Device.media.RANGESETS 的使用介绍
- SAP UI5 sap.ui.Device.media 的使用介绍
- SAP UI5 sap.ui.Device.media.initRangeSet 方法的单步调试
- SAP Spartacus UI 通过 HTTP Interceptor 给请求添加 Authorization 字段的源代码分析
- 将SAP系统迁移到云上? 同时带上您的存档数据
- SAP 电商云 Spartacus UI External Route 的模块实现概述
- SAP OData 框架里的缓存(Cache)设计专题讲座试读版
- SAP UI5 sap.m.Table 实现响应式布局的两种配置模式
- SAP UI5 index.html 里的 bootstrap script 介绍
- Oracle购买SAP: 开启新数据时代(oracle收购sap)
- SAP MM TCODE详解编程语言
- SAP SD订单状态详解编程语言
- SAP MM模块常用表总结详解编程语言
- SAP 库存相关表格详解编程语言
- SAP错误处理总结详解编程语言
- SAP一句话入门-SD详解编程语言
- 深度比较:SAP vs Oracle(sap与oracle比较)
- 数据库解决方案如何使用SAP创建Redis数据库(sap怎么创建redis)
- Oracle与SAP权衡利弊比较之路(oracle与sap比较)
- 展望未来Oracle与SAP的合作结盟前景(oracle、sap)
- 使用Oracle与SAP进行数据接口开发(oracle sap接口)