DIV+CSS Web ページのレイアウト: 1 列のlayout_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

DIV+CSS Web ページのレイアウト: 1 列のlayout_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:24 AM

1. Web ページのレイアウト

レイアウトとは、物事の総合的な計画と配置のことです。ページレイアウトとは、ページ上のテキスト、画像、または表の書式設定と配置です。 Web ページのレイアウトは、Web サイトの外観を改善するために非常に重要です。レイアウトレイアウトとも呼ばれます。Web ページのレイアウトのデザインは、従来の紙媒体の特徴を引き継いでいます。従来の紙媒体は、紙サイズの制限により限られたスペースにコンテンツを配置することしかできませんが、Web ページのレイアウトはコンテンツに応じて幅と高さを調整できます。 HTML では、複数の列を作成するために div 要素がよく使用され、要素をフローティングおよび配置するために CSS が使用されるため、Web デザインの下書きのレイアウトスタイルが Web ページ上に表示されます。 Web ページのレイアウトは、Web ページ制作の基本として、標準的なドキュメントフローに従って要素を配置する流動レイアウト、および絶対配置レイアウトの 3 つの方法が一般的に使用されます。主要なウェブサイトでは、一般的なレイアウト構造は 1 カラムレイアウト、2 カラムレイアウト、3 カラムレイアウト、混合レイアウトに分類されます。その中で最も一般的に使用されているのは、複数のカラムを使用してレイアウトする混合レイアウトです。ウェブサイトの実際のニーズに合わせて。

現在、ほとんどの Web サイトは依然として、ヘッダー、フッター、サイドバー、コンテンツ領域でこの単純なレイアウトを構成する共通のレイアウトパターンを使用しています。従来の新聞や雑誌の編集者と同じように、これは人々が期待する Web ページレイアウトであり、次のように大別できます。 Guozi タイプ、つまり、最も一般的なレイアウト構造である 3 列レイアウト。タイトルテキストタイプ。つまり、記事ページに似た 1 列のレイアウト。左右のフレームタイプは 2 列レイアウトで、上下のフレームタイプは 2 列レイアウトに似ていますが、上下の構造になっています。ハイブリッド型は、複数のカラムレイアウト、複数種類の変更、および比較的複雑なフレーム構造を組み合わせたもので、総合フレーム型とも呼ばれます。カバータイプは、Web サイトのホームページでよく使用され、プロモーションポスターのスタイルに似た美しい写真を最初の画面に配置し、小さなアニメーション効果と組み合わせて製品の表示に使用できます。人々に楽しい気持ちを与えます。

HTML5やCSS3などの新技術の登場やモバイルデバイスの急速な発展により、インターネットは現在、レイアウトを固定フォーマットに限定する必要がなくなりました。近年の Web ページのレイアウトデザインのトレンドは、特定のガイドラインや確立されたシステムに厳密に従っていない、型破りなレイアウトです。フルスクリーンレイアウト、ウォーターフォールフロー、シームレスなパズルレイアウトなどの視覚的なインタラクションに関しては、従来のレイアウト方法に限定されません。従来の Web サイトや情報 Web サイトの場合、そのほとんどは 1 列、2 列、または 3 列のレイアウト、および混合レイアウト構造を採用しています。ページのレイアウト構造は、ページのユーザーエクスペリエンスに直接影響します。たとえば、非常に人気のあるカードスタイルの Web デザインは、見た目が美しいだけでなく、情報とコンテンツが高度に統合されており、非常にシンプルでエレガントです。。カードデザインの人気はレスポンシブデザインと切っても切れない関係にありますレスポンシブWebデザインは、モバイルサイトを作成するだけでなく、PC、タブレット、スマートフォンなど、さまざまなブラウザサイズに適したWebサイトを作成することを目的としています。サイズに関係なく美しいウェブサイト。

以下は、私が普段の演習中に見つけたいくつかの優れた Web ページレイアウトデザインです: QQ ブラウザー、360 ブラウザー、Xiaomi 携帯電話表示ページ、Nut 携帯電話表示ページ、および Huaban.com。

国内のウェブサイトのレイアウト構造と比較して、海外のウェブサイトのデザインはまだまだ評価される必要があります。

2. 1カラムレイアウト

1カラムレイアウトは、360検索などのWebサイトのトップページによく使用され、構造がシンプルで明確で、テーマが目立ちます。単純なコンテンツの配置には適していますが、複数行のコンテンツには適していません。通常、1 列のレイアウトは固定幅です。

 1 <!DOCTYPE html> 2 <html> 3 <head> 4     <meta charset="UTF-8"> 5     <title>一列布局</title> 6 <style> 7 *{margin:0;padding:0;} 8 #header{ 9     height:50px;10     background:blue;11 }12 #main{13     width:960px;14     height:800px; /* 在实际开发中不设置列的高度，让高度自适应。 */15     background:green;16     margin:0 auto;17 }18 #footer{19     width:960px;20     height:100px;21     background:gray;22     margin:0 auto;23 }24 </style>25 </head>26 <body>27 <div id="header">页头</div>28 <div id="main">主体内容</div>29 <div id="footer">页脚</div>30 </body>31 </html>

Sina と NetEase のホームページはカラムレイアウトを使用しています。

3. 単一列の幅アダプティブレイアウト

幅をアダプティブにしたい場合は、パーセンテージに従って幅を設定するだけで、コンテンツはブラウザウィンドウに応じてサイズを自動的に調整できます。

 1 <!DOCTYPE html> 2 <html> 3 <head> 4     <meta charset="UTF-8"> 5     <title>一列自适应布局</title> 6 <style> 7 *{margin:0;padding:0;} 8 #header{ 9     height:50px;10     background:blue;11 }12 #main{13     width:80%;14     height:800px; /* 在实际开发中不设置列的高度，让高度自适应。 */15     background:green;16     margin:0 auto;17 }18 #footer{19     width:80%;20     height:50px;21     background:gray;22     margin:0 auto;23 }24 </style>25 </head>26 <body>27 <div id="header">页头</div>28 <div id="main">主体内容</div>29 <div id="footer">页脚</div>30 </body>31 </html>

4. アダプティブシングルカラムレイアウト

このレイアウト構造は、密度の高いコンテンツを含む Web サイトに適しています。

れーい

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

Web開発にとってHTMLタグが重要なのはなぜですか？May 02, 2025 am 12:03 AM

htmltagsareSterenceforwebdevelovementasyStheStructureanhandhancewebpages.1）theydefineLayout、semantics、and-interactivity.2）semanticagsimprovecessibility.3）opeusofusofagscanoptimizeperformanceandensurecross-brows-compativeation。

HTMLタグと属性に一貫したコーディングスタイルを使用することの重要性を説明します。May 01, 2025 am 12:01 AM

コードの読みやすさ、保守性、効率を向上させるため、一貫したHTMLエンコーディングスタイルは重要です。 1）低ケースタグと属性を使用します。2）一貫したインデントを保持し、3）シングルまたはダブルの引用符を選択して固執する、4）プロジェクトのさまざまなスタイルの混合を避け、5）きれいなスタイルやEslintなどの自動化ツールを使用して、スタイルの一貫性を確保します。

ブートストラップ4にマルチプロジェクトカルーセルを実装する方法は？Apr 30, 2025 pm 03:24 PM

Bootstrap4にマルチプロジェクトカルーセルを実装するソリューションBootstrap4にマルチプロジェクトカルーセルを実装するのは簡単な作業ではありません。ブートストラップですが...

DeepSeekの公式Webサイトは、マウススクロールイベントの浸透の影響をどのように達成していますか？Apr 30, 2025 pm 03:21 PM

マウススクロールイベントの浸透の効果を実現する方法は？ Webを閲覧すると、いくつかの特別なインタラクションデザインに遭遇することがよくあります。たとえば、DeepSeekの公式ウェブサイトでは、...

HTMLビデオの再生コントロールスタイルを変更する方法Apr 30, 2025 pm 03:18 PM

HTMLビデオのデフォルトの再生コントロールスタイルは、CSSを介して直接変更することはできません。 1. JavaScriptを使用してカスタムコントロールを作成します。 2。CSSを介してこれらのコントロールを美化します。 3. video.jsやPLYRなどのライブラリを使用すると、互換性、ユーザーエクスペリエンス、パフォーマンスを検討してください。プロセスを簡素化できます。