HTML+CSS 시작하기 쉬운 상자 모델 테두리(2부)

보통 p 태그에는 테두리를 추가하는 일이 거의 없지만, 디자인할 때는 더 눈에 띄도록 div 태그에 테두리를 추가합니다.

예를 들어 보겠습니다. 예를 들어 웹사이트 홈페이지에서 머리 중간 부분(두 부분으로 나누어져 있음)과 아래쪽 부분, 이런 레이아웃 스타일을 어떻게 구현해야 할까요?

먼저 큰 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>

, 머리 중간과 아래쪽에 각각 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;   /*居中*/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>

제출하다 코드 재설정

자동운전