Html 创建给定模板的正确方法

我最近找到了测试中的模板，并尝试复制图像上给定的模板。棘手的是，测验已经结束了，我不能提交我的答案供复习。我仍然对我的模板的正确性感到好奇，所以我想问你们，HTML大师，我是否复制了它

提前谢谢你

图片：

链接：

HTML:

文件
* {
填充：0；
保证金：0；
}
正文，html{
身高：100%；
}
副标题{
身高：100%；
最小高度：50px；
浮动：左；
边框：2件纯黑；
框大小：边框框；
}
标题{
宽度：100%；
身高：25%；
文本对齐：居中；
}
.包装纸{
身高：75%；
宽度：100%；
}
.wrapper>第一列、.wrapper>第二列{
身高：100%；
宽度：50%；
}
.wrapper>第一列>div{
宽度：100%；
}
.wrapper>.first column>.first row{
高度：计算（100%/3）；
}
.wrapper>.first column>.second row{
高度：计算（100%*2/3）；
}
.wrapper>.first column>.second row>div{
身高：100%；
宽度：50%；
}
.wrapper>.first column>.second row>.second column>div{
身高：50%；
宽度：100%；
}
.wrapper>.first column>.second row>.second column>div{
身高：50%；
宽度：100%；
}
.wrapper>第二列>div{
身高：100%；
宽度：50%；
}
.wrapper>.second column>.second column>div{
宽度：100%；
高度：计算（100%/3）；
}
试验台

美妙之处（如果你想这么说的话）在于，确实没有错误的方法（显然有），但会有许多不同的方法来标记这一点

对我来说，你使用了太多的类名，加上我会使用更多的语义元素，如

。这反过来有助于减少您拥有的类名数量

这些将有助于回顾代码和应用CSS

但是你已经完成了你要做的，太好了：-）

p、 我唯一要考虑的是，它在移动设备上会是什么样子，它会如何缩小？对于额外的积分（给你自己），为什么不插入一些媒体查询，看看如何在不破坏体验的情况下使其优雅地降级