带有图像和标题的盒子的基本 html css 设计

Question

我不是一个很好的设计师。至少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。

Answer 1

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

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

作为样式，首先为您的字段集 div 提供边框。然后，您可以相对于播放顶部和左侧值的字段集 div 定位 h2 标签。并确保您的 body 背景、filedset div 的背景和 h2 标签的背景相同。最后将 div 条目内容和图像浮动到左侧。

经过一些调整，您应该会得到类似的标签外观。