SAP Spartacus b2b 页面 banner 的grid layout设计

如下图所示：

每个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 b2b 页面 banner 的grid layout设计相关推荐

SAP Spartacus B2B页面Banner Component的路由url是在哪里定义的
在Component wrapper里加上一行打印语句: 输出效果: 以CostCentersHomeLink为例:Spartacus里搜索不到,因为这是一个CMS Component: 从spart ...
SAP Spartacus B2B 页面信息提示图标的弹出窗口显示实现逻辑
这个弹出窗口的技术实现,通过SAP Spartacus 自定义的popover Component实现而成: 注意,当我刚接触Angular时,误以为下图标号为1的a标签,和标号为2的自定义标签cx- ...
SAP Spartacus B2B 页面 Disable 按钮的显示原理
SAP Spartacus B2B 页面 disable 按钮如下图所示. 这个高亮的 disable 按钮,和左边相邻的 Edit 按钮,实现位于不同的 Component. disable 按钮有 ...
SAP Spartacus B2B页面Budget页面的设计原理
打开SAP Spartacus My Company菜单,第一个banner即为Budgets页面的入口: http://localhost:4200/powertools-spa/en/USD/or ...
SAP Spartacus B2B 页面 Popover Component 的条件显示逻辑
如下图所示,这个 B2B 页面的 Popover Component: 触发其的按钮位于 cx-org-card 内: 而下面这个 assigned users 明细页面,为什么就没有显示 Popo ...
SAP Spartacus B2B 页面 Disable Confirmation 对话框的显示原理
该按钮的实现位于 toggle-status.component.html 里,点击后,可以对当前显示的 B2B item 进行 activation 和 deactivation 操作. toggl ...
SAP Spartacus b2b 页面 popover append to body与否的不同行为
append to body为true的情况: 点击之后,直接添加在body节点的尾部: 改成false之后: 更多Jerry的原创文章,尽在:"汪子熙":
SAP Spartacus B2B 页面 info icon 设计 - 版本1.0
现在的做法:引入了新的section标签,包裹cx-icon和h3: <cx-icon[cxPopover]="listHint"[cxPopoverOptions]=&qu ...
SAP Spartacus B2B页面unit tree取数据的设计逻辑
如下图所示: 在unit-list.service.ts的load方法里设置断点: 运行时,可见该load方法是list.service.ts的getData方法触发的:起始的stream是pagin ...

SAP Spartacus b2b 页面 banner 的grid layout设计

SAP Spartacus b2b 页面 banner 的grid layout设计相关推荐

最新文章

热门文章