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 が含まれている場合の二重読み込みの問題

推薦する

MySQL での select、distinct、limit の使用

目次1. はじめに2. 選択2.1 単一列のクエリ2.2 複数の列のクエリ2.3 すべての列をクエリ...

自動ヘルスレポートを実現するDocker+Selenium方式

この記事では、ある大学の健康報告システムを例に、Web 側の自動化操作を完成させます。使用したテクノ...

jQueryはアコーディオンの小さなケースを実装します

この記事では、アコーディオンを実装するためのjQueryの具体的なコードを参考までに紹介します。具体...

Linux 環境の Apache で https サービスを有効にする方法の詳細な説明

この記事では、Linux 環境の Apache で https サービスを有効にする方法について説明...

MySql の集計関数に条件式を追加する方法

MySQL のフィルタリングのタイミングは、集計関数で使用される where 条件と having ...

全文検索とキーワードスコアリング方式のMySQL実装例

1. はじめに今日、同僚から、MySQL を使用して ElasticSearch に似た全文検索機能...

Navicat for Mysql 接続エラー 1251 (接続失敗) の問題を解決する

以前書いた内容が詳細さに欠けていたため、今回は修正・補足しました。ただし、以前の MySQL バージ...

Vue+Element UI でサマリーポップアップウィンドウを実装するプロセス全体

シナリオ: 検査文書には n 個の検査詳細があり、検査詳細には n 個の検査項目があります。実装効果...

派手なカルーセル効果を実現するJavaScript

この記事では、JavaScriptで派手なカルーセル効果を実装する2つの方法を紹介します。具体的な内...

MYSQL大規模書き込み問題の最適化の詳細な説明

概要: MySQL のパフォーマンス最適化について話すとき、誰もがクエリ パフォーマンスを向上させる...

SQL と NoSQL の違いのまとめ

主な違い: 1. タイプSQL データベースは主にリレーショナル データベース (RDBMS) とし...

MYSQLの文字セット設定方法(端末の文字セット)の詳しい説明

序文ターミナルを使用してデータベースまたはテーブルを作成するたびに、文字セットが latin1 であ...

ボックスモデルのサイズの詳細な説明は、パディング、マージン、境界の値によって異なります。

ボックス モデルは、要素ボックスの幅と高さ、パディング、境界線、余白のサイズを指定します。境界線の内...

モバイルレイアウト用の動的REMの実装

ダイナミックレム1. まず、現在の長さの単位を紹介しましょうpx em Mの幅 / 漢字の幅 1em...

Docker イメージ管理の一般的な操作コード例

ミラーリングも Docker のコアコンポーネントの 1 つです。ミラーリングはコンテナ操作の基盤で...