2

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

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

4

2 回答 2

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 与示例。

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

于 2013-10-12T23:05:48.660 回答
0 
<style>
table#yourtableid tr:first-of-type {
 -webkit-border-radius: 20px 20px 0px 0px;
    border-radius: 20px 20px 0px 0px;
} 
</style>

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

于 2013-10-12T23:02:34.220 回答