ホームページ ウェブフロントエンド htmlチュートリアル 典型的な DIV+CSS レイアウト??固定幅と中央揃えのレイアウト_html/css_WEB-ITnose

典型的な DIV+CSS レイアウト??固定幅と中央揃えのレイアウト_html/css_WEB-ITnose

Jun 24, 2016 pm 12:27 PM

1. 効果

2. HTML 構造

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>典型的DIV+CSS布局</title>    <link href="css/layout.css" rel="stylesheet" type="text/css" />    <style type="text/css">        </style></head><body>    <div id="wrap">        <div id="header">            <h1>典型的DIV+CSS布局</h1>        </div>        <div id="menu">        </div>        <div id="container">            <div id="side">            </div>            <div id="content">            </div>        </div>        <div id="footer">            <p>Copyright©2012,<a href="http://blog.csdn.net/yousuosi">WestGarden</a>.</p>        </div>    </div></body></html>
ログイン後にコピー

3. CSS

*{    margin:0;    padding:0;}body {    text-align:center;    background:url(bg.jpg);}a:link      { color: #A0410D; text-decoration:none; }a:visited 	{ color: #A0410D; text-decoration:none; }a:active 	{ color: #A0410D;  cursor:hand; text-decoration:none; }a:hover 	{ color: #FFCC17;  cursor:hand; text-decoration:"underline"; }h1,h2,h3,h4{    color:#C36C2D;}#wrap{    width:800px;    margin:0 auto;    text-align:left;}#header{    height:118px;    text-align:center;    background:#FDE38F url(logo.jpg) no-repeat;}#header h1{    line-height:118px;}#menu{    height:22px;    background:url(bar.jpg) repeat-x;}#container{    float:left;    background:#A0410D;}#side{    width:200px;    float:left;}#content{    width:600px;    float:left;    height:400px;    background:white;}#footer{    clear:both;    height:22px;    text-align:right;}#footer p{    line-height:22px;}
ログイン後にコピー


1. *{ margin:0;} は、自分の Web サイトでは、通常、reset.css が必要です。reset.css の内容については、http://blog.csdn.net/yousuosi/article/details/7939325 を参照してください。

Text-aling:center が設定されています。 body では、 text-align:left が Wrap に設定されていますが、これは古いバージョンのブラウザの互換性の問題を解決するためです。新しいバージョンのブラウザでは、wrap の margin:0 auto; でセンタリングの問題を解決できます。

3. div#header のタイトル h1 の垂直方向の中央揃えの問題 h1 の行の高さを 118px に設定できます。つまり、h1 の行の高さは div#header の高さと一致します。

4. サイド div とコンテンツ div を並べて配置することもできますが、この例のようにフローティング メソッドを使用することもできます。フローティング メソッドを使用する場合、2 つの div は float:left; 属性で設定されます。標準フローでは、この時点でコンテナーが 2 つの div を確実に囲むことができるようにするために、フローティング モードにも設定されます。

5. サイド、コンテンツ、コンテンツはすべてフローティング モードに設定されているため、フローティングの影響をクリアするには、後続のフッターを設定する必要があります。

6 番目に、2 つの隣り合った div の背景色の設定に問題があります。つまり、通常、コンテンツの高さがコンテンツに応じて変化します。現時点では、コンテンツの高さを確保することが困難です。側面は内容と一致しています。解決策は、コンテナーの側面の背景色を設定することです。コンテンツには Web コンテンツを保存する必要があるため、通常は背景色を明るく設定するか、単純に白に設定する必要があります。

7. 固定幅レイアウトと中央揃えレイアウトでも絶対配置属性を使用できます。詳細については、「一般的な DIV+CSS レイアウト」を参照してください。

【結論】

プログラマーにとって、フロントデスクのことは全く理解できず、簡単なインターフェースすら作れません。終了コード。そして、プログラマーに美しいフロントエンドインターフェイスを作るよう求めるのは現実的ではありません。インターフェイスを作るには、プログラマーが得意とするロジックとは異なります。この時点で、プログラマーは自分自身の適切なポジショニングを確立する必要があります。個人的には、おそらく CSS はバックエンド コードとフロントエンド インターフェイスの間のインターフェイスであると思います...

プログラマーは、構造、コンテンツ、パフォーマンスの分離という Web 標準の設計思想を理解し、基本的な HTML 構造をマスターし、基本的な CSS デザインを習得し、シンプルな色と少数の画像を使用して Web 標準に準拠したインターフェイスを構築できること。これは、HTML 構造が合理的であり、CSS が標準化されている必要があります。アーティストやフロントデスクのスタッフが、インターフェイスの構造やコンテンツに影響を与えることなく、自分の能力を最大限に発揮できることを想像してみてください。

[参考文献]

Li Zhuoqun、Web デザイン例チュートリアル[M]、北京: 清華大学出版局、2010:194-197。

Wen Qian、CSS デザインの徹底研究[M]。 Press 、2008. (添付: 電子書籍のダウンロード アドレス)

SHEA D.CSS Zen Garden [M]、北京: People's Posts and Telecommunications Press 2007. (添付: 電子書籍のダウンロード アドレス)

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

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は? 公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は? Mar 04, 2025 pm 12:32 PM

公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は?

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? Mar 17, 2025 pm 12:27 PM

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか?

WebページのPNG画像にストローク効果を効率的に追加する方法は? WebページのPNG画像にストローク効果を効率的に追加する方法は? Mar 04, 2025 pm 02:39 PM

WebページのPNG画像にストローク効果を効率的に追加する方法は?

< iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? < iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? Mar 20, 2025 pm 06:05 PM

< iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか?

IFramesを使用することのセキュリティへの影響は何ですか?また、どのようにそれらを軽減できますか? IFramesを使用することのセキュリティへの影響は何ですか?また、どのようにそれらを軽減できますか? Mar 18, 2025 pm 02:51 PM

IFramesを使用することのセキュリティへの影響は何ですか?また、どのようにそれらを軽減できますか?

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? Mar 17, 2025 pm 12:20 PM

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか?

HTML5< time>を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素? HTML5< time>を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素? Mar 12, 2025 pm 04:05 PM

HTML5< time>を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素?

HTML5< meter>を使用するにはどうすればよいですか 範囲内に数値データを表示する要素? HTML5< meter>を使用するにはどうすればよいですか 範囲内に数値データを表示する要素? Mar 12, 2025 pm 04:08 PM

HTML5< meter>を使用するにはどうすればよいですか 範囲内に数値データを表示する要素?

See all articles