-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 に答える