VS Code 一键注释快捷键及 HTML+CSS 表格布局示例

在 Visual Studio Code 中一键注释可以使用快捷键 Ctrl + / 或 Command + /（Mac）来实现。 选择需要注释的代码行，然后按下快捷键即可注释或取消注释所选代码块。如果注释多行代码，也可以在第一行前面加上 /*，在最后一行后面加上 */ 来注释选中的代码块。

利用 div＋css 做一个表格页面，从上到下分为四大块，第一大块分为左右两块，第三块分为左右两块，其余两块各自为一块。

解释：

可以使用以下代码实现：

HTML 代码：

<div class="wrapper">
  <div class="block1">
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <div class="block2"></div>
  <div class="block3">
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <div class="block4"></div>
</div>

CSS 代码：

.wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.block1 {
  width: 100%;
  height: 50%;
  display: flex;
}

.block1 .left {
  width: 50%;
  height: 100%;
}

.block1 .right {
  width: 50%;
  height: 100%;
}

.block2 {
  width: 100%;
  height: 25%;
}

.block3 {
  width: 100%;
  height: 25%;
  display: flex;
}

.block3 .left {
  width: 50%;
  height: 100%;
}

.block3 .right {
  width: 50%;
  height: 100%;
}

.block4 {
  width: 100%;
  height: 25%;
} 

这个代码实现了一个从上到下分为四大块的表格页面，其中第一大块分为左右两块，第三块分为左右两块，其余两块各自为一块。可以根据实际需求调整各个块的大小和布局。