0

私は HTML と CSS を学んでいる最中で、ナビゲーション、サイドバー、フローティングなどを備えたいくつかの簡単な Web サイトを作成しました。

テーブルのみで作成された Web サイトにアクセスしました (Google で調べたところ、これは悪いことであることがわかりました。次に、Google でそれを置き換える方法も調べましたが、CSS3 ではないものは何も見つかりませんでした - 重要です。 CSS3 をまだ使いたい!)。

基本的に、このサイトには 3 つの列がありました。テーブルの上にヘッダーがあり<tr>、サイドバーとメイン コンテンツ用に 3 つに分割されています。

右側の小さなサイドバーはそれぞれ別のテーブルで構成されており、境界線には「コンテンツ右」「コンテンツ左」のような「境界線を閉じて開く」スタイルの画像と、中央の画像があります。それは（私が推測する）スタイルを維持するために伸びます.

表を読んでいると、Web サイトのスタイルを設定するのにテーブルを使用するのは良くないと思いますが、サイドバーをあらゆる面から見栄えよくするためにスタイルを設定するには、これが唯一の方法だと思います。

私の言いたいことを理解していただければ幸いです。見たウェブサイトを思い出せず、もう見つけることができません。できる限り明確に説明しようとしました。悪かったら申し訳ありません。私が言ったように学習のプロセス。

基本的に、私が何を意味するのか理解できたら、他のどの方法 (おそらく div またはおそらく境界線で推測しますか?) でこのことを達成できるか教えていただけますか?

4

2 に答える 2

2

まず第一に、使用tablesがすべてに悪いわけではないことを理解してください。それらは、レイアウトを作成するために使用された場合にのみ悪いと見なされます。Web サイトのレイアウトは基本的に、コンテンツの配布方法と配置方法を定義するアウトラインです。

あなたの場合、CSSのみを使用して同じレイアウトを作成するサンプルを次に示します。

<div class = "header">
    Header!
</div>
<div class = "container">
    <div class = "sidebar">
        Sidebar 1!
    </div><div class = "main">
        Main content!
    </div><div class = "sidebar">
        Sidebar 2!
    </div>
</div>

CSS:

body {
    font-family: Arial, Helvetica, Sans-Serif;
    color: white;
}
.header {
    margin: 10px 10px 10px 10px;
    height: 100px;
    background-color: rgb(0, 140, 200);
}
.container {
    height: 500px;
    margin: 10px 10px 10px 10px
}
.sidebar {
    width: 15%;
    height: 100%;
    background-color: rgb(34, 177, 76);
    display: inline-block;
}
.main {
    background-color: rgb(0, 140, 200);
    display: inline-block;
    width: 70%;
    height: 100%;
}
于 2012-08-18T11:09:02.700 に答える
0

HTMLとCSSを学んでいるとおっしゃっていましたが、苦手な方は960グリッド系のCSSで表を作ってみてください。 このリンクはあなたを助けることができます

于 2012-08-18T11:07:21.717 に答える