1/3/5
主流布局的类型：
1.静态布局（static）
静态布局是针对PC段的传统Web设计。设计一个居中布局，一般具有固定的宽度，当浏览器窗口缩小时，页面内容会被遮挡，呈现横竖向滚动条。
2.响应式布局（responsive）
针对越来越多的移动端设备，一个web设计能够兼容多个终端。通过CSS3中的Media Query（媒介查询），采用栅格化方式，分别为不同的屏幕分辨率定义布局。
3.弹性布局（flexbox）
响应式布局中的一种，为了实现响应式布局，CSS3提供的一种最新布局模式。提供更加高效的方式来对布局容器的子元素进行排列、对齐和分配空白空间。
PC站常见布局
1. 一列布局（静态布局）：一列自适应居中
2. 两列布局：一列固定宽+一列自适应
3. 三列布局（双飞翼布局）：中间列自适应宽+左右列固定宽
一列布局：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>一列布局：一列自适应居中</title>
<style>
* {
margin:0;
padding:0;
}
html,body {
height:100%;
}
.container {
width:600px;
height:100%;
margin:0 auto;
background:gray;
border:1px red solid;
}
</style>
</head>
<body>
<div class="container"> 页面</div>
</body>
</html>
两列布局：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>两列布局：一列固定宽，一列自适应</title>
<style>
* {
margin:0;
padding:0;
}
html,body {
height:100%;
}
aside, .main {
height:100%;
border:1px red solid;
}
aside {
background:#0FF;
float:left;
width:200px;
}
.main {
margin-left:210px;
background:#CC3;
}
</style>
</head>
<body>
<aside>边栏导航</aside>
<div class="main">主体box</div>
</body>
</html>
双飞翼布局：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
* {
margin:0;
padding:0;
}
html, body {
height:100%;
}
.main,.left,.right {
height:100%;
float:left;
}
.main {
width:100%;
padding-left:200px;
padding-right:300px;
box-sizing:border-box;
background:#CCC;
}
.left {
margin-left:-100%;
width:200px;
background:#0CF;
}
.right {
margin-left:-300px;
width:300px;
background:#F63;
}
</style>
</head>
<body>
<div class="main">中中中中中间</div>
<div class="left">左边左边左边左边</div>
<div class="right">右边</div>
</body>
</html>
网友评论