【div+css Webページレイアウトの詳細説明】_html/css_WEB-ITnose
前書き:
Web ページのレイアウトは Web ページ作成の最初で最も重要なステップです。今日は、div+css レイアウトの使用方法について詳しく説明します。
dw で Web ページを作成するには 2 つの方法があります。1 つはグラフィカル インターフェイスで、もう 1 つはコードです。初心者の場合は、グラフィカル インターフェイスを使用できます。ほぼ完了したら、効率を向上させるコード。
現在の CSS3 と以前の CSS2 の間には大きな変更点があるため、CSS2 から始めましょう。
(作者は Dreamweaver CS6 を使用しています。クラック版のダウンロード アドレス: http://www.aa25.cn/download/954.shtml)
1. 単一列レイアウトWeb ページ作成者は、最初にフレームワークは次の図のようになります:
Web ページをヘッダー タイトル部分、ナビゲーション ナビゲーション部分、記事本文、フッター フッターの 4 つの部分に分割するだけです
これは 1 列のレイアウトです。
div を通じてこれら 4 つの構造を作成し、css でレイアウトしてスタイルを追加します
以下に示すように、dw を使用して div をすばやく作成します:
以前は、div は次の目的で使用されていました。この構造を直接作成し、この構造の作成に ID が使用されました。レイアウト用にこの div を見つけます。
画像の右側にある新規ボタンをクリックして、中央のタイプを選択することに注意してください。スタイルを選択するためのルール。ID は ID カードのようなもので、それぞれ異なります。もちろん、状況に応じて、CSS クラスセレクター、疑似クラスを選択することもできます。確認ポップアップページで CSS スタイルを設定します。
レイアウトに色を追加し、固定サイズの幅と高さを設定します。結果は次のようになります。 :
この問題は、初心者にとっても疑問に思われやすいものですが、これに似たものがたくさんあります。 ,
そのため、一般に Web ページを作成するときは、いくつかの属性を最初に初期化する必要があります。次のように記述します: body { margin:0 auto; font-family:Verdana; }
ul,dl,dd,h1,h2,h3,h4,h5,h6; ,p {padding:0; margin:0;}
ここで白いマージンをキャンセルするには、次のように記述します: body { margin:0}
<span style="font-size:18px;color:#006600;"><strong><!doctype html><html><head><meta charset="utf-8"><title>Untitled Document</title><style type="text/css">#header { background-color: #0F9; height: 100px; width: 500px;}#nav { background-color: #F00; height: 50px; width: 500px;}#article { background-color: #93C; height: 300px; width: 500px;}#footer { background-color: #F99; height: 50px; width: 500px;}</style></head><body><div id="header">header</div><div id="nav">nav</div><div id="article">article</div><div id="footer">footer</div></body></html></strong></span>上記は固定幅です。ブラウザのサイズが変わったときに幅を変更したい場合は、次のように % 単位を使用します。 width: 70%
div を中央に配置する属性: margin 属性を auto に変更します。 以上がhtml4とcss2の書き方です。
HTML5では、新しい構造タグの追加により、多くの場所でdivのブロックレベルの構造を記述する必要はなく、CSSを追加するときに
<span style="font-size:18px;color:#006600;"><strong><header>header</header><nav>nav</nav><article>article</article><footer>footer</footer></strong></span>
を直接追加します 2. 複数列レイアウト
div はブロックレベルの要素であるため、名前が信じられないほど優れており、一度に 1 ブロックずつ、各ブロックは 1 行を占有します1 行に複数のブロックを入れたい場合は、CSS を使用して複数の列にレイアウトする必要があります。
<span style="font-size:18px;color:#006600;"><strong><!doctype html><html><head><meta charset="utf-8"><title>Untitled Document</title><style type="text/css">#left { background-color: #3FC; float: left; height: 400px; width: 100px;}#center { background-color: #9C0; float: left; height: 400px; width: 100px;}#right { background-color: #F9F; height: 400px; width: 100px; float: left;}</style></head><body><div id="left">header</div><div id="center">nav</div><div id="right">article</div></body></html></strong></span>
float をボックスに配置します。 属性は left に設定されます
float: left;
このメソッドには欠点があります。たとえば、記事を投稿する場合、float を使用して記事を 3 つの列に分割すると、いずれかの列にコンテンツを追加すると、この列が他の列よりも長くなるため、修正するのが非常に面倒になります。css3 に新しく追加された複数列レイアウトとボックス レイアウトは、この問題を完全に解決します。
まず、ボックス レイアウトを使用してコードを確認します。効果は上の図と同じです。自分で実装することもできます。 CSS2 の float+position レイアウトで、float の問題なく位置合わせを自動で実現できます。
例で実装されているように、複数列レイアウトは主に記事に適しており、レイアウトを変更せずに自由に変更できます。ウェブページの外観。もちろん、このレイアウトにも制限があります。各列の幅は同じです。
そして、列の合計幅を記述する必要があります。そうすれば、複数の列が必要な場合に自動的に均等に配分されます。
コードは次のとおりです:
<span style="font-size:18px;color:#006600;"><strong><!doctype html><html><head> <meta charset="utf-8"> <title>Untitled Document</title> <style type="text/css"> #layout{ display: -moz-box; display: -webkit-box; } #left { background-color: #3FC; height: 400px; width: 100px; } #center { background-color: #9C0; height: 400px; width: 100px; } #right { background-color: #F9F; height: 400px; width: 100px; } #left,#center,#right{ -moz-box-sizing:border-box; -wdbkit-box-sizing:border-box; } </style></head><body> <div id="layout"> <div id="left">header</div> <div id="center">nav</div> <div id="right">article</div> </div></body></html></strong></span>さて、前に div+css の単一列レイアウトと複数列レイアウトについて説明しましたが、div はネストできるため、レイアウトは基本的に同じです。 div 内で分解すると、やはりこの 2 つのタイプから逃れることはできません。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7824
15
1647
14
1402
52
1300
25
1238
29
EdgeブラウザのショートカットとしてWebページをデスクトップに送信するにはどうすればよいですか?
Mar 14, 2024 pm 05:22 PM
Edge ブラウザのショートカットとして Web ページをデスクトップに送信するにはどうすればよいですか?多くのユーザーは、アクセスページを直接開くことができるように、頻繁に使用する Web ページをデスクトップにショートカットとして表示したいと考えていますが、その方法がわかりません。この問題に応えて、この号の編集者は大多数のユーザーが解決策を考えているので、今日のソフトウェア チュートリアルで共有されているコンテンツを見てみましょう。 Edge ブラウザで Web ページをデスクトップに送信するショートカット方法: 1. ソフトウェアを開き、ページ上の「...」ボタンをクリックします。 2. ドロップダウン メニュー オプションから [アプリケーション] で [このサイトをアプリケーションとしてインストールする] を選択します。 3. 最後に、ポップアップウィンドウでそれをクリックします
Web ページ上の画像を読み込めない場合はどうすればよいですか? 6つのソリューション
Mar 15, 2024 am 10:30 AM
一部のネチズンは、ブラウザの Web ページを開いたときに、Web ページ上の画像が長時間読み込めないことに気づきました。何が起こったのでしょうか?ネットワークは正常であることを確認しましたが、どこに問題があるのでしょうか?以下のエディタでは、Web ページの画像が読み込めない問題に対する 6 つの解決策を紹介します。 Web ページの画像を読み込めない: 1. インターネット速度の問題 Web ページに画像が表示されません。これは、コンピュータのインターネット速度が比較的遅く、コンピュータ上で開いているソフトウェアが多いためと考えられます。また、アクセスする画像が比較的大きいため、読み込みタイムアウトが原因である可能性があります。その結果、画像が表示されません。ネットワーク速度をより多く消費するソフトウェアをオフにすることができます。タスク マネージャーに移動して確認できます。 2. 訪問者が多すぎる Web ページに写真が表示されない場合は、訪問した Web ページが同時に訪問されたことが原因である可能性があります。
ネットワーク接続は正常であるにもかかわらず、ブラウザが Web ページにアクセスできない場合の考えられる理由
Feb 19, 2024 pm 03:45 PM
ブラウザは Web ページを開けませんが、ネットワークは正常です。多くの理由が考えられます。この問題が発生した場合は、段階的に調査して具体的な原因を特定し、問題を解決する必要があります。まず、Web ページを開けないのは特定のブラウザに限定されているのか、それともすべてのブラウザで Web ページを開けないのかを判断します。 1 つのブラウザだけで Web ページを開けない場合は、テストのために Google Chrome、Firefox などの他のブラウザを使用してみることができます。他のブラウザでページを正しく開くことができる場合、問題はその特定のブラウザにある可能性があります。
Win11での管理者権限の取得について詳しく解説
Mar 08, 2024 pm 03:06 PM
Windows オペレーティング システムは世界で最も人気のあるオペレーティング システムの 1 つであり、その新バージョン Win11 が大きな注目を集めています。 Win11 システムでは、管理者権限の取得は重要な操作であり、管理者権限を取得すると、ユーザーはシステム上でより多くの操作や設定を実行できるようになります。この記事では、Win11システムで管理者権限を取得する方法と、権限を効果的に管理する方法を詳しく紹介します。 Win11 システムでは、管理者権限はローカル管理者とドメイン管理者の 2 種類に分かれています。ローカル管理者はローカル コンピュータに対する完全な管理権限を持っています
Oracle SQLの除算演算の詳細説明
Mar 10, 2024 am 09:51 AM
OracleSQL の除算演算の詳細な説明 OracleSQL では、除算演算は一般的かつ重要な数学演算であり、2 つの数値を除算した結果を計算するために使用されます。除算はデータベース問合せでよく使用されるため、OracleSQL での除算演算とその使用法を理解することは、データベース開発者にとって重要なスキルの 1 つです。この記事では、OracleSQL の除算演算に関する関連知識を詳細に説明し、読者の参考となる具体的なコード例を示します。 1. OracleSQL での除算演算
Webページが開けない場合の対処法
Feb 21, 2024 am 10:24 AM
Web ページが開かない問題を解決する方法 インターネットの急速な発展に伴い、人々は情報を取得し、通信し、娯楽するためにますますインターネットに依存するようになりました。しかし、時々Webページが開けないという問題に遭遇し、多くのトラブルを引き起こします。この記事では、Web ページが開かない問題を解決するための一般的な方法をいくつか紹介します。まず、Web ページを開けない理由を特定する必要があります。考えられる原因には、ネットワークの問題、サーバーの問題、ブラウザの設定の問題などが含まれます。以下にいくつかの解決策を示します: ネットワーク接続を確認します: まず、
WebページでPHPを開く方法
Mar 22, 2024 pm 03:20 PM
Web ページで PHP コードを実行するには、Web サーバーが PHP をサポートし、適切に構成されていることを確認する必要があります。 PHP は 3 つの方法で開くことができます。 * **サーバー環境:** PHP ファイルをサーバーのルート ディレクトリに配置し、ブラウザを通じてアクセスします。 * **統合開発環境: **PHP ファイルを指定した Web ルート ディレクトリに配置し、ブラウザを通じてアクセスします。 * **リモート サーバー:** サーバーによって提供される URL アドレスを介して、リモート サーバー上でホストされている PHP ファイルにアクセスします。
WordPress Web ページの位置ずれを解決するためのガイド
Mar 05, 2024 pm 01:12 PM
WordPress Web ページの位置のずれを解決するためのガイド WordPress Web サイトの開発では、Web ページ要素の位置がずれていることがあります。これは、さまざまなデバイスの画面サイズ、ブラウザの互換性、または不適切な CSS スタイル設定が原因である可能性があります。このずれを解決するには、問題を注意深く分析し、考えられる原因を見つけて、段階的にデバッグおよび修復する必要があります。この記事では、WordPress Web ページの位置ずれに関する一般的な問題とその解決策をいくつか紹介し、開発に役立つ具体的なコード例を提供します。
