<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>단일 열 레이아웃</title>
< ;스타일>
본문{
너비: 90 %; /*height: 500px; :5px auto; /*약어입니다. 위쪽 및 아래쪽 패딩은 5px이고 왼쪽 및 오른쪽 자동은 중앙에 있습니다. 블록 부분의 가로 중심에 있습니다*/
}
.main .left{
width: 30%;
height: 500px;
background-color: pink;
float: left;/*왼쪽으로 플로팅하고 싶습니다. 상단, 문서 흐름 밖으로, 하단 행을 위로 이동*/
}
.main .right{
width: 69%;
height: 500px;
background-color: deeppink;
float: right;/* 오른쪽과 왼쪽의 효과는 동일합니다.*/
}
.footer{
. width: 90%;
height: 60px;
background- color: blueviolet;
margin:0 auto;
}
.clear{
clear: 둘 다;
}
</style>
</head>
<body>
<div class="header" ></div>
<div class="main">
<div class="left"></div>
<div class="right"></div>
<div class="clear "></div>
</div>
<div class="footer"></div>
</body>
</html>
. style에서 .left 스타일을 설정할 때는 main .left
, .clear 스타일을 설정할 때는 .clear를 직접 사용하세요
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
.main .left를 사용하면 이 스타일이 기본 클래스 아래에 남아 있음을 분명히 알 수 있으며, 이를 통해 브라우저는 렌더링하려는 객체를 더 정확하게 찾을 수 있습니다.
이것은 네이밍이며 특정 요구 사항은 없습니다. 원하는 대로 이름을 지정할 수 있습니다