HTML+CSSイージーエントリーレイヤーモデル

レイヤーモデルとは何ですか?

レイヤーレイアウトモデルとは何ですか?レイヤーレイアウトモデルは、画像ソフトウェア PhotoShop で非常に人気のあるレイヤー編集機能のようなもので、各レイヤーを正確に配置して操作することができます。しかし、Web デザインの分野では、レイヤーレイアウトは Web ページサイズの流動性のために一般的ではありませんでした。。ただし、Web ページ上でローカルにレイヤーレイアウトを使用することには依然として利点があります。 HTMLのレイヤーレイアウトについて学びましょう。

WebページにHTML要素を正確に配置する方法画像ソフトPhotoShopのレイヤーと同じように、各レイヤーを正確に配置して操作することができます。 CSS は、レイヤーレイアウトモデルをサポートするための一連の配置プロパティを定義します。

レイヤーモデルには 3 つの形式があります:

1. 絶対配置 (位置: 絶対)

2. 固定配置 (位置: 固定)

コードは次のとおりです。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>层模型</title>
<style type="text/css">
    #dv1{
      width:100px;
      height:100px;
      background:green;
      position:absolute;   /*绝对定位*/
      left:50px;
      top:50px;
    }
   
</style>
</head>
<body>
      <div id="dv1"></div>
</body>
</html>

相対位置、コードは次のとおりです:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>层模型</title>
<style type="text/css">
    #dv1{
      width:100px;
      height:100px;
      background:green;
      position:relative;
      left:50px;
      top:50px;

    }
   
</style>
</head>
<body>
      <div id="dv1"></div>
</body>
</html>

要素のレイヤーモデルで相対位置を設定したい場合は、position:relative (相対位置を示す) を設定する必要があります。ストリーム内の left、right、top、bottom 属性による通常のドキュメント内の要素の位置。相対位置決めのプロセスでは、まず静的 (フロート) モードで要素を生成し (要素はレイヤーのように浮遊します)、次に前の位置に対して相対的に移動します。移動の方向と振幅は左と右によって決まります。、top、bottom 属性では、オフセット前の位置は変更されません。

固定位置

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>层模型</title>
<style type="text/css">
    #dv1{
      width:100px;
      height:100px;
      background:green;
      position:fixed;
      left:50px;
      top:50px;

    }
   
</style>
</head>
<body>
      <div id="dv1"></div>
      <p>php 中文网</p>
      <p>学习电脑</p>
      <p>二次开发</p>
      <p>php 中文网</p>
      <p>学习电脑</p>
      <p>二次开发</p>
      <p>php 中文网</p>
      <p>学习电脑</p>
      <p>二次开发</p>
      <p>php 中文网</p>
      <p>学习电脑</p>
      <p>二次开发</p>
      <p>php 中文网</p>
      <p>学习电脑</p>
      <p>二次开发</p>
      <p>php 中文网</p>
      <p>学习电脑</p>
      <p>二次开发</p>
      <p>php 中文网</p>
      <p>学习电脑</p>
      <p>二次开发</p>
      <p>php 中文网</p>
      <p>学习电脑</p>
      <p>二次开发</p>
      <p>php 中文网</p>
      <p>学习电脑</p>
      <p>二次开发</p>
      <p>php 中文网</p>
      <p>学习电脑</p>
      <p>二次开发</p>
      <p>php 中文网</p>
      <p>学习电脑</p>
      <p>二次开发</p>
      <p>php 中文网</p>
      <p>学习电脑</p>
      <p>二次开发</p>
      <p>php 中文网</p>
      <p>学习电脑</p>
      <p>二次开发</p>
      <p>php 中文网</p>
      <p>学习电脑</p>
      <p>二次开发</p>
      <p>php 中文网</p>
      <p>学习电脑</p>
      <p>二次开发</p>
      <p>php 中文网</p>
      <p>学习电脑</p>
      <p>二次开发</p>
      <p>php 中文网</p>
      <p>学习电脑</p>
      <p>二次开发</p>
      <p>php 中文网</p>
      <p>学习电脑</p>
      <p>二次开发</p>
      <p>php 中文网</p>
      <p>学习电脑</p>
      <p>二次开发</p>
      <p>php 中文网</p>
      <p>学习电脑</p>
      <p>二次开发</p>
      <p>php 中文网</p>
      <p>学习电脑</p>
      <p>二次开发</p>
      <p>php 中文网</p>
      <p>学习电脑</p>
      <p>二次开发</p>


</body>
</html>

学び続ける

新しいファイル

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>层模型</title> <style type="text/css"> #dv1{ width:100px; height:100px; background:green; margin-left:50px; margin-top:50px; position:absolute; /*绝对定位*/ } </style> </head> <body> <div id="dv1"></div> </body> </html>

提出するリセットコード

自動運転