ホームページ >ウェブフロントエンド >htmlチュートリアル >DIV+CSS Web ページのレイアウト: 1 列のlayout_html/css_WEB-ITnose
DIV+CSS Web ページのレイアウト: 1 列のlayout_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:24:101196ブラウズ
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 サイトに適しています。
れーい