<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title> ;単一列レイアウト</title>
<style>
body{
margin:0;
パディング: 0;
}
.header{
width: 100 %;
高さ: 50px;
背景色: 緑;
}
.main{
幅: 90%;
/*高さ: 500px;*/
背景色: 茶色;
/* margin-right: auto; 右に押して、左に留まります
margin-left: auto; 左に押して、右に留まります*/
margin:5px auto; /*これは略語で、上下の余白は5px、左右の自動は中央揃え、フォーカスはブロック部分の水平中央にあります*/
}
.main .left{
width: 30%;
height : 500px;
background-color: ピンク;
float: left;/*一番上のレイヤーまで左にフロートさせたいので、そこから離れますドキュメント フローから下の行を上に移動します*/
}
.main .right{
width: 69%;
height: 500px;
background-color: deeppink;
float: right;/*右と左は同じ効果を持ち、フローティング後に新しいドキュメント フローを形成します*/
}
.footer{
. width: 90%;
height: 60px ;
背景色: 青紫;
マージン:0 auto;
}
.clear{
Clear: Both;
}
</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>
を直接使用する場合
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
.main .left を使用すると、このスタイルがメイン クラスの下に残されることが明確になり、ブラウザはレンダリングしたいオブジェクトをより正確に見つけることができます。
これは命名です。特定の要件はありません。好きな名前を付けることができます