-3

我已经为位于http://tinypic.com/r/fxcu9j/5的图像编写了 html，如下所示：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Pricing Table</title>
</head>
<body>
    <div class="container">
        <div class="column">
            <ul>
                <h2>Basic $9<small>pm</small></h2>
                <li>256gb Bandwidth</li>
                <li>Unlimited Addon Domains</li>
                <li>50gb Disk Space</li>
                <li>cPanel Access &amp; Fantastico</li>
                <li>24/7 Live Support</li>
                <li>Email Accounts</li>
                <li>Free Domain</li>
                <li><a href="#" class="button">Sign Up Now</a></li>
            </ul>
        </div>
    </div>
</body>
</html>

为了简单起见，我省略了复制容器类，我的问题是：每列的标题（包含包名称和价格）是否应该成为列表项的一部分，即使我想稍后将它们定位为 CSS我将在哪里更改颜色并添加管道符号，还是应该在 HTML 中分隔此部分？如果是这样，我应该以什么方式将顶部与无序列表分开？

如您所见，我同时使用了 h2 标签，但我知道这是不正确的。我研究过其他网站的代码，但还没有找到这样的例子。

如果可能的话，您能否向我推荐这种结构的在线示例或其他一些我可以参考相关阅读材料的网站？

任何建议将不胜感激。

先感谢您

4

1 回答 1

0

我可能在这里遗漏了一些东西，但是您可以h2通过简单地执行以下操作在 CSS 中设置标签样式：

h2 {
    background-color: blue;
}

或者，由于每个标题都有不同的颜色，您可以分配它们id并相应地设置它们的样式。

HTML：

<h2 id="blue">Basic $9<small>pm</small></h2>
...
<h2 id="red">Free $0<small>pm</small></h2>

CSS：

#blue {
    background-color: blue;
}
#red {
    background-color: red;
}

在此处查看此示例

更新

此链接适用于表格，但会让您很好地了解从哪里开始使用 CSS。我敢肯定，其中大部分都可以调整以适合您的列表布局。页面上的 #10 看起来接近您所追求的。

于 2013-05-31T21:05:32.700 回答