在一个部分中创建两个分部

Question

我想创建一个两盒白色背景，其中一个框由用户登录和其他具有专业登录的框组成。 我不知道部分和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应用的样式。

所以解决办法是给他们一个以字母开头的类名 例如：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

正如你所看到的，只有我在课堂前放置C的div才能获得样式。

编辑：
W3C page on CSS selectors说，

  

在CSS1中，类名可以以数字开头（＆＃34; .55ft＆＃34;），除非它是一个维度（＆＃34; .55in＆＃34;）。在CSS2中，此类被解析为未知维度（以允许将来添加新单元）。制作＆＃34; .55ft＆＃34;一个有效的类，CSS2需要转义第一个数字（＆＃34;。\ 35 5ft＆＃34;）

显然，除了更改类名之外，另一个解决方案是编写css选择器，如下所示：\30 01

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

我无法真正推荐这些方法。太hacky了。最好坚持从一封信开始。