圆角没有显示在表中

时间:2011-08-12 13:36:31

标签: html css

我有这张桌子,并试图为它添加圆角,但没有任何反应。有人可以看看,告诉我哪里出错了?角落图像的大小各为14像素。

非常感谢任何帮助。

<table cellpadding="0" cellspacing="0" >
    <tr bgcolor="#e4322d" style="line-height: 0px">
        <td width="14px" height="14px"><img src="red1.png" width="14px" height="14px" alt=""></td>
        <td width="430" style="font-size: .2em">&nbsp;</td>
        <td width="14px" height="14px"><img src="red2.png" width="14px" height="14px" alt=""></td>
    </tr>

    <tr bgcolor="#e4322d">
        <td width="14px" style="font-size: 1px">&nbsp;</td>
        <td width="430" bgcolor="#e4322d" align="center" style="color: white; font-size: 16px"><span style="font-family: Verdana,Geneva,sans-serif; color:#FFFFFF;"><br>Come swim in our latest pool.<br><br></span></td>
        <td width="14px" height="14px" style="font-size: 1px;">&nbsp;</td>
    </tr>

    <tr bgcolor="#e4322d" style="line-height: 0px">
        <td width="14" height="14"><img src="red3.png" width="14" height="14" alt=""></td>
        <td width="430" style="font-size: 0px;" height="2"></td>
        <td width="14px" height="14"><img src="red4.png" width="14" height="14" alt=""></td>
    </tr>
</table>

1 个答案:

答案 0 :(得分:3)

真正的问题是你为此完全克服了HTML。您可以使用此HTML简单地完成整个过程:

<div class="banner">Come swim in our latest pool.</div>

并添加这个负责所有样式的CSS:

.banner {
    width: 450px;
    padding: 35px 0;
    background: #E4322D;
    border-radius: 14px;
    text-align: center;
    font-size: 16px;
    color: #FFF;
}

看起来你并没有使用CSS,并且正在使用非常老式和长期过时的HTML技术来制作表格。没有必要。我会花时间快速学习CSS。它会改变你的生活!从这里开始;它很容易学习:

http://www.w3.org/wiki/CSS/Training/What_is_CSS

通过使用CSS并为您的网站提供全局样式表,您将能够重复使用样式,而无需每次都为其编写新代码。例如,您可以使用多个横幅看起来与“在我们最新的游泳池游泳”相同,只需给他们一个类:

<div class="banner">Come swim in our latest pool.</div>
<div class="banner">Also, check out this!</div>
<div class="banner">Hey, this box looks the same as the other two!</div>