【CSS】div配置とWebページレイアウトについて_html/css_WEB-ITnose
div レイアウトを徹底的に学ぶ必要がある理由は、テーブル レイアウトが非常に恥ずかしいためです。両方が同じテーブル内にある場合、
各行の仕様の配分をまったく調整できません。
たとえば。 、次の段落 非常に単純なコード:
<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><body><table border="1"><tr><td width="5%">11111111111111</td><td width="85%">11111111111111</td><td width="5%">11111111111111</td><td width="5%">11111111111111</td></tr><tr><td width="5%">11111111111111</td><td width="5%">11111111111111</td><td width="85%">11111111111111</td><td width="5%">11111111111111</td></tr></table></body></html>
しかし、実際の効果は次のようになります:
テーブルの最初の行だけであるため、これは正常です。レイアウトは td 設定が有効になり、残りの行の td 設定は 1 行目の td 設定によって上書きされます。
この問題は、特に Web デザイナーにとって非常に深刻です。テーブルの境界線属性を 0 に設定すると、何が起こったのかを理解するのが難しくなります。
この問題を解決するには、テーブル レイアウトを引き続き使用する場合、2 つの行を同じテーブルに含めないようにする方法と、テーブルのネストを使用する方法があります。
でも、レイアウトするたびに新しいテーブルを使わないといけないのは大変ですよね？そして、スクリプトはどのようにしてこれほど多くのテーブルに番号を付けるのでしょうか?どのように制御すればよいでしょうか？
したがって、テーブルの Web ページ レイアウトはあまり役に立たず、インライン レイアウトでのみ使用できます。インライン レイアウトにおけるテーブルの役割は、div の方がはるかに強力です。
ただし、div レイアウトでもインライン レイアウトを完了できますが、スタイルで float 属性を定義し、インライン レイアウトを完了する必要があります。行を折り返すにはスタイルで clear:both を使用します。
上記のレイヤー配置は次のコードによって実現されます:
<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>div</title></head><body><!--默认情况下的div对齐--><div style="background:#aa0; width:15%; height:100px;"></div><div style="background:#0a0; width:15%; height:100px;"></div><!--更换对齐方式，必须使用clear:both换行，这个换行符的高度为10px，默认为0px，颜色同网页的背景色--><div style="clear:both; height:10px;"></div><!--使用了行内右对齐的方式，是先写最右图层，再写次右图层，与常人思维相反--><div style="background:#F00; width:10%; height:100px; float:right; margin-right:10%"></div><div style="background:#00f; width:10%; height:100px; float:right;"></div><div style="clear:both; height:10px;"></div><!--使用行内左对齐方式--><div style="background:#0f0; width:10%; height:100px; float:left;"></div><div style="background:#F00; width:10%; height:100px; float:left;"></div><div style="clear:both; height:10px;"></div><div style="background:#00f; width:10%; height:100px; float:left;"></div><!--如果你更换对齐方式，这里是希望从行内左对齐更变成一个无论大小的图层占用一行，而不用clear:both换行的话，这两个图层会叠放在一起，出错--><div style="background:#0af; width:15%; height:100px;"></div><!--此乃正确的使用方式。--><div style="clear:both; height:10px;"></div><div style="background:#aa0; width:15%; height:100px;"></div><div style="background:#0a0; width:15%; height:100px;"></div></body></html>
上記のコードに、引き続き次のコードを追加します:
<div style="background:#eee; width:15%; height:100px; position:absolute; top:5%; left:80%;">游离于体系之外</div><div style="background:#aaa; width:100%; height:30px; position:fixed; top:0%;left:0%">游离于体系之外</div><!--下面两个图层，只是为了说明上面两行代码可以放在任何位置，但不影响网页布局之用--><div style="background:#aa0; width:15%; height:100px;"></div><div style="background:#0a0; width:15%; height:100px;"></div>
position:fixed のレイヤーは、スクロール バーが引かれても常にヘッドがぶら下がった状態になります。 :
「ナビゲーション バー」レイヤーと「広告」レイヤーの上記 2 行のコードは、ネットワーク レイアウトに影響を与えることなく、どこにでも配置できます。その後、Web ページのすべてのコードは次のように展開されます。
div <div style="background:#eee; width:15%; height:100px; position:absolute; top:5%; left:80%;">游离于体系之外</div><div style="background:#aaa; width:100%; height:30px; position:fixed; top:0%;left:0%">游离于体系之外</div><!--下面两个图层，只是为了说明上面两行代码可以放在任何位置，但不影响网页布局之用--><div style="background:#aa0; width:15%; height:100px;"></div><div style="background:#0a0; width:15%; height:100px;"></div>
ホット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）
ホットトピック
7672
15
1393
52
1206
24
91
11
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を構築します。
HTML、CSS、およびJavaScriptの理解：初心者向けガイド
Apr 12, 2025 am 12:02 AM
webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、
WebアノテーションにY軸位置の適応レイアウトを実装する方法は？
Apr 04, 2025 pm 11:30 PM
Y軸位置Webアノテーション機能の適応アルゴリズムこの記事では、単語文書と同様の注釈関数、特に注釈間の間隔を扱う方法を実装する方法を探ります...
Giteeページ静的なWebサイトの展開に失敗しました：単一のファイル404エラーをトラブルシューティングと解決する方法
Apr 04, 2025 pm 11:54 PM
GiteEpages静的Webサイトの展開が失敗しました：404エラーのトラブルシューティングと解像度Giteeを使用する
CSS3とJavaScriptを使用して、クリック後に周囲の写真を散乱および拡大する効果を実現する方法は？
Apr 05, 2025 am 06:15 AM
画像をクリックした後、散乱と周囲の画像を拡大する効果を実現するには、多くのWebデザインがインタラクティブな効果を実現する必要があります。特定の画像をクリックして周囲を作成してください...
HTML、CSS、およびJavaScript：Web開発者に不可欠なツール
Apr 09, 2025 am 12:12 AM
HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。
