典型的な DIV+CSS レイアウト??固定幅と中央揃えのレイアウト_html/css_WEB-ITnose
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 を参照してください。
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. (添付: 電子書籍のダウンロード アドレス)
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7552
15
1382
52
83
11
22
95
＆lt; Progress＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:34 PM
この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合
＆lt; datalist＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:33 PM
この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。
＆lt; meter＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:35 PM
この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex
ビューポートメタタグとは何ですか？レスポンシブデザインにとってなぜそれが重要なのですか？
Mar 20, 2025 pm 05:56 PM
この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。
＆lt; iframe＆gt;の目的は何ですか タグ？使用する際のセキュリティ上の考慮事項は何ですか？
Mar 20, 2025 pm 06:05 PM
この記事では、＆lt; iframe＆gt;外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。
HTMLは初心者のために簡単に学ぶことができますか？
Apr 07, 2025 am 12:11 AM
HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。
HTML、CSS、およびJavaScriptの役割：コアの責任
Apr 08, 2025 pm 07:05 PM
HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。
HTMLでの開始タグの例は何ですか？
Apr 06, 2025 am 12:04 AM
Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。
