007.前端开发常识，前端根本CSS（2020
标签：
一、构造 一列固定宽度且居中 两列左窄右宽型 通栏平均漫衍型
1、一列固定宽度且居中构造
<body>
.top+.banner+.main+.footer 按Tab键，得到下框中代码
<div class="top"></div> <div class="banner"></div> <div class="main"></div> <div class="footer"></div>
</body>
2、两列左窄右宽型构造
<body>
.top+.banner+(.main>.left+.right)+.footer 按Tab键，，得到下框中代码
<div class="top"></div> <div class="banner"></div> <div class="main"> <div class="left"></div> <div class="right"></div> </div> <div class="footer"></div>
</body> 完整代码
/* 1、一列固定宽度且居中构造 */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box { /*把各div反复代码抽取出来*/
width: 900px;
background-color: #eee;
border: 1px dashed #ccc;
margin: 0 auto;
}
.top {
height: 80px;
}
.banner {
height: 120px;
margin: 5px auto;
}
.main {
height: 500px;
}
.footer {
height: 100px;
margin: 5px auto 0; /*上5px,摆布居中,下是0px*/
}
</style>
</head>
<body>
<div class="top box">top</div>
<div class="banner box">banner</div>
<div class="main box"></div>
<div class="footer box"></div>
</body>
</html>
----------------------------------------
<div></div><div></div><div><div></div><div></div></div><div></div>
007.前端开发常识，前端根本CSS（2020-01-28）
温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/30923.html
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")