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

【问题标题】：Divs, Just A Small Example That I NeedDivs，只是我需要的一个小例子
【发布时间】：2013-12-16 18:15:00
【问题描述】：

作为练习，我试图复制一个我喜欢并有时访问的网站，Armor Games，除了学习/改进网站设计和编程之外没有其他原因。

我不想也没有完全复制代码。我喜欢用眼睛“画”出来！我不知道该网站是由表格还是 div 制作的，但由于我到处阅读，最近在这篇很酷的文章中阅读 »From Table Hell to Div Hell - 我将使用 CSS 构建它。

当我查看不同类型的块时，它们就在主页上（推广游戏；新游戏；最新任务等），我试图弄清楚它的结构。

例如，标题。我认为这是一张背景图片，在背景之上是 acc 注册和登录代码（这是我现在不会担心的）。

但是，我也读到“(...) 标题应该用 h1 到 h5 标签包装。编写语义代码通常会减少代码库；使用浮点数减少 div 有助于避免浏览器错误。" - 所以，我不想让您编写代码，只是提示一下，例如，“Promoted Games”块的结构！（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！

【问题讨论】：

有具体问题吗？或者您正在寻找代码审查？如果是这样，我建议在 Code Review 中提出这个问题。 codereview.stackexchange.com
哦，是的，这绝对不是问题，正在寻找一些关于如何构建某些内容（垃圾邮件 div 或其他更好、更简洁的书写方式）的提示，代码审查。

标签： html css css-tables redundancy

【解决方案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 字段。您可能需要也可能不需要将其包装在容器中，具体取决于您希望如何在页面上放置它。如果目标是镜像“Armor Games”网站，那么无论如何您都需要容器。

<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 上一次询问较小的代码块。

【讨论】：

非常感谢 :oo 但是，我只是用而不是
制作了标题，并且标题的顶部和下方都有空格。 css 样式是相同的，所以我猜这是因为它是标题而不是 div！虽然可能有一些方法可以规避这个：P
头标签如下：<h1></h1>,<h2></h2>,<h3></h3>,<h4></h4>,<h5></h5>,<h6></h6>。默认情况下，浏览器会为 HTML 元素添加一些填充和边距。要让所有浏览器看起来都一样，您应该使用 CSS 重置。一个简单的重置就像*{padding:0;margin:0;}...但是我更喜欢这个meyerweb.com/eric/tools/css/reset
我有一个包装器，body {margin:0; padding:0;}，它有助于去除顶部和侧面的空白。对于标题空白、顶部和 bot，我将其设置为绝对，这将其下方的 div 搞砸了，所有的顶部都浮动：P 解决它
找到这个：* {margin:0;填充：0；} 工作！ /// 你发送的链接中的重置奇怪地在整个身体的顶部和侧面添加了边距