Question

作为练习，我正在尝试重现我喜欢并有时访问的网站，Armor Games，除了学习/改进网站设计和编程之外没有其他原因。 < / p>

我不想要也没有完全复制代码。我喜欢用眼睛“画”它！那个网站是由表格或div制作的，我不知道，但是因为我在这里阅读了这篇很酷的文章，最近在这里阅读»From Table Hell to Div Hell - 我将使用CSS构建它。

当我看到不同的块时，它们在主页面（促进游戏;新游戏;最新任务等）中正确，我试图弄清楚它是如何构建的。

示例，标题。我认为这是一张背景图片，并且在背景之上还有acc注册和登录代码（这是我现在不用担心的事情）。

但是，我也读过“（...）标题应该包含在h1到h5标签中。编写语义代码通常会减少代码库;使用浮点数减少div会有助于防止浏览器错误。“ - 所以，我不希望你写代码，只是暗示如何，例如，块”推广游戏“的结构！（2个div？）

如果您可以快速查看网站，那么我的xP版本就在下面，

HTML

<body>
<div id="MainMainBlock">
    <div id="MainBlock">
        <div id="Header"> 
        <center>
         Armor Games Header, Login and Acc Registration
        </center>
        </div>

        <div id="Categories"> 
        [Several Categories and other clickables!] -
        [Random Game] - [Quests]
        </div>

        <div id="Search"> 
        Search Bar e and rest
        </div>

        <div id="LatestQuests">
        <div id="LatestQuestsTitle"> Latest Quests </div>
        <img src="Images/Imagem1.jpg" class="QuestsPromotedImages">
        <img src="Images/Imagem2.jpg" class="QuestsPromotedImages">                             <img src="Images/Imagem3.png" class="QuestsPromotedImages">
        <img src="Images/Imagem4.png" class="QuestsPromotedImages">
        <img src="Images/Imagem5.png" class="QuestsPromotedImages">
        <img src="Images/Imagem6.png" class="QuestsPromotedImages">
        </div>
                 

  </div>
</div>

</body>

CSS

<style>
body {
    margin:0;
    padding:0;
    }

#MainMainBlock {
    position: relative;
    width: 100%;
    margin-left: 0 auto;
    margin-right: 0 auto;
    background-color: #006;
    }

#MainBlock {
    display: block;
    position: relative;
    background-color:#FFF;
    visibility: visible;
    height: 1000px;
    width: 980px;
    margin-left: auto;
    margin-right: auto;
    border-top-style: outset;
    border-right-style: outset;
    border-bottom-style: outset;
    border-left-style: outset;
    border-top-color: #000;
    border-right-color: #000;
    border-bottom-color: #000;
    border-left-color: #000;
    padding: 0;
    }

#Header {
    visibility: visible;
    height: 50px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #000;
    border-right-color: #000;
    border-bottom-color: #000;
    border-left-color: #000;    
    }   

#Search {
    height: 35px;
    background-color:#CCC;
    }

#LatestQuests {
    display: block;
    position: relative;
    width: 240px;
    height: 190px;
    top: 18px;
    left: 18px;
    border-top-style: outset;
    border-right-style: outset;
    border-bottom-style: outset;
    border-left-style: outset;
    border-top-color: #000;
    border-right-color: #000;
    border-bottom-color: #000;
    border-left-color: #000;
    }

#LatestQuestsTitle {
    background: #C0C0C0;
    }

.QuestsPromotedImages {
    position: relative;
    display: inline-block;
    float: left;
    width: 65px;
    height: 65px;
    margin-top: 12px;
    margin-left: 7px;
    margin-right: 7px;   
    }   

</style>

并指出裁员;无用的div，或者应该到目前为止的div！

Answer 1

我认为我认为你应该在代码审查中提出这个问题，因为没有一个“正确”的答案。

但是你问过了。我建议如下。

标题

对于初学者，您的标题应使用标题标记（表示正确的语义），我建议使用class而不是id。这样，您可以根据需要轻松地重复使用它。此外，不需要center标记。使用CSS可以轻松实现居中。

<div id="Header"> <center> Armor Games Header, Login and Acc Registration </center> </div>

<强>分类

执行类别的语义方法是使用“内联列表结构”并将每个项目的文本包装在<a>中。 假设这些内容将链接到新页面。如果这是您打算重复使用的话，class可能会比id更好。

<div id="Categories"> [Several Categories and other clickables!] - [Random Game] - [Quests] </div>

搜索：

对于搜索，我建议使用input字段。您可能需要也可能不需要将其包装在容器中，具体取决于您希望如何将其放在页面上。如果目标是镜像“装甲游戏”网站，那么无论如何你都需要容器。

<div id="Search"> Search Bar e and rest </div>

图片：

这对于您目前拥有的内容似乎很好，除了“标题”之外，这应该是标题标记而不是div。但是，如果您打算将更多内容与每个图像相关联，则最有可能必须将每个内容包装在div中。或者更好的解决方案是创建列并将每个列的内容包装在ul中。

<div id="LatestQuests"> <div id="LatestQuestsTitle"> Latest Quests </div> <img src="Images/Imagem1.jpg" class="QuestsPromotedImages"> <img src="Images/Imagem2.jpg" class="QuestsPromotedImages"> <img src="Images/Imagem3.png" class="QuestsPromotedImages"> <img src="Images/Imagem4.png" class="QuestsPromotedImages"> <img src="Images/Imagem5.png" class="QuestsPromotedImages"> <img src="Images/Imagem6.png" class="QuestsPromotedImages"> </div>

这些是我建议的一些基本内容。就像我在之前的评论中所说，可能没有一种“正确”的方法可以做到这一点，你的布局/ HTML结构可能因内容/文档类型而异。例如，如果使用HTML5，您可能需要查看新HTML5标记的正确语义，例如<header>，<footer>，<nav>和<section>等等。如果可能的话，尽可能使用CSS。有开发人员会使用表来轻松定位事物。但在大多数情况下，这不是语义上的。表格用于表格数据。无论如何，我认为你有一个非常好的开始。如果您需要更具体的建议，最好在code review上一次询问较小的代码块。

Divs，只是我需要的一个小例子

1 个答案: