html - Div 标题/标题

Question

我想使两个 h1 元素成为 div 上的标题/页眉。所以每个都在特定的 div 之上。

    <div class="test">
        <h1 style="color: white; margin:0 auto;">Youtube</h1>
        <h1 style="color: white; margin:0 auto;">Achievements</h1>
        <div class="BoxHolder" style="width: 420px; height: 345px; float: left; padding: 15px 10px; display: block;">
            <embed width="420" height="345" src="http://www.youtube.com/v/XGSy3_Czz8k" type="application/x-shockwave-flash">
        </div>
        <div class="BoxHolder" style="width: 420px; height: 345px; float: right; padding: 15px 10px; display: block;">
            <div class="achievements"><hr></div>
            <div class="achievements"><hr></div>
            <div class="achievements"><hr></div>
            <div class="achievements"><hr></div>
            <div class="achievements"><hr></div>
            <div class="achievements"><hr></div>
            <div class="achievements"><hr></div>
            <div class="achievements"><hr></div>
            <div class="achievements"><hr></div>
            <div class="achievements"><hr></div>

        </div>
    </div>

这是我的 CSS:

    .main {
        width:auto;
        height:262px;
        margin-bottom:50px
    }
    .boxholder{
        margin:0 auto;
        height:300px;
        width:935px;
        border:1px solid #2F2F2F;
        box-shadow:inset 0px 0px 15px #181818
    }
    .test{
        width:902px;
        margin: 0 auto 50px;
    }
    .mascotlinks img {
         height:100%;
         width:33%;
         position:left;
     }
    .achievements {
        height:7%;
    }

此外，请务必给我一些关于在哪里改进此代码以及其他任何内容的指示。我对此很陌生。谢谢。

Answer 1

不是 100% 确定您要查找的内容，但我制作了一个 jsfiddle，以便您可以查看。 http://jsfiddle.net/kriscoulson/ocekg2oc/

您需要做的就是获取 h1 并将它们放在 .BoxHolder 类下。

    <div class="BoxHolder" style="width: 420px; height: 345px; float: left; padding: 15px 10px; display: block;">
        <h1>Youtube</h1>
        <embed width="420" height="345" src="http://www.youtube.com/v/XGSy3_Czz8k" type="application/x-shockwave-flash">
    </div>
    <div class="BoxHolder" style="width: 420px; height: 345px; float: right; padding: 15px 10px; display: block;">
        <h1>Achievements</h1>
        <div class="achievements"><hr></div>
        <div class="achievements"><hr></div>
        <div class="achievements"><hr></div>
        <div class="achievements"><hr></div>
        <div class="achievements"><hr></div>
        <div class="achievements"><hr></div>
        <div class="achievements"><hr></div>
        <div class="achievements"><hr></div>
        <div class="achievements"><hr></div>
        <div class="achievements"><hr></div>

    </div>
</div>

此外，您应该尝试取消内联样式，您可以在 css 中完成所有这些操作，并让您的代码更加简洁。而H1标签应该只用于标题，比如当你来到首页时。尝试使用 h2 标签并使用 css 设置样式

h2 {
font-size:42px
}