├── 1.1水平居中.html ├── 1.2垂直居中.html ├── 1.3水平垂直居中.html ├── 2.1Float边栏宽度固定-多列布局(改进方案).html ├── 2.1Float边栏宽度固定-多列布局.html ├── 2.2Overflow边栏宽度固定-多列布局.html ├── 2.3Table边栏宽度固定-多列布局.html ├── 2.4Flex边栏宽度固定-多列布局.html ├── 2.5边栏宽度固定-三列布局.html ├── 3.1Float-一列不定宽+一列自适应.html ├── 3.2Table-一列不定宽+一列自适应.html ├── 3.3Flex-一列不定宽+一列自适应.html ├── 3.4Overflow-两列不定宽+一列自适应.html ├── 4.1Float-等分布局.html ├── 4.2Table-等分布局.html ├── 4.3Flex-等分布局.html ├── 5.Float等高多列布局.html ├── 6.页面优化.md ├── README.md ├── css └── reset.style.css ├── 全屏布局demo ├── 1.1.html ├── 1.2.html ├── 1.3.html └── demo.css ├── 多列布局demo ├── 1.1.html ├── 1.2.html ├── 1.3.html ├── 1.4.html ├── 1.5.html ├── 1.6.html ├── 2.1.html ├── 2.2.html ├── 2.3.html ├── 2.4.html ├── 3.1.html ├── 3.2.html ├── 3.3.html ├── 4.1.html └── demo.css └── 居中布局demo ├── 1.1.html ├── 1.2.html ├── 1.3.html ├── 1.4.html ├── 2.1.html ├── 2.2.html ├── 2.3.html ├── 3.1.html ├── 3.2.html ├── 3.3.html └── demo.css /1.1水平居中.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 居中布局-1.1水平居中 6 | 7 | 53 | 54 | 55 | 56 | 57 | 58 |
59 |
60 |

DEMO

61 |

Try Text Align!Try Text Align!

62 |
63 |
64 | 65 | 66 | 67 |
68 |
69 |

DEMO

70 |

Try Text Align!Try Text Align!

71 |
72 |
73 | 74 | 75 | 76 | 77 |
78 |
79 |

DEMO

80 |

Try Text Align!Try Text Align!

81 |
82 |
83 | 84 | 85 | 86 |
87 |
88 |

DEMO

89 |

Try Text Align!Try Text Align!

90 |
91 |
92 | 93 | 94 | -------------------------------------------------------------------------------- /1.2垂直居中.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 居中布局-1.2垂直居中 6 | 7 | 36 | 37 | 38 | 39 | 40 | 41 |
42 |
43 |

DEMO

44 |

Try tvParent parent!Try tvParent parent!

45 |
46 |
47 | 48 | 49 |
50 |
51 |

DEMO

52 |

Try atParent parent!Try atParent parent!

53 |
54 |
55 | 56 | 57 |
58 |
59 |

DEMO

60 |

Try faParent parent!Try faParent parent!

61 |
62 |
63 | 64 | 65 | -------------------------------------------------------------------------------- /1.3水平垂直居中.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 居中布局-1.3水平垂直居中 6 | 7 | 44 | 45 | 46 | 47 | 48 |
49 |
50 |

inline-block + text-align + table-cell + vertical-align

51 |

Try inline-block + text-align + table-cell + vertical-align!Try inline-block + text-align + table-cell + vertical-align!

52 |
53 |
54 | 55 |
56 |
57 |

absolute + transform

58 |

Try absolute + transform!Try absolute + transform!Try absolute + transform!

59 |
60 |
61 | 62 | 63 |
64 |
65 |

flex + justify-content + align-items

66 |

Try flex + justify-content + align-items!Try flex + justify-content + align-items!Try flex + justify-content + align-items!

67 |
68 |
69 | 70 | 71 | -------------------------------------------------------------------------------- /2.1Float边栏宽度固定-多列布局(改进方案).html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 2.1多列布局(改进方案) 6 | 7 | 25 | 26 | 27 |
28 |

left

29 |
30 |
31 |
32 |

right

33 |

right

34 |

right

35 |

right

36 |
37 |
38 | 39 | 40 | -------------------------------------------------------------------------------- /2.1Float边栏宽度固定-多列布局.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 2.1多列布局 6 | 7 | 23 | 24 | 25 | 26 |
27 |

left

28 |
29 |
30 | 31 |

right

32 |

right

33 |
34 | 35 | 36 | -------------------------------------------------------------------------------- /2.2Overflow边栏宽度固定-多列布局.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 2.2多列布局 6 | 7 | 20 | 21 | 22 |
23 |
24 |

left

25 |
26 |
27 |

right

28 |

right

29 |
30 |
31 | 32 | 33 | -------------------------------------------------------------------------------- /2.3Table边栏宽度固定-多列布局.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 2.3 Table多列布局 6 | 7 | 29 | 30 | 31 |
32 |
33 |

left

34 |
35 |
36 |

right

37 |

right

38 |
39 |
40 | 41 | 42 | -------------------------------------------------------------------------------- /2.4Flex边栏宽度固定-多列布局.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 多列布局 6 | 7 | 21 | 22 | 23 |
24 |
25 |

left

26 |
27 |
28 |

right

29 |

right

30 |
31 |
32 | 33 | -------------------------------------------------------------------------------- /2.5边栏宽度固定-三列布局.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 多列布局 6 | 7 | 22 | 23 | 24 |
25 |
26 |

left

27 |
28 |
29 |

center

30 |
31 |
32 |

right

33 |

right

34 |
35 |
36 | 37 | -------------------------------------------------------------------------------- /3.1Float-一列不定宽+一列自适应.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 多列布局 6 | 7 | 22 | 23 | 24 |
25 |
26 |

left

27 |
28 |
29 |

right

30 |

right

31 |
32 |
33 | 34 | -------------------------------------------------------------------------------- /3.2Table-一列不定宽+一列自适应.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 多列布局 6 | 7 | 24 | 25 | 26 |
27 |
28 |

left

29 |
30 |
31 |

right

32 |

right

33 |
34 |
35 | 36 | 37 | -------------------------------------------------------------------------------- /3.3Flex-一列不定宽+一列自适应.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 多列布局 6 | 7 | 21 | 22 | 23 |
24 |
25 |

left

26 |
27 |
28 |

right

29 |

right

30 |
31 |
32 | 33 | 34 | -------------------------------------------------------------------------------- /3.4Overflow-两列不定宽+一列自适应.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 多列布局 6 | 7 | 24 | 25 | 26 |
27 |
28 |

left

29 |
30 |
31 |

center

32 |
33 |
34 |

right

35 |

right

36 |
37 |
38 | 39 | 40 | -------------------------------------------------------------------------------- /4.1Float-等分布局.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 多列布局 6 | 7 | 20 | 21 | 22 |
23 |

1

24 |

2

25 |

3

26 |

4

27 |
28 | 29 | 30 | -------------------------------------------------------------------------------- /4.2Table-等分布局.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 多列布局 6 | 7 | 24 | 25 | 26 |
27 |
28 |

1

29 |

2

30 |

3

31 |

4

32 |
33 |
34 | 35 | 36 | -------------------------------------------------------------------------------- /4.3Flex-等分布局.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 多列布局 6 | 7 | 21 | 22 | 23 |
24 |

1

25 |

2

26 |

3

27 |

4

28 |
29 | 30 | 31 | -------------------------------------------------------------------------------- /5.Float等高多列布局.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 多列布局 6 | 7 | 27 | 28 | 29 |
30 |
31 |

left

32 |
33 |
34 |

right

35 |

right

36 |
37 |
38 | 39 | -------------------------------------------------------------------------------- /6.页面优化.md: -------------------------------------------------------------------------------- 1 | #为什么要优化 2 | **提升网页响应速度** 3 | **对搜索引起、屏幕阅读器友好** 4 | **提高可读性，可维护性** 5 | 6 | #页面优化 7 | ##减少请求 8 | 1.图片合并 9 | CSS SPRITE 10 | 2.CSS文件合并 11 | 多个css文件合并为一个 12 | 适当使用内联样式 13 | 避免使用import的方式引入css文件 14 | 15 | ##减少文件大小 16 | 1.减少图片大小 17 | *选择合适的图片格式* 18 | 19 | - PNG格式图片 适合需要半透明效果的地方 20 | - JPG格式图片 适合色彩炫丽的大图片，JPG格式图片会适当做压缩 21 | 22 | *压缩图片* 23 | 24 | - ImageOptim 25 | - ImageAlpha 26 | - JPEGmini 27 | - ... 28 | 29 | 等等图片压缩工具 30 | 31 | 2.CSS值缩写 32 | 33 | - margin 34 | - padding 35 | - border 36 | - border-radius 37 | - font 38 | - background 39 | 40 | 3.省略值为0的单位 41 | 42 | 4.颜色值最短表示 43 | 44 | - red 45 | - rgb(255,255,0) 46 | - rgba(0,0,0,0.5) 47 | - \#333 48 | 49 | 5.CSS选择器合并 50 | 51 | .m-logo, .m-help, .m-list li, .u-tab li, .u-tab li a { 52 | background: url(../images/sprites.png) no-repeat 9999px 9999px; 53 | } 54 | 55 | 56 | 6.文件压缩 57 | - Compressor 58 | - cssmin 59 | 60 | 7.加载顺序 61 | CSS 放在头部 62 | JS 放在底部 63 | 64 | 8.减少标签数量 65 | 66 | 9.**选择器长度** 67 | 68 | 10.**耗性能属性** 69 | 70 | - expression 71 | - filter 72 | - border-radius 73 | - box-shadow 74 | - gradients 75 | 76 | 11.图片设置宽高 77 | 78 | 12.所有表现尽量使用CSS实现，少用JS 79 | 80 | ##页面性能 81 | 82 | ##可读性、可维护性 83 | 84 | - 规范 85 | - 语义化 86 | - 尽量避免Hack 87 | - 模块化 88 | - 注释 -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # My First Git Project - cssLayout 2 | ## CSS布局 3 | **CSS布局包括居中布局，多列布局以及全屏布局** 4 | ##[居中布局](https://github.com/futan/cssLayout/tree/master/%E5%B1%85%E4%B8%AD%E5%B8%83%E5%B1%80demo) 5 | ##[多列布局](https://github.com/futan/cssLayout/tree/master/%E5%A4%9A%E5%88%97%E5%B8%83%E5%B1%80demo) 6 | ##[全屏布局](https://github.com/futan/cssLayout/tree/master/%E5%B1%85%E4%B8%AD%E5%B8%83%E5%B1%80demo) 7 | ##[响应式布局](#) 8 | 9 | **页面优化技巧** 10 | 11 | [页面优化技巧](https://github.com/futan/cssLayout/blob/master/6.%E9%A1%B5%E9%9D%A2%E4%BC%98%E5%8C%96.md) 12 | 13 | **页面规范与模块化** 14 | 15 | [页面规范与模块化](#) 16 | -------------------------------------------------------------------------------- /css/reset.style.css: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | 6 | html, body, div, span, applet, object, iframe, 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 8 | a, abbr, acronym, address, big, cite, code, 9 | del, dfn, em, img, ins, kbd, q, s, samp, 10 | small, strike, strong, sub, sup, tt, var, 11 | b, u, i, center, 12 | dl, dt, dd, ol, ul, li, 13 | fieldset, form, label, legend, 14 | table, caption, tbody, tfoot, thead, tr, th, td, 15 | article, aside, canvas, details, embed, 16 | figure, figcaption, footer, header, hgroup, 17 | menu, nav, output, ruby, section, summary, 18 | time, mark, audio, video { 19 | margin: 0; 20 | padding: 0; 21 | border: 0; 22 | font-size: 100%; 23 | font: inherit; 24 | vertical-align: baseline; 25 | } 26 | /* HTML5 display-role reset for older browsers */ 27 | article, aside, details, figcaption, figure, 28 | footer, header, hgroup, menu, nav, section { 29 | display: block; 30 | } 31 | body { 32 | line-height: 1; 33 | } 34 | ol, ul { 35 | list-style: none; 36 | } 37 | blockquote, q { 38 | quotes: none; 39 | } 40 | blockquote:before, blockquote:after, 41 | q:before, q:after { 42 | content: ''; 43 | content: none; 44 | } 45 | table { 46 | border-collapse: collapse; 47 | border-spacing: 0; 48 | } 49 | -------------------------------------------------------------------------------- /全屏布局demo/1.1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 全屏布局 6 | 7 | 28 | 29 | 30 |
31 |
top
32 |
left
33 |
right
34 |
bottom
35 |
36 | 37 | -------------------------------------------------------------------------------- /全屏布局demo/1.2.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 全屏布局 6 | 7 | 27 | 28 | 29 |
30 |
top
31 |
32 |
left
33 |
34 |
right
35 |
36 |
37 |
bottom
38 |
39 | 40 | -------------------------------------------------------------------------------- /全屏布局demo/1.3.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 全屏布局 6 | 7 | 18 | 19 | 20 |
21 |
top
22 |
23 |
left
24 |
25 |
right
26 |
27 |
28 |
bottom
29 |
30 | 31 | -------------------------------------------------------------------------------- /全屏布局demo/demo.css: -------------------------------------------------------------------------------- 1 | html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;} 2 | header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;} 3 | table{border-collapse:collapse;border-spacing:0;} 4 | caption,th{text-align:left;font-weight:normal;} 5 | html,body,fieldset,img,iframe,abbr{border:0;} 6 | i,cite,em,var,address,dfn{font-style:normal;} 7 | [hidefocus],summary{outline:0;} 8 | li{list-style:none;} 9 | h1,h2,h3,h4,h5,h6,small{font-size:100%;} 10 | sup,sub{font-size:83%;} 11 | pre,code,kbd,samp{font-family:inherit;} 12 | q:before,q:after{content:none;} 13 | textarea{overflow:auto;resize:none;} 14 | label,summary{cursor:default;} 15 | a,button{cursor:pointer;} 16 | h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:normal;} 17 | del,ins,u,s,a,a:hover{text-decoration:none;} 18 | body,textarea,input,button,select,keygen,legend{font:30px/1.5 'microsoft yahei';color:#333;outline:0;} 19 | body{background:#fff;} 20 | a,a:hover{color:#333;} 21 | .clearfix:after{content:'';clear:both;display:block;height:0;overflow:hidden;visibility:hidden;} 22 | 23 | -------------------------------------------------------------------------------- /多列布局demo/1.1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 多列布局 6 | 7 | 21 | 22 | 23 |
24 |
25 |

left

26 |
27 |
28 |

right

29 |

right

30 |
31 |
32 | 33 | -------------------------------------------------------------------------------- /多列布局demo/1.2.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 多列布局 6 | 7 | 25 | 26 | 27 |
28 |

left

29 |
30 |
31 |

right

right

32 |
33 |
34 |
35 | 36 | -------------------------------------------------------------------------------- /多列布局demo/1.3.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 多列布局 6 | 7 | 22 | 23 | 24 |
25 |
26 |

left

27 |
28 |
29 |

right

30 |

right

31 |
32 |
33 | 34 | -------------------------------------------------------------------------------- /多列布局demo/1.4.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 多列布局 6 | 7 | 22 | 23 | 24 |
25 |
26 |

left

27 |
28 |
29 |

right

30 |

right

31 |
32 |
33 | 34 | -------------------------------------------------------------------------------- /多列布局demo/1.5.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 多列布局 6 | 7 | 21 | 22 | 23 |
24 |
25 |

left

26 |
27 |
28 |

right

29 |

right

30 |
31 |
32 | 33 | -------------------------------------------------------------------------------- /多列布局demo/1.6.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 多列布局 6 | 7 | 22 | 23 | 24 |
25 |
26 |

left

27 |
28 |
29 |

center

30 |
31 |
32 |

right

33 |

right

34 |
35 |
36 | 37 | -------------------------------------------------------------------------------- /多列布局demo/2.1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 多列布局 6 | 7 | 22 | 23 | 24 |
25 |
26 |

left

27 |
28 |
29 |

right

30 |

right

31 |
32 |
33 | 34 | -------------------------------------------------------------------------------- /多列布局demo/2.2.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 多列布局 6 | 7 | 24 | 25 | 26 |
27 |
28 |

left

29 |
30 |
31 |

right

32 |

right

33 |
34 |
35 | 36 | -------------------------------------------------------------------------------- /多列布局demo/2.3.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 多列布局 6 | 7 | 21 | 22 | 23 |
24 |
25 |

left

26 |
27 |
28 |

right

29 |

right

30 |
31 |
32 | 33 | -------------------------------------------------------------------------------- /多列布局demo/2.4.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 多列布局 6 | 7 | 24 | 25 | 26 |
27 |
28 |

left

29 |
30 |
31 |

center

32 |
33 |
34 |

right

35 |

right

36 |
37 |
38 | 39 | -------------------------------------------------------------------------------- /多列布局demo/3.1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 多列布局 6 | 7 | 20 | 21 | 22 |
23 |

1

24 |

2

25 |

3

26 |

4

27 |
28 | 29 | -------------------------------------------------------------------------------- /多列布局demo/3.2.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 多列布局 6 | 7 | 23 | 24 | 25 |
26 |
27 |

1

28 |

2

29 |

3

30 |

4

31 |
32 |
33 | 34 | -------------------------------------------------------------------------------- /多列布局demo/3.3.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 多列布局 6 | 7 | 20 | 21 | 22 |
23 |

1

24 |

2

25 |

3

26 |

4

27 |
28 | 29 | -------------------------------------------------------------------------------- /多列布局demo/4.1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 多列布局 6 | 7 | 27 | 28 | 29 |
30 |
31 |

left

32 |
33 |
34 |

right

35 |

right

36 |
37 |
38 | 39 | -------------------------------------------------------------------------------- /多列布局demo/demo.css: -------------------------------------------------------------------------------- 1 | html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;} 2 | header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;} 3 | table{border-collapse:collapse;border-spacing:0;} 4 | caption,th{text-align:left;font-weight:normal;} 5 | html,body,fieldset,img,iframe,abbr{border:0;} 6 | i,cite,em,var,address,dfn{font-style:normal;} 7 | [hidefocus],summary{outline:0;} 8 | li{list-style:none;} 9 | h1,h2,h3,h4,h5,h6,small{font-size:100%;} 10 | sup,sub{font-size:83%;} 11 | pre,code,kbd,samp{font-family:inherit;} 12 | q:before,q:after{content:none;} 13 | textarea{overflow:auto;resize:none;} 14 | label,summary{cursor:default;} 15 | a,button{cursor:pointer;} 16 | h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:normal;} 17 | del,ins,u,s,a,a:hover{text-decoration:none;} 18 | body,textarea,input,button,select,keygen,legend{font:30px/1.5 'microsoft yahei';color:#333;outline:0;} 19 | body{background:#fff;} 20 | a,a:hover{color:#333;} 21 | .parent{background:#ddd;color:#fff;} 22 | .clearfix:after{content:'';clear:both;display:block;height:0;overflow:hidden;visibility:hidden;} 23 | p{background:#666;} 24 | .right p{background:#999;} -------------------------------------------------------------------------------- /居中布局demo/1.1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 水平居中 6 | 7 | 17 | 18 | 19 |
20 |
DEMO
21 |
22 | 23 | -------------------------------------------------------------------------------- /居中布局demo/1.2.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 水平居中 6 | 7 | 15 | 16 | 17 |
18 |
DEMO
19 |
20 | 21 | -------------------------------------------------------------------------------- /居中布局demo/1.3.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 水平居中 6 | 7 | 20 | 21 | 22 |
23 |
DEMO
24 |
25 | 26 | -------------------------------------------------------------------------------- /居中布局demo/1.4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 水平居中 6 | 7 | 18 | 19 | 20 |
21 |
DEMO
22 |
23 | 24 | -------------------------------------------------------------------------------- /居中布局demo/2.1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 垂直居中 6 | 7 | 17 | 18 | 19 |
20 |
DEMO
21 |
22 | 23 | -------------------------------------------------------------------------------- /居中布局demo/2.2.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 垂直居中 6 | 7 | 21 | 22 | 23 |
24 |
DEMO
25 |
26 | 27 | -------------------------------------------------------------------------------- /居中布局demo/2.3.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 垂直居中 6 | 7 | 17 | 18 | 19 |
20 |
DEMO
21 |
22 | 23 | -------------------------------------------------------------------------------- /居中布局demo/3.1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 居中 6 | 7 | 20 | 21 | 22 |
23 |
DEMO
24 |
25 | 26 | -------------------------------------------------------------------------------- /居中布局demo/3.2.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 居中 6 | 7 | 21 | 22 | 23 |
24 |
DEMO
25 |
26 | 27 | -------------------------------------------------------------------------------- /居中布局demo/3.3.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 居中 6 | 7 | 17 | 18 | 19 |
20 |
DEMO
21 |
22 | 23 | -------------------------------------------------------------------------------- /居中布局demo/demo.css: -------------------------------------------------------------------------------- 1 | html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;} 2 | header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;} 3 | table{border-collapse:collapse;border-spacing:0;} 4 | caption,th{text-align:left;font-weight:normal;} 5 | html,body,fieldset,img,iframe,abbr{border:0;} 6 | i,cite,em,var,address,dfn{font-style:normal;} 7 | [hidefocus],summary{outline:0;} 8 | li{list-style:none;} 9 | h1,h2,h3,h4,h5,h6,small{font-size:100%;} 10 | sup,sub{font-size:83%;} 11 | pre,code,kbd,samp{font-family:inherit;} 12 | q:before,q:after{content:none;} 13 | textarea{overflow:auto;resize:none;} 14 | label,summary{cursor:default;} 15 | a,button{cursor:pointer;} 16 | h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:normal;} 17 | del,ins,u,s,a,a:hover{text-decoration:none;} 18 | body,textarea,input,button,select,keygen,legend{font:30px/1.5 'microsoft yahei';color:#333;outline:0;} 19 | body{background:#fff;} 20 | a,a:hover{color:#333;} 21 | .parent{background:#ddd;} 22 | .child{background:#666;color:#fff;} --------------------------------------------------------------------------------