HTML+CSSで簡単に始められるボックスモデルボーダー（後編）

通常、p タグに枠線を追加することはほとんどありませんが、デザインするときは、より明白に見えるように div タグに枠線を追加します

以下の例を実行してみましょう: たとえば、Web サイトのホームページでは、ヘッダーの中央部分頭の部分 (左右の 2 つの部分に分割) 下部のようなレイアウトスタイルを実装するにはどうすればよいですか

まず、頭の中央部分と下部をこの div に配置する必要があります。この方法では、最初に div の CSS スタイルを作成し、この div に 3 つの div タグを追加する必要があります

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
        #dv1{
          width:800px;
          height:500px;
          border:1px solid red;
          margin:0 auto;   /*居中*/
        }


  </style>
</head>
<body>
    <div id="dv1">
          <div id="top">头部</div>
          <div id="cen">中部</div>
          <div id="but">底部</div>
    </div>
</body>
</html>

次に、頭の中央と下部にスタイルを追加する必要があります完全なコードはそれぞれ次のとおりです:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
        #dv1{
          width:800px; height:500px;border:1px solid red;margin:0 auto;   /*居中*/text-align:center;
        }
        #top{
          width:780px;height:100px;border:1px solid green;margin:0 auto;background-color:#ccc;margin-top:30px;
        }
        #cen{
          width:780px; height:200px;border:1px solid black;margin:0 auto;background-color:#f77;margin-top:5px;
        }
        #but{
          width:780px;height:100px;border:1px solid #f60;margin:0 auto;margin-top:5px;
        }

        #left{
          width:200px;
          height:198px;
          border:1px solid green;
          margin-left:5px;
          float:left;
        }
        #right{
          width:570px;
          height:198px;
          border:1px solid black;
          float:right;
        }

  </style>
</head>
<body>
    <div id="dv1">
          <div id="top">头部</div>
          <div id="cen">
            <div id="left">左边</div>
            <div id="right">右边</div>
          </div>
          <div id="but">底部</div>
    </div>
</body>
</html>

注: 境界線も上下左右に分割する必要があります

境界線-上

境界線-左左

境界線-右右

境界線の下端

学び続ける

新しいファイル

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #dv1{ width:800px; height:500px;border:1px solid red;margin:0 auto; /*居中*/text-align:center; } #top{ width:780px;height:100px;border:1px solid green;margin:0 auto;background-color:#ccc;margin-top:30px; } #cen{ width:780px; height:200px;border:1px solid black;margin:0 auto;background-color:#f77;margin-top:5px; } #but{ width:780px;height:100px;border:1px solid #f60;margin:0 auto;margin-top:5px; } #left{ width:200px; height:198px; border:1px solid green; margin-left:5px; float:left; } #right{ width:570px; height:198px; border:1px solid black; float:right; } </style> </head> <body> <div id="dv1"> <div id="top">头部</div> <div id="cen"> <div id="left">左边</div> <div id="right">右边</div> </div> <div id="but">底部</div> </div> </body> </html>

提出するリセットコード

自動運転