HTML常用布局---新浪布局
新浪布局
头部区域自适应 尾部区域自适应 中间区域固定宽度 包含两个固定宽度的模块，并且并列渲染 两个盒子，一个浮动，一个在文档流上 min-width 设置最小宽度 min-height 设置最小高度 max-width 设置最大宽度 max-height 设置最大高度
1/*解决显示不全的问题，我们可以设置最小宽度*/
2body {
3 min-width: 1000px;
4}
5* {
6 margin: 0;
7 padding: 0;
8}
9.header {
10 height: 100px;
11 background: red;
12}
13.container {
14 width: 1000px;
15 /*居中*/
16 margin: 0 auto;
17 background: yellow;
18}
19/*左边的盒子*/
20.left {
21 float: left;
22 width: 400px;
23 height: 500px;
24 background: gold;
25}
26/*右边的盒子*/
27.right {
28 /*固定宽度*/
29 /*width: 600px;*/
30 /*更好的方案是自适应*/
31 margin-left: 410px;
32 height: 400px;
33 background: green;
34}
35.footer {
36 height: 50px;
37 background: pink;
38}
39.clearfix:after {
40 /*设置内容*/
41 content: '';
42 display: block;
43 /*清除浮动*/
44 clear: both;
45}
46
47<body>
48 <div class="header"></div>
49 <div class="container clearfix">
50 <div class="left"></div>
51 <div class="right"></div>
52 </div>
53 <div class="footer"></div>
54</body>
变形 中间的内容区域自适应（例如：80%居中） 此时当页面小于内容区域最小盒子宽度的时候，头部和尾部显示不全了， 我们可以让页面的最小宽度不小于该宽度即可
浙公网安备 33010602011771号