HTML文本相关的格式

Question

我有一个HTML网站。我使用Dreamweaver。为了在文章中创建一个部分，我使用表格来放置文本和图像。但表格并不像我想要的那样四舍五入。所以我发布这个，所以你可以告诉我什么是正确的代码来实现图片所示。

图片：左边是我想做的。在右侧，您可以看到我将使用的元素。所以我想要一些中间元素如何重复自己以形成背景。但我也希望这个表的背景能够有文本（如图中所示）。

Answer 1

表不应该用于构建布局。所以有效的方法是使用ie <div>：

HTML：

<div class="article">
    <h1>Title</h1>
    <div>
        <img src="a.jpg">
        <p>
            Lorem ipsum dolor sit amet.
        </p>
    </div>
</div>

CSS：

div.article {
    /* Shadow around the whole box */
    -webkit-box-shadow: 0px 0px 5px black;

    /* Repeat rounder borders here, so shadow will be rounded as well */
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

img {
    width: 100%;
}

h1 {
    margin: 0;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;

    /* Background gradient. In browser with no gradient support, fallback to orange */
    background: orange;
    background: -webkit-linear-gradient(90deg, orange, yellow);
}

div.article > div {
    padding: 10px;
    background-color: gray;
}

JSFiddle with example

注意：此示例仅在Chrome / Safari（和其他webkit浏览器）中呈现阴影和渐变，因为为简单起见，我跳过了其他供应商前缀。添加它们也可以为其他浏览器提供支持。

Answer 2

<style>
table#yourtableid tr:first-of-type {
 -webkit-border-radius: 20px 20px 0px 0px;
    border-radius: 20px 20px 0px 0px;
} 
</style>

为指定表的第一行左上角和右上角提供20px的边框半径。