1.常见的页面布局:
1.1.常见的页面布局一:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>常见的页面布局</title>
<style>
* {
padding: 0;
margin: 0;
}
/* 通栏盒子(和浏览器宽度一样)不需要设置宽度 */
.top {
height: 150px;
background-color: pink;
text-align: center;
line-height: 150px;
}
.banner {
height: 50px;
background-color: aqua;
text-align: center;
line-height: 50px;
margin: 10px 0;
}
.main {
height: 300px;
background-color: aquamarine;
line-height: 300px;
text-align: center;
}
.footer {
height: 200px;
background-color: blueviolet;
line-height: 200px;
text-align: center;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="top">top</div>
<div class="banner">banner</div>
<div class="main">main</div>
<div class="footer">footer</div>
</body>
</html>
1.2.常见的页面布局二:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.top {
height: 150px;
background-color: aqua;
text-align: center;
line-height: 150px;
}
.banner {
height: 50px;
background-color: orange;
text-align: center;
line-height: 50px;
margin: 10px 0;
}
.main {
height: 300px;
background-color: red;
}
.main .left {
float: left;
height: 300px;
width: 200px;
margin-right: 10px;
background-color: skyblue;
text-align: center;
line-height: 200px;
}
.main .right {
height: 300px;
background-color: aquamarine;
width: 1283px;
float: left;
text-align: center;
line-height: 300px;
}
.footer {
height: 150px;
background-color: orange;
text-align: center;
line-height: 150px;
margin: 10px 0;
}
</style>
</head>
<body>
<div class="top">top</div>
<div class="banner">banner</div>
<div class="main">
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</body>
</html>
1.3.常见的页面布局三:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.top {
height: 100px;
background-color: red;
}
.banner {
width: 830px;
height: 150px;
background-color: #bebbeb;
/* margin: 10px 0; */
margin: 10px auto;
}
.one {
width: 830px;
height: 150px;
background-color: #b0b;
margin: auto;
}
.one li {
list-style: none;
height: 150px;
width: 200px;
background-color: green;
margin-right: 10px;
float: left;
}
.one .last {
margin-right: 0;
}
.two {
width: 830px;
height: 250px;
background-color: #b0b;
margin: 10px auto;
}
.two li {
list-style: none;
height: 250px;
width: 200px;
background-color: green;
margin-right: 10px;
float: left;
}
.two .last {
margin-right: 0;
}
.footer {
height: 150px;
background-color: #b0b;
}
</style>
</head>
<body>
<div class="top">top</div>
<div class="banner">banner</div>
<div class="one">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li class="last">4</li>
</ul>
</div>
<div class="two">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li class="last">4</li>
</ul>
</div>
<div class="footer">footer</div>
</body>
</html>
2.浮动布局注意点
1.浮动和标准流的父盒子搭配
先用标准流的父级元素排列上下位置,之后内部子元素采取浮动排列左右位置。
2.一个元素浮动了,理论上其余的兄弟元素也要浮动。
一个盒子里面有多个子盒子,如果其中一个盒子浮动了,那么其他兄弟也应该浮动,以防引起问题。
浮动的盒子值影响浮动盒子后面的标准流,不会影响前面的标准流。
3.网页布局总结
通过盒子模型,清楚知道大部分html标签是一个盒子
通过css浮动、定位可以让每个盒子排列成为网页。
一个完整的网页,是标准流、浮动、定位一起完成布局的,每个都有自己的专门用法。
1.标准流
可以让盒子上下排列或者左右排列,垂直的块级盒子显示就用标准流布局。
2.浮动
可以让多个块级元素一行显示或者左右对齐盒子,多个块级盒子水平显示就用浮动布局。
3.定位
定位最大的特点是偶层叠的概念,就是可以让多个盒子前后叠压来显示。如果元素自由在某个 盒子内动就用定位布局。