布局的概念
将页面分成多个部分,按上中下、左中右、上下、左右等结构进行排列。
布局分类
- 固定宽度布局,有960/1000/1024px常用宽度。
- 不固定宽度布局,主要是文档流的原理来布局。
- 响应式布局:
- PC上固定宽度,手机上不固定宽度。
- 属于混合布局。
布局的思路
- 从大到小
- 先定大局
- 完善每个部分的小布局
- 从小到大
- 先小布局
- 组合完成大布局
图片解析(来自添加链接描述)[来自写代码啦]
注意下面的介绍float布局
float布局
- 步骤
- 子元素加上float:left和width
- 父元素加上
.clearfix::after{content: '';display: block;clear:both;}`
- 理解
- 留空间或者最后一个不设置宽度
- 手机无IE,float布局专为IE准备,无需响应式布局
- 举例说明
做个顶部条,如图:
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>nav</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul,ol{
list-style: none;
}
header{
display: block;
}
.clearfix::after{
content: '';
display: block;
clear:both;
}
.logo{
background: grey;
display: inline-block;
float:left;
margin-top: 8px;
margin-left: 10px;
}
.logo > span{
height: 26px;
vertical-align: middle;
}
.nav{
float: right;
margin-left: 20px;
}
ul > li{
float: left;
padding: 4px 0.5em;
line-height: 32px;
}
ul{
display: inline-block;
}
header{
background: grey;
color:white;
}
</style>
</head>
<body>
<header class="clearfix">
<div class="logo">
<span>测试</span>
</div>
<ul class="clearfix nav">
<li>测试1</li>
<li>测试2</li>
<li>测试3</li>
<li>测试4</li>
</ul>
</header>
</body>
</html>