HTML常用布局---新浪布局

MarkdownPad Document

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {

margin: 0;

padding: 0;

border: 0;

}

/* BODY

=============================================================================*/

body {

font-family: Helvetica, arial, freesans, clean, sans-serif;

font-size: 14px;

line-height: 1.6;

color: #333;

background-color: #fff;

padding: 20px;

max-width: 960px;

hight:500px;

margin: 0 auto;

}

body>*:first-child {

margin-top: 0 !important;

}

body>*:last-child {

margin-bottom: 0 !important;

}

/* BLOCKS

=============================================================================*/

p, blockquote, ul, ol, dl, table, pre {

margin: 15px 0;

}

/* HEADERS

=============================================================================*/

h1, h2, h3, h4, h5, h6 {

margin: 20px 0 10px;

padding: 0;

font-weight: bold;

-webkit-font-smoothing: antialiased;

}

h1 tt, h1 code, h2 tt, h2 code, h3 tt, h3 code, h4 tt, h4 code, h5 tt, h5 code, h6 tt, h6 code {

font-size: inherit;

}

h1 {

font-size: 28px;

color: #000;

}

h2 {

font-size: 24px;

border-bottom: 1px solid #ccc;

color: #000;

}

h3 {

font-size: 18px;

}

h4 {

font-size: 16px;

}

h5 {

font-size: 14px;

}

h6 {

color: #777;

font-size: 14px;

}

body>h2:first-child, body>h1:first-child, body>h1:first-child+h2, body>h3:first-child, body>h4:first-child, body>h5:first-child, body>h6:first-child {

margin-top: 0;

padding-top: 0;

}

a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6 {

margin-top: 0;

padding-top: 0;

}

h1+p, h2+p, h3+p, h4+p, h5+p, h6+p {

margin-top: 10px;

}

/* LINKS

=============================================================================*/

a {

color: #4183C4;

text-decoration: none;

}

a:hover {

text-decoration: underline;

}

/* LISTS

=============================================================================*/

ul, ol {

padding-left: 30px;

}

ul li > :first-child,

ol li > :first-child,

ul li ul:first-of-type,

ol li ol:first-of-type,

ul li ol:first-of-type,

ol li ul:first-of-type {

margin-top: 0px;

}

ul ul, ul ol, ol ol, ol ul {

margin-bottom: 0;

}

dl {

padding: 0;

}

dl dt {

font-size: 14px;

font-weight: bold;

font-style: italic;

padding: 0;

margin: 15px 0 5px;

}

dl dt:first-child {

padding: 0;

}

dl dt>:first-child {

margin-top: 0px;

}

dl dt>:last-child {

margin-bottom: 0px;

}

dl dd {

margin: 0 0 15px;

padding: 0 15px;

}

dl dd>:first-child {

margin-top: 0px;

}

dl dd>:last-child {

margin-bottom: 0px;

}

/* CODE

=============================================================================*/

pre, code, tt {

font-size: 12px;

font-family: Consolas, "Liberation Mono", Courier, monospace;

}

code, tt {

margin: 0 0px;

padding: 0px 0px;

white-space: nowrap;

border: 1px solid #eaeaea;

background-color: #f8f8f8;

border-radius: 3px;

}

pre>code {

margin: 0;

padding: 0;

white-space: pre;

border: none;

background: transparent;

}

pre {

background-color: #f8f8f8;

border: 1px solid #ccc;

font-size: 13px;

line-height: 19px;

overflow: auto;

padding: 6px 10px;

border-radius: 3px;

}

pre code, pre tt {

background-color: transparent;

border: none;

}

kbd {

-moz-border-bottom-colors: none;

-moz-border-left-colors: none;

-moz-border-right-colors: none;

-moz-border-top-colors: none;

background-color: #DDDDDD;

background-image: linear-gradient(#F1F1F1, #DDDDDD);

background-repeat: repeat-x;

border-color: #DDDDDD #CCCCCC #CCCCCC #DDDDDD;

border-image: none;

border-radius: 2px 2px 2px 2px;

border-style: solid;

border-width: 1px;

font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;

line-height: 10px;

padding: 1px 4px;

}

/* QUOTES

=============================================================================*/

blockquote {

border-left: 4px solid #DDD;

padding: 0 15px;

color: #777;

}

blockquote>:first-child {

margin-top: 0px;

}

blockquote>:last-child {

margin-bottom: 0px;

}

/* HORIZONTAL RULES

=============================================================================*/

hr {

clear: both;

margin: 15px 0;

height: 0px;

overflow: hidden;

border: none;

background: transparent;

border-bottom: 4px solid #ddd;

padding: 0;

}

/* TABLES

=============================================================================*/

table th {

font-weight: bold;

}

table th, table td {

border: 1px solid #ccc;

padding: 6px 13px;

}

table tr {

border-top: 1px solid #ccc;

background-color: #fff;

}

table tr:nth-child(2n) {

background-color: #f8f8f8;

}

/* IMAGES

=============================================================================*/

img {

max-width: 100%

}

新浪布局

---

头部区域自适应
尾部区域自适应
中间区域固定宽度
包含两个固定宽度的模块，并且并列渲染
两个盒子，一个浮动，一个在文档流上
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%居中）
此时当页面小于内容区域最小盒子宽度的时候，头部和尾部显示不全了，
我们可以让页面的最小宽度不小于该宽度即可

---