HTML の基本 - CSS スタイルシート、スタイル属性、フォーマット、レイアウトの詳細

HTML の基本 - CSS スタイルシート、スタイル属性、フォーマット、レイアウトの詳細

1.位置:固定

一部の Web サイトの右下隅にあるポップアップ ウィンドウなどの、ブラウザーを基準としたロックされた位置。

例:

2.位置絶対

絶対位置:

1. 外側のレイヤーに position: absolute (または relative) が指定されていない場合、div はブラウザーを基準として配置されます (次の図の b を参照) (ブラウザーの右境界から 50 ピクセル、下境界から 20 ピクセル)。

2. 外側のレイヤーに position: absolute (または relative) が指定されている場合、div は外側の境界線を基準として配置されます (下の図の bb など) (d の右境界線から 50 ピクセル、d の下境界線から 20 ピクセル)。

例:

3.位置:相対的

相対位置:

下の図に示すように、この div を含む div の特定の位置を基準に固定されます。外側のレイヤーに含まれていない場合、相対位置はブラウザに対して固定されます。

例:

4. レイヤー化( z-index

Z軸方向階層化は、紙のスタックに分割することと理解でき、層の数が多いほど、上部に近くなります。

上記の相対的な例では、aa が a をカバーしていることがわかります。これは、後から記述したコードの表示レベルが前に近いためです。では、コードの順序を変えずに、aa をカバーさせるにはどうすればよいのでしょうか。次のように:

例:

5.フロート:

Leftまたはrightを使用する場合、位置 (または) を指定する必要はなく、ブラウザに直接相対的になります。外側の部分が折り返されている場合、1 行を除いて外側のdivに対して左上または右上の位置に表示されます

追加: 1. overflow: hidden; //余分な部分を非表示にします。スクロールすると、スクロールバーが表示されます。

<div ></div> //フローを切り捨てる

2. カーソル: マウスが指しているときのポインターの形状。

3. 半透明効果:

<div class="box">透明領域<div>

スタイルシート内のコードは次のとおりです。

。箱

{

不透明度:0.5; -moz-不透明度:0.5; フィルター:アルファ(不透明度=50)

}

練習例をまとめると、drubaウェブサイトのフォーマットレイアウトの一部を作成します。

HTMLコード:

XML/HTML コードコンテンツをクリップボードにコピー
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >   
  2. < html   xmlns = "http://www.w3.org/1999/xhtml" >   
  3. <ヘッド>   
  4. <メタ  http-equiv = "コンテンツタイプ"  コンテンツ= "text/html; 文字セット = utf-8"   />   
  5. < title >無題の文書</ title >   
  6. <スタイル タイプ= "text/css" >   
  7. .a
  8. {
  9. border:5px 青一色;
  10. 幅:1000ピクセル;
  11. 高さ:100px;
  12. マージン:10px;
  13. 左:150px;
  14. 上:80px;
  15. 位置:絶対;}
  16. .b
  17. {
  18. border:5px 青一色;
  19. 幅:240ピクセル;
  20. 高さ:200px;
  21. マージン:10px;
  22. 左:150px;
  23. 上:200px;
  24. 位置:絶対;}
  25. .c
  26. {
  27. border:5px 青一色;
  28. 幅:740ピクセル;
  29. 高さ:300px;
  30. マージン:10px;
  31. 左:410px;
  32. 上:200px;
  33. 位置:絶対;}
  34. .d
  35. {
  36. border:5px 青一色;
  37. 幅:740ピクセル;
  38. 高さ:200px;
  39. マージン:10px;
  40. 左:410px;
  41. 上:520px;
  42. 位置:絶対;}
  43. .e
  44. {
  45. border:5px 青一色;
  46. 幅:240ピクセル;
  47. 高さ:1500ピクセル;
  48. マージン:10px;
  49. 左:150px;
  50. 上:420px;
  51. 位置:絶対;}
  52. .f
  53. {
  54. border:5px 青一色;
  55. 幅:240ピクセル;
  56. 高さ:150px;
  57. マージン:10px;
  58. 左:150px;
  59. 上:1940ピクセル;
  60. 位置:絶対;}
  61. .g
  62. {
  63. border:5px 青一色;
  64. 幅:740ピクセル;
  65. 高さ:1350ピクセル;
  66. マージン:10px;
  67. 左:410px;
  68. 上:740ピクセル;
  69. 位置:絶対;}
  70. .h
  71. {
  72. border:5px 青一色;
  73. 幅:1000ピクセル;
  74. 高さ:200px;
  75. マージン:10px;
  76. 左:150px;
  77. 上:2110px;
  78. 位置:絶対;}
  79. 。私
  80. {
  81. border:5px 青一色;
  82. 幅:1000ピクセル;
  83. 高さ:200px;
  84. マージン:10px;
  85. 左:150px;
  86. 上:2330ピクセル;
  87. 位置:絶対;}
  88. </スタイル>   
  89. </ヘッド>   
  90.   
  91. <本文  bgcolor = "#F0F0F0" >   
  92. < div  クラス= "a" > a </ div >   
  93. < div  クラス= "b" > b </ div >   
  94. < div  クラス= "c" > c </ div >   
  95. < div  クラス= "d" > d </ div >   
  96. < div  クラス= "e" > e </ div >   
  97. < div  クラス= "f" > f </ div >   
  98. < div  クラス= "g" > g </ div >   
  99. < div  クラス= "h" > h </ div >   
  100. < div  クラス= "i" > i </ div >   
  101. </本文>   
  102. </html>   

Webページ操作表示効果図:

上記の HTML の基礎知識に関する記事 - CSS スタイルシート、スタイル属性、フォーマット、レイアウトの詳細な説明は、エディターが皆さんと共有するすべてのコンテンツです。この記事が皆さんの参考になれば幸いです。また、123WORDPRESS.COM をサポートしていただければ幸いです。

オリジナルURL: http://www.cnblogs.com/H2921306656/archive/2016/07/10/5658870.html

<<:  実践で遭遇するフロントエンドの基本(HTML、CSS)

>>:  ページに img src が含まれている場合の二重読み込みの問題

推薦する

proxy_pass がパス パスに従って転送する場合の "/" 問題の詳細な説明

nginx で proxy_pass を設定するときに、^~ に従ってパスを一致させる場合は、pro...

MySQL 8.0.2 オフラインインストールと設定方法のグラフィックチュートリアル

MySQL_8.0.2のオフラインインストール方法は参考までに。具体的な内容は以下のとおりです。次の...

Nginx で Http、Https、WS、WSS を設定する方法

前面に書かれた今日のインターネット分野では、Nginx は最も広く使用されているプロキシ サーバーの...

JavaScript WeakMap の使い方の詳しい説明

WeakMap オブジェクトは、キーが弱参照であるキー/値のペアのコレクションです。キーはオブジェク...

一般的なフロントエンドJavaScriptメソッドのカプセル化

目次1. 値を入力し、そのデータ型を返す** 2. アレイ重複排除3. 文字列の重複排除4. ディー...

CentOS 6.5 インストール mysql5.7 チュートリアル

1. 新機能MySQL 5.7 はエキサイティングなマイルストーンです。デフォルトの InnoDB ...

IE6 スペースバグ修正方法

コードを見てみましょう:コードをコピーコードは次のとおりです。 < !DOCTYPE html...

JavaScript でオブジェクトのプロパティを削除する方法

1. 削除delete は、オブジェクトのプロパティを残さずに削除する唯一の方法ですが、その「代替」...

MySQL トランザクション分離レベルの原則例分析

導入あなたも面接でこれに遭遇したことがあるはずです。トランザクションの分離レベルについてお話ししまし...

ウェブデザインの仕事に応募する方法

<br />みなさんこんにちは!ここで皆さんとチャットできて光栄です! (*^__^*)...

Centos7 に mysql 8.0.13 (rpm) をインストールする詳細なチュートリアル

yum か rpm か? yum によるインストール方法は非常に便利ですが、公式サイトから MySQ...

Dockerのインストール、イメージの作成、NodeJSプログラムの読み込みと実行の詳細なプロセス

システム環境: Windows 7 1. DockerをインストールするDocker公式サイトからd...

IE6/7 で絶対配置された要素が不可解に消えたりブロックされたりする問題を解決する方法

1. 絶対配置レイヤーの隣接フローティング レイヤーの幅が親レイヤーの幅と等しくなく、フロートがクリ...

IDEA の Maven プロジェクトで MySQL 8.0 に接続して使用する方法に関するチュートリアル

まず、私の基本的な開発環境を見てみましょう。オペレーティングシステム: MacOS 10.13.5 ...

Reactはグローバル箇条書きボックスメソッドをカプセル化します

この記事の例では、Reactカプセル化グローバルポップアップボックスの具体的なコードを参考までに共有...