Question

我最近找到了模板，它在测验中并尝试重现图像上的给定模板。关于它的棘手部分是测验已经关闭，我无法提交我的答案进行审查。我仍然对我的模板的正确性感到好奇，所以我想问你，HTML guru，如果我正确地再现它。

提前谢谢！

IMAGE：

HTML：

＆＃13;

 <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
    </head>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      body, html {
        height: 100%;
      }
      div, header  {
        height: 100%;
        min-height: 50px;
        float: left;
        border: 2px solid black;
        box-sizing: border-box;
      }
      header {
        width: 100%;
        height: 25%;
        text-align: center;
      }
      .wrapper {
        height: 75%;
        width: 100%;
      }
      .wrapper > .first-column, .wrapper > .second-column {
        height: 100%;
        width: 50%;
      }
      .wrapper > .first-column > div {
        width: 100%;
      }
      .wrapper > .first-column > .first-row {
        height: calc(100%/3);
      }
      .wrapper > .first-column > .second-row {
        height: calc(100% * 2/3);
      }
      .wrapper > .first-column > .second-row > div {
        height: 100%;
        width: 50%;
      }
      .wrapper > .first-column > .second-row > .second-column > div{
        height: 50%;
        width: 100%;
      }
      .wrapper > .first-column > .second-row > .second-column > div{
        height: 50%;
        width: 100%;
      }
      .wrapper > .second-column > div {
        height: 100%;
        width: 50%;
      }
      .wrapper > .second-column > .second-column > div{
        width: 100%;
        height: calc(100%/3);
      }
    </style>
    <body>
      <header>
        Test Table
      </header>
      <div class="wrapper">
        <div class="first-column">
    
          <div class="first-row">
    
          </div>
    
          <div class="second-row">
    
            <div class="first-column"></div>
    
            <div class="second-column">
              <div class="first-row"></div>
              <div class="second-row"></div>
            </div>
    
          </div>
    
        </div>
    
        <div class="second-column">
    
          <div class="first-column"></div>
    
          <div class="second-column">
            <div class="first-row"></div>
            <div class="second-row"></div>
            <div class="third-row"></div>
          </div>
    
        </div>
    
      </div>
    
    </body>
    </html>

＆＃13;

Answer 1

美丽（如果你想称之为）是真的没有错误的方法（显然有）但是会有很多不同的方法来标记它。

对我来说，你使用了太多的类名，而且我会使用更多的语义元素，例如<aside> <section> <main> {{1} }。这反过来有助于提升你的班级名称数量。

在回顾代码和应用CSS时，这些将有所帮助。

但你已经完成了你的目标，非常好： - ）

P.S。我唯一要考虑的是，它在移动设备上会是什么样子，它会如何缩小？为了额外的积分（对你自己），为什么不插入一些媒体查询，看看你如何使它降低优雅，而不会破坏经验。

创建给定模板的正确方法

1 个答案: