代码之家  ›  专栏  ›  技术社区  ›  ganjan

带图片和标题的方框的基本HTML CSS设计

  •  1
  • ganjan  · 技术社区  · 14 年前

    我不是一个很好的设计师。至少没有HTML和CSS。我一直在使用这样一个非常简单的代码:

    <fieldset style=\"color: #000000; border: 1px solid #000000; width: 225px; text-align: left; padding: 5px;\">
    <legend style=\"color: #999999; font-weight: bold;\">Headline.</legend>
    <p>text</p>
    </fieldset>
    

    要在我正在开发的PHP在线游戏中输出信息。我需要一些类似的东西,让它看起来更好一点。我能得到帮助吗?我在想:

    <h2 class="entry-title">Example</h2>
    <img= examples.jpg" >
    <div class="entry-content">
    </div>
    

    但我不确定我能写什么样的CSS代码来对我当前使用的字段集/图例产生类似的效果。我需要一个有标题的盒子,左边是图片,右边是Tekst。

    1 回复  |  直到 14 年前
        1
  •  2
  •   Ugur Korfali    14 年前

    您可以尝试使用下面的DIV块。

    <div class="fieldset">
    <h2 class="entry-title">Example</h2>
    <img= examples.jpg" >
    <div class="entry-content">
    </div>
    </div>
    

    作为样式,首先给fieldset div一个边框。然后,您可以将h2标记相对于fieldset div放置在顶部和左侧的值上。并且确保您的body background、filedset div的background和h2标签的background是相同的。最后将DIV条目内容和图像都向左浮动。

    稍微调整一下,你就会看到标签的相似外观。