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

Posted 2023-02-16

【中文标题】带有图像和标题的框的基本 html css 设计

【英文标题】：basic html css design of a box with image and title

【发布时间】：2011-03-11 16:36:51

【问题描述】：

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

【问题讨论】：

你最好在doctype.com问这个问题

你可能是对的。我也会在那里问，谢谢你的书签。

如果您对想要的结果有所了解，您可能还会得到更好的/som 答案。

【参考方案1】：

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

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

作为样式，首先为您的字段集 div 设置一个边框。然后，您可以将 h2 标签相对于您的字段集 div 播放顶部和左侧值。并确保你的 body 背景、filedset div 的背景和 h2 标签的背景是相同的。最后将 div entry-content 和图像浮动到左侧。

稍作调整，您应该会得到类似的标签外观。