html - 在一个部分中创建两个分区

Question

我想创建一个白色背景的两个框，其中一个框包含用户登录信息，另一个框包含专业登录信息。我不知道 section 和 div 的政策，我尝试了很多，但我做的不对编辑:我想让设计响应式

html代码:

<section class=wrapper-box>
    <div class="001">
            <!--<i class="material-icons md-48 md-light">person_outline</i>-->


        </div>
        <div class="002">



        </div>
    </section>

我想做这样的事情:

如何创建两个这样的填充框？

Answer 1

类名不应以数字开头。快速测试表明这些名称实际上是有问题的:虽然 div 本身没有受到影响，但通过 .001 和 .002 应用于它们的样式不会呈现。

所以解决方案是给他们以字母开头的类名。
示例:

.C001 {
  border: 2px solid #BBB;
  display: inline-block;
  margin: 1em;
  width:100px; height:100px;
}
.002 {
  border: 2px solid #BBB;
  display: inline-block;
  margin: 1em;
  width:100px; height:100px;
}

<section class=wrapper-box>
  <div class="C001">
    <!--<i class="material-icons md-48 md-light">person_outline</i>-->
    one
  </div>
  <div class="002">
    two
  </div>
</section>

如您所见，只有我在类前面放置 C 的 div 才真正获得样式。

---

编辑:
W3C page on CSS selectors说，

In CSS1, a class name could start with a digit (".55ft"), unless it was a dimension (".55in"). In CSS2, such classes are parsed as unknown dimensions (to allow for future additions of new units). To make ".55ft" a valid class, CSS2 requires the first digit to be escaped (".\35 5ft")

显然，除了更改类名之外，另一种解决方案是这样编写 css 选择器:\30 01

此外，另一个快速而肮脏的测试表明您还可以为选择器编写 [class~='001']。

不过我真的不能推荐这些方法。太骇人听闻了。最好坚持以字母开头。