文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >问答首页 >带有HTML和CSS的Piet Mondrian绘画

问带有HTML和CSS的Piet Mondrian绘画
EN

Code Review用户
提问于 2023-01-14 21:43:43
回答 1查看 138关注 0票数 3

几周前，我开始学习Flexbox，为了练习我的技能，我做了以下练习：

皮耶特·蒙德里安( Piet )是一位20世纪荷兰画家，他的绘画作品强调简单的几何元素。在一个名为mondrian.html的文件中，使用HTML创建这个Piet绘画(https://artmiamimagazine.com/wp-content/uploads/2019/02/Piet-Mondrian-d35kfou.jpg)。如果你在创作整幅画的过程中遇到了困难，那就选一幅画中的“块”，然后再去做。然后选择另一个“块”，然后这样做，等等。你怎么能把你的块组合成一个图像呢？(想想: HTML树结构)。一些学生发现打印图像和编号每个矩形是有帮助的。

我想得到对守则的审查。语义标签的使用正确吗？代码样式对吗？我在代码中应用了哪些不好的实践？我是不是把自己弄得太复杂了？有更简单更好的方法来解决这个问题吗？

代码：

代码语言：javascript
运行
复制
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  border: 16px solid #292827;
  height: 100vh;
}

.box_A,
.box_B {
  flex: 1 0 auto;
}

.box_A {
  border-right: 8px solid #292827;
}

.box_A > div,
.box_B > div {
  height: 10%;
}

.row0,
.row1,
.row2,
.row3,
.row4,
.row5,
.row6,
.row7,
.row8,
.row9 {
  display: flex;
}

.a1 {
  flex: 1 0 auto;
  box-shadow: -8px -8px 0 0 #292827 inset;
}

.a2 {
  flex: 3 0 auto;
  box-shadow: -8px -8px 0 0 #292827 inset;
}

.a3 {
  flex: 2 0 auto;
  background-color: #f9e217;
  box-shadow: 0 -8px 0 0 #292827 inset;
}

.b1 {
  flex: 1 0 auto;
  box-shadow: -8px 0 0 0 #292827 inset;
}

.b1-bottom {
  flex: 1 0 auto;
  box-shadow: -8px -8px 0 0 #292827 inset;
}

.b2 {
  flex: 4 0 auto;
  background-color: red;
  box-shadow: -8px 0 0 0 #292827 inset;
}

.b3 {
  flex: 2.5 0 auto;
  background-color: #f9e217;
}

.b3-bottom {
  flex: 2.5 0 auto;
  background-color: #f9e217;
  box-shadow: 0 -8px 0 0 #292827 inset;
}

.c1 {
  flex: 1 0 auto;
  box-shadow: -8px 0 0 0 #292827 inset;
}

.c2 {
  flex: 4 0 auto;
  box-shadow: -8px 0 0 0 #292827 inset;
  background-color: red;
}

.c2-bottom {
  flex: 4 0 auto;
  background-color: red;
  box-shadow: -8px -8px 0 0 #292827 inset;
}

.c3 {
  flex: 1.25 0 auto;
  box-shadow: -8px 0 0 0 #292827 inset;
}

.c3-bottom {
  flex: 1.25 0 auto;
  box-shadow: -8px -8px 0 0 #292827 inset;
}

.c4 {
  flex: 1.25 0 auto;
}

.c4-bottom {
  flex: 1.25 0 auto;
  box-shadow: 0 -8px 0 0 #292827 inset;
}

.d1 {
  flex: 1 0 auto;
  box-shadow: -8px -8px 0 0 #292827 inset;
}

.d2 {
  flex: 2 0 auto;
  background-color: black;
  box-shadow: -8px 0 0 0 #292827 inset;
}

.d3 {
  flex: 2 0 auto;
  box-shadow: -8px -8px 0 0 #292827 inset;
}

.d4 {
  flex: 2.5 0 auto;
  box-shadow: 0 -8px 0 0 #292827 inset;
}

.e1 {
  flex: 1 0 auto;
  background-color: #f9e217;
  box-shadow: -8px 0 0 0 #292827 inset;
}

.e2 {
  flex: 2 0 auto;
  background-color: black;
  box-shadow: -8px -8px 0 0 #292827 inset;
}

.e3 {
  flex: 2 0 auto;
  box-shadow: -8px -8px 0 0 #292827 inset;
}

.e4 {
  flex: 2.5 0 auto;
  background-color:  #0c7bbc;
}

.f1 {
  flex: 1 0 auto;
  background-color: #f9e217;
  box-shadow: -8px 0 0 0 #292827 inset;
}

.f2 {
  flex: 2 0 auto;
  box-shadow: -8px 0 0 0 #292827 inset;
}

.f3 {
  flex: 2 0 auto;
  background-color: black;
  box-shadow: -8px -8px 0 0 #292827 inset;
}

.f4 {
  flex: 2.5 0 auto;
  background-color:  #0c7bbc;
  box-shadow: 0 -8px 0 0 #292827 inset;
}

.g1 {
  flex: 1 0 auto;
  background-color: #f9e217;
  box-shadow: -8px -8px 0 0 #292827 inset;
}

.g2 {
  flex: 2 0 auto;
  box-shadow: -8px -8px 0 0 #292827 inset;
}

.g3 {
  flex: 1 0 auto;
  background-color: #f9e217;
  box-shadow: -8px 0 0 0 #292827 inset;
}

.g4 {
  flex: 1 0 auto;
  box-shadow: -8px 0 0 0 #292827 inset;
}

.g5 {
  flex: 2.5 0 auto;
  background-color: red;
}

.h1 {
  flex: 3 0 auto;
  box-shadow: -8px 0 0 0 #292827 inset;
}

.h2 {
  flex: 1 0 auto;
  background-color: #f9e217;
  box-shadow: -8px 0 0 0 #292827 inset;
}

.h3 {
  flex: 1 0 auto;
  box-shadow: -8px 0 0 0 #292827 inset;
}

.h4 {
  flex: 2.5 0 auto;
  background-color: red;
}

.i1 {
  flex: 2 0 auto;
  background-color:  #0c7bbc;
  box-shadow: -8px 0 0 0 #292827 inset;
}

.i2 {
  flex: 0.5 0 auto;
  background-color: #f9e217;
  box-shadow: -8px -8px 0 0 #292827 inset;
}

.i3 {
  flex: 0.5 0 auto;
  background-color: black;
  box-shadow: -8px 0 0 0 #292827 inset;
}

.i4 {
  flex: 3 0 auto;
  box-shadow: 0 -8px 0 0 #292827 inset;
}

.j1 {
  flex: 2 0 auto;
  background-color:  #0c7bbc;
  box-shadow: -8px -8px 0 0 #292827 inset;
}

.j2 {
  flex: 1 0 auto;
  background-color: #f9e217;
  box-shadow: -8px -8px 0 0 #292827 inset;
}

.j3 {
  flex: 2 0 auto;
  box-shadow: -8px 0 0 0 #292827 inset;
}

.j4 {
  flex: 1 0 auto;
  background-color: #f9e217;
}

.k1 {
  flex: 2 0 auto;
  background-color:  red;
  box-shadow: -8px 0 0 0 #292827 inset;
}

.k2 {
  flex: 1 0 auto;
  background-color: black;
  box-shadow: -8px 0 0 0 #292827 inset;
}

.k3 {
  flex: 2 0 auto;
  box-shadow: -8px -8px 0 0 #292827 inset;
}

.k4 {
  flex: 1 0 auto;
  background-color: #f9e217;
}

.l1 {
  flex: 2 0 auto;
  background-color:  red;
  box-shadow: -8px -8px 0 0 #292827 inset;
}

.l2 {
  flex: 1 0 auto;
  box-shadow: -8px -8px 0 0 #292827 inset;
}

.l3 {
  flex: 2 0 auto;
  background-color: black;
  box-shadow: -8px 0 0 0 #292827 inset;
}

.l4 {
  flex: 1 0 auto;
  background-color: #f9e217;
  box-shadow: 0 -8px 0 0 #292827 inset;
}

.m1 {
  flex: 2 0 auto;
  box-shadow: -8px -8px 0 0 #292827 inset;
}

.m2 {
  flex: 1 0 auto;
  box-shadow: -8px -8px 0 0 #292827 inset;
}

.m3 {
  flex: 2 0 auto;
  background-color: black;
  box-shadow: -8px -8px 0 0 #292827 inset;
}

.m4 {
  flex: 1 0 auto;
}

.n1 {
  flex: 1 0 auto;
  box-shadow: -8px 0 0 0 #292827 inset;
}

.n2 {
  flex: 1 0 auto;
  box-shadow: -8px 0 0 0 #292827 inset;
}

.n3 {
  flex: 3 0 auto;
  background-color: #0c7bbc;
  box-shadow: -8px 0 0 0 #292827 inset;
}

.n4 {
  flex: 1 0 auto;
}

.o1 {
  flex: 1 0 auto;
  box-shadow: -8px -8px 0 0 #292827 inset;
}

.o2 {
  flex: 1 0 auto;
  box-shadow: -8px -8px 0 0 #292827 inset;
}

.o3 {
  flex: 3 0 auto;
  background-color: #0c7bbc;
  box-shadow: -8px 0 0 0 #292827 inset;
}

.o4 {
  flex: 1 0 auto;
  box-shadow: 0 -8px 0 0 #292827 inset;
}

.p1 {
  flex: 2 0 auto;
  background-color: #f9e217;
  box-shadow: -8px 0 0 0 #292827 inset;
}

.p2 {
  flex: 3 0 auto;
  background-color: #0c7bbc;
  box-shadow: -8px 0 0 0 #292827 inset;
}

.p3 {
  flex: 1 0 auto;
}

.q1 {
  flex: 2 0 auto;
  background-color: #f9e217;
  box-shadow: -8px -8px 0 0 #292827 inset;
}

.q2 {
  flex: 3 0 auto;
  background-color: #0c7bbc;
  box-shadow: -8px -8px 0 0 #292827 inset;
}

.q3 {
  flex: 1 0 auto;
  box-shadow: 0 -8px 0 0 #292827 inset;
}

.r1 {
  flex: 1 0 auto;
  box-shadow: -8px 0 0 0 #292827 inset;
}

.r2 {
  flex: 1 0 auto;
  background-color: black;
  box-shadow: -8px 0 0 0 #292827 inset;
}

.r3 {
  flex: 2.5 0 auto;
  box-shadow: -8px 0 0 0 #292827 inset;
}

.r4 {
  flex: 1.5 0 auto;
}
代码语言：javascript
运行
复制
<div class="container">
    <div class="box_A">
      <div class="row0">
        <div class="a1"></div>
        <div class="a2"></div>
        <div class="a3"></div>
      </div>
      <div class="row1">
        <div class="b1"></div>
        <div class="b2"></div>
        <div class="b3"></div>
      </div>
      <div class="row2">
        <div class="b1-bottom"></div>
        <div class="b2"></div>
        <div class="b3-bottom"></div>
      </div>
      <div class="row3">
        <div class="c1"></div>
        <div class="c2"></div>
        <div class="c3"></div>
        <div class="c4"></div>
      </div>
      <div class="row4">
        <div class="c1"></div>
        <div class="c2-bottom"></div>
        <div class="c3-bottom"></div>
        <div class="c4-bottom"></div>
      </div>
      <div class="row5">
        <div class="d1"></div>
        <div class="d2"></div>
        <div class="d3"></div>
        <div class="d4"></div>
      </div>
      <div class="row6">
        <div class="e1"></div>
        <div class="e2"></div>
        <div class="e3"></div>
        <div class="e4"></div>
      </div>
      <div class="row7">
        <div class="f1"></div>
        <div class="f2"></div>
        <div class="f3"></div>
        <div class="f4"></div>
      </div>
      <div class="row8">
        <div class="g1"></div>
        <div class="g2"></div>
        <div class="g3"></div>
        <div class="g4"></div>
        <div class="g5"></div>
      </div>
      <div class="row9">
         <div class="h1"></div>
        <div class="h2"></div>
        <div class="h3"></div>
        <div class="h4"></div>
      </div>
    </div>
    <div class="box_B">
      <div class="row0">
        <div class="i1"></div>
        <div class="i2"></div>
        <div class="i3"></div>
        <div class="i4"></div>
      </div>
      <div class="row1">
        <div class="j1"></div>
        <div class="j2"></div>
        <div class="j3"></div>
        <div class="j4"></div>
      </div>
      <div class="row2">
        <div class="k1"></div>
        <div class="k2"></div>
        <div class="k3"></div>
        <div class="k4"></div>
      </div>
      <div class="row3">
        <div class="l1"></div>
        <div class="l2"></div>
        <div class="l3"></div>
        <div class="l4"></div>
      </div>
      <div class="row4">
        <div class="m1"></div>
        <div class="m2"></div>
        <div class="m3"></div>
        <div class="m4"></div>
      </div>
      <div class="row5">
        <div class="n1"></div>
        <div class="n2"></div>
        <div class="n3"></div>
        <div class="n4"></div>
      </div>
      <div class="row6">
        <div class="o1"></div>
        <div class="o2"></div>
        <div class="o3"></div>
        <div class="o4"></div>
      </div>
      <div class="row7">
        <div class="p1"></div>
        <div class="p2"></div>
        <div class="p3"></div>
      </div>
      <div class="row8">
        <div class="q1"></div>
        <div class="q2"></div>
        <div class="q3"></div>
      </div>
      <div class="row9">
        <div class="r1"></div>
        <div class="r2"></div>
        <div class="r3"></div>
        <div class="r4"></div>
      </div>
    </div>
  </div>

预先感谢您的评论。

html
css
EN

回答 1

Code Review用户

回答已采纳

发布于 2023-01-18 07:49:46

CSS知道变量

在CSS中，可以使用以下语法初始化变量：--border-color: #292827。初始化后，它可以与shadow-box: -8 0 0 0 var(--border-color) inset一起使用。您可以在MDN文档中找到更多关于它的信息.

不使用类作为ids

每个元素(行、框和单元格)都有自己的类。但是一个类的目的是让它被重用。相反，对于id是正确的。一个id只能使用一次。

通过使用可重用的类，我们可以实现更易读的HTML和CSS。因为<div class="flex-2_5 border-right-and-bottom blue"></div>比<div class="i5"></div>更好地阅读和理解。

，让我们修复行

在给定的代码中，我们可以很容易地用可重用类替换"id"s。

.row0，.row1，.row2，.row3，.row4，.row5，.row6，.row7，.row8，.row9 { display: flex；}

行的所有类都可以替换为一个row类：

代码语言：javascript
运行
复制
.row {
  display: flex;
}

更改之后，我们只需通过<div class="row">...</div>将div标记为行，而不是<div class=row1>...</div>、<div class=row2>...</div>等等。

，让我们修复盒子，

.box_A，.box_B { flex: 10 auto；} .box_A > div，.box_B > div {高度: 10%；}

在本例中，我们可以再次创建单个box-class。之后，我们可以在CSS和HTML中重用它：

代码语言：javascript
运行
复制
.box {
  flex: 1 0 auto;
}

.box>div {
  height: 10%;
}
代码语言：javascript
运行
复制
<div class="box">
    <!-- all the cells -->
</div>
<div class="box">
    <!-- more cells -->
</div>

，让我们修复单元格

这是有趣的部分。我们不需要为每个单元创建一个类。相反，我们可以提取特征，将它们放入自己的类中，并在HTML中重用创建的类。

首先，我们需要确定以下特点：

  • 单元格可以具有相同的宽度。
  • 单元格可以具有相同的边框(框-阴影)。
  • 细胞可以有相同的颜色。

其次，我们为这些属性创建类：

代码语言：javascript
运行
复制
/* here are the sizes */
.flex-0_5 {
  flex: 0.5 0 auto;
}

.flex-1 {
  flex: 1 0 auto;
}

/* ... and more sizes */
代码语言：javascript
运行
复制
/* here are the borders */
.border-right {
  box-shadow: var(--border-width) 0 0 0 var(--border-color) inset;
}

.border-bottom {
  box-shadow: 0 var(--border-width) 0 0 var(--border-color) inset;
}

.border-right-and-bottom {
  box-shadow: var(--border-width) var(--border-width) 0 0 var(--border-color) inset;
}
代码语言：javascript
运行
复制
/* here are the colors */
.red {
  background-color: red;
}

.yellow {
  background-color: #f9e217;
}

.black {
  background-color: black;
}

.blue {
  background-color: #0c7bbc;
}

终解

代码语言：javascript
运行
复制
:root {
  --border-width: -8px;
  --border-color: #292827;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  border: 16px solid var(--border-color);
  height: 100vh;
}

.box {
  flex: 1 0 auto;
}

.box>div {
  height: 10%;
}

.row {
  display: flex;
}

.red {
  background-color: red;
}

.yellow {
  background-color: #f9e217;
}

.black {
  background-color: black;
}

.blue {
  background-color: #0c7bbc;
}

.flex-0_5 {
  flex: 0.5 0 auto;
}

.flex-1 {
  flex: 1 0 auto;
}

.flex-1_25 {
  flex: 1.25 0 auto;
}

.flex-1_5 {
  flex: 1.5 0 auto;
}

.flex-2 {
  flex: 2 0 auto;
}

.flex-2_5 {
  flex: 2.5 0 auto;
}

.flex-3 {
  flex: 3 0 auto;
}

.flex-4 {
  flex: 4 0 auto;
}

.border-right {
  box-shadow: var(--border-width) 0 0 0 var(--border-color) inset;
}

.border-bottom {
  box-shadow: 0 var(--border-width) 0 0 var(--border-color) inset;
}

.border-right-and-bottom {
  box-shadow: var(--border-width) var(--border-width) 0 0 var(--border-color) inset;
}
代码语言：javascript
运行
复制
<div class="container">
  <div class="box">
    <div class="row">
      <div class="flex-1 border-right-and-bottom"></div>
      <div class="flex-3 border-right-and-bottom"></div>
      <div class="flex-2 border-right-and-bottom"></div>
    </div>
    <div class="row">
      <div class="flex-1 border-right"></div>
      <div class="flex-4 border-right red"></div>
      <div class="flex-2_5 border-right yellow"></div>
    </div>
    <div class="row">
      <div class="flex-1 border-right-and-bottom"></div>
      <div class="flex-4 border-right red"></div>
      <div class="flex-2_5 border-right-and-bottom yellow"></div>
    </div>
    <div class="row">
      <div class="flex-1 border-right"></div>
      <div class="flex-4 border-right red"></div>
      <div class="flex-1_25 border-right"></div>
      <div class="flex-1_25 border-right"></div>
    </div>
    <div class="row">
      <div class="flex-1 border-right"></div>
      <div class="flex-4 border-right-and-bottom red"></div>
      <div class="flex-1_25 border-right-and-bottom"></div>
      <div class="flex-1_25 border-right-and-bottom"></div>
    </div>
    <div class="row">
      <div class="flex-1 border-right-and-bottom"></div>
      <div class="flex-2 border-right black"></div>
      <div class="flex-2 border-right"></div>
      <div class="flex-2_5 border-right-and-bottom"></div>
    </div>
    <div class="row">
      <div class="flex-1 border-right yellow"></div>
      <div class="flex-2 border-right-and-bottom black"></div>
      <div class="flex-2 border-right-and-bottom"></div>
      <div class="flex-2_5 border-right blue"></div>
    </div>
    <div class="row">
      <div class="flex-1 border-right yellow"></div>
      <div class="flex-2 border-right"></div>
      <div class="flex-2 border-right-and-bottom black"></div>
      <div class="flex-2_5 border-right-and-bottom blue"></div>
    </div>
    <div class="row">
      <div class="flex-1 border-right-and-bottom yellow"></div>
      <div class="flex-2 border-right-and-bottom"></div>
      <div class="flex-1 border-right yellow"></div>
      <div class="flex-1 border-right"></div>
      <div class="flex-2_5 border-right red"></div>
    </div>
    <div class="row">
      <div class="flex-3 border-right yellow"></div>
      <div class="flex-1 border-right yellow"></div>
      <div class="flex-1 border-right"></div>
      <div class="flex-2_5 border-right red"></div>
    </div>
  </div>
  <div class="box">
    <div class="row">
      <div class="flex-2 border-right blue"></div>
      <div class="flex-0_5 border-right-and-bottom yellow"></div>
      <div class="flex-0_5 border-right-and-bottom black"></div>
      <div class="flex-3 border-bottom"></div>
    </div>
    <div class="row">
      <div class="flex-2 border-right-and-bottom blue"></div>
      <div class="flex-1 border-right-and-bottom yellow"></div>
      <div class="flex-2 border-right"></div>
      <div class="flex-1 yellow"></div>
    </div>
    <div class="row">
      <div class="flex-2 border-right red"></div>
      <div class="flex-1 border-right-and-bottom black"></div>
      <div class="flex-2 border-right-and-bottom"></div>
      <div class="flex-1 yellow"></div>
    </div>
    <div class="row">
      <div class="flex-2 border-right-and-bottom red"></div>
      <div class="flex-1 border-right-and-bottom"></div>
      <div class="flex-2 border-right black"></div>
      <div class="flex-1 border-bottom yellow"></div>
    </div>
    <div class="row">
      <div class="flex-2 border-right-and-bottom"></div>
      <div class="flex-1 border-right-and-bottom"></div>
      <div class="flex-2 border-right-and-bottom black"></div>
      <div class="flex-1"></div>
    </div>
    <div class="row">
      <div class="flex-1 border-right"></div>
      <div class="flex-1 border-right"></div>
      <div class="flex-3 border-right blue"></div>
      <div class="flex-1"></div>
    </div>
    <div class="row">
      <div class="flex-1 border-right-and-bottom"></div>
      <div class="flex-1 border-right-and-bottom"></div>
      <div class="flex-3 border-right blue"></div>
      <div class="flex-1 border-bottom"></div>
    </div>
    <div class="row">
      <div class="flex-2 border-right yellow"></div>
      <div class="flex-3 border-right blue"></div>
      <div class="flex-1"></div>
    </div>
    <div class="row">
      <div class="flex-2 border-right-and-bottom yellow"></div>
      <div class="flex-3 border-right-and-bottom blue"></div>
      <div class="flex-1 border-bottom"></div>
    </div>
    <div class="row">
      <div class="flex-1 border-right"></div>
      <div class="flex-1 border-right black"></div>
      <div class="flex-2_5 border-right"></div>
      <div class="flex-1_5"></div>
    </div>
  </div>
</div>
票数 3
EN
页面原文内容由Code Review提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://codereview.stackexchange.com/questions/282594

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档