pc端常见的几种布局：分栏布局，通栏布局，版心布局，版心布局
1分栏布局: float
2 通栏布局: 在页面中不设置宽度，让默认宽度和浏览器等宽的布局
3.版心布局: 内容始终出现在整个浏览器版面的中心固定的版心宽度+margin: 0 auto;心布局: 内容始终出现在整个浏览器版面的中心固定的版心宽度+margin: 0 auto;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 清内外边距 */
* {
margin: 0;
padding: 0;
font-size: 26px;
}
li {
/* 清li的小圆点 */
list-style: none;
}
/* 版心1226px */
/* 设置版心 */
.w {
width: 1226px;
/* 版面居中 */
margin: 0 auto;
}
/* 头部 */
.header {
height: 100px;
background-color: #6cf;
margin-bottom: 10px;
}
/* banner部分 */
.banner {
height: 300px;
background-color: #FFE4E1;
margin-bottom: 10px;
}
.banner-l {
float: left;
width: 200px;
height: 100%;
background-color: #FFA500;
}
.banner-r {
float: right;
width: 200px;
height: 100%;
background-color: #90EE90;
}
.list {
height: 300px;
background-color: tomato;
margin-bottom: 10px;
}
.list li {
/* 每一个宽度299px 右侧外边距10px */
float: left;
width: 299px;
height: 300px;
background-color: #0a0;
margin-right: 10px;
}
/* 最后一个不要外边距 */
.list .last {
margin: 0;
}
.footer {
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<!-- 背景占满整个浏览器，内容在版心中 -->
<!-- 通栏嵌套版心布局 -->
<!-- 头部 -->
<div class="header">
<div class="w">
我是头部<br>
版心1226
<br>
高度100
<br>
</div>
</div>
<!-- banner部分 版心布局 -->
<div class="banner w">
<div class="banner-l">左<br>宽200高300</div>
<div class="banner-r">右<br>宽200高300</div>
</div>
<!-- 列表部分 -->
<div class="list w">
<ul>
<li>每一个宽度299px 高300 右侧外边距10px </li>
<li></li>
<li></li>
<li class="last"></li>
</ul>
</div>
<!-- 底部 -->
<div class="footer w">
我是底部<br>
高度100
</div>
</body>
</html>