html - 如何像在图像中一样在 HTML 中添加垂直边框
解决方案
尝试使用 CSS 网格 https://css-tricks.com/snippets/css/complete-guide-grid/
我编写这段代码是为了向您展示您的模板网站上的网格外观
.item1 { grid-area: header; }
.item2 { grid-area: left; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
display: grid;
grid-template-areas:
'left header header header header right'
'left main main main main right'
'left footer footer footer footer right';
grid-gap: 10px;
background-color: #2196F3;
padding: 7px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 40px 0;
font-size: 30px;
}
<!DOCTYPE html>
<html>
<body>
<div class="grid-container">
<div class="item1">Header</div>
<div class="item2">Left</div>
<div class="item3">Main</div>
<div class="item4">Right</div>
<div class="item5">Footer</div>
</div>
</body>
</html>
推荐阅读
- html - 如何从 URL 压缩图像?
- phpmyadmin - phpMyAdmin 自动将 LIMIT 1 设置为特定表
- r - 如何从 R 中的多个 PNG 创建 GIF?
- google-sheets - 无论区域设置如何,如何使用 Sheets API 插入小数点?
- angular - ASP.net 核心 SEO 中间件
- c# - 如何阻止应用程序在 RotateYTo 上崩溃?
- google-app-maker - 如何根据电子邮件发送成功更新字段
- java - SpringBoot 为soap请求生成端点映射
- javascript - DataTables / Checkboxes Plugin - 如何返回选中的复选框数量
- apache - 在 Windows 上的 apache http 服务器上重写 URL