【CSS】div配置とWebページレイアウトについて_html/css

【CSS】div配置とWebページレイアウトについて_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:53:20

オリジナル

1299 人が閲覧しました

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>

ログイン後にコピー

つまり、div レイアウトは、table レイアウトよりもはるかに強力で、制御可能で、使いやすいものになります。