0

私のサイトのレイアウトはとてもシンプルです。私はそれを次のように見せたい：

  • ページの幅にまたがる1行のテキスト。
  • その下の4つの別々のテキスト列。
  • その下の2つの列：
    • 左側の列は細く、ページの残りの高さにまたがっています。
    • 右側の列には、短いテキスト行が1つあり、その下にページの残りの高さにまたがる別のテキスト行があります。

それぞれの赤いブロックはテキストです。今のところ、次のブロックの下に各ブロックがあり、すべて中央に配置されています。上の画像のようにレイアウトしてほしいです。

これを正しく行う方法がわからないようです。相対的な配置を使用するのは面倒です。パーセンテージも機能していないようです。

4

2 に答える 2

2

Webサイトは、複数のブロック（または列）に分割されています。これを独立したグループ（サイドバー、ヘッダー、フッター、コンテンツなど）に分割するのは、設計者/開発者の責任です。

ファンダメンタルズを学ぶことは非常に重要です。このサイトにはかなりまともな直感的なチュートリアルHTMLがあります

また、チェックアウト

また、ブラウザが満載の開発者ツールを利用して、遭遇したWebサイトからヒントを得てください。

于 2013-03-07T03:52:28.843 に答える
1

私はそれを大きなブロックに分割することから始めます：

真の芸術作品

そこから、構造を作成します。

<header>
    ...
</header>

<nav>
    <ul>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
    </ul>
</nav>

<aside>
    ...
</aside>

<div id="main">
    <article>
        ...
    </article>

    <article>
        ...
    </article>
</div>

CSSは非常にシンプルです。流動的な2列のレイアウトcssを調べて、そこにある多くの記事の1つを読んでください。

于 2013-03-07T03:03:10.360 に答える