Code
1使用 line-height 垂直居中
2line-height:24px;
3使用固定宽度的容器并且需要一行垂直居中时,使用 line-height 即可(高度与父层容器一致),一行垂直居中时,使用 line-height 即可
4清除容器浮动
5#main {
6 overflow:hidden;
7}
8不让链接折行
9a {
10 white-space:nowrap;
11}
12上面的设定就能避免链接折行
13始终让 Firefox 显示滚动条
14html {
15 overflow:-moz-scrollbars-vertical;
16}
17更多的 Mozilla/Firefox 私有 CSS 属性可以参考这里。需跨浏览器的支持,也可以使用
18body, html {
19 min-height:101%;
20}
21使块元素水平居中
22margin:0 auto;
23其实就是
24margin-left: auto;
25margin-right: auto;
26这个技巧基本上所有的 CSS 教科书都会有说明,别忘记给它加上个宽度。Exploer 下也可以使用
27body{
28 text-align: center;
29}
30然后定义内层容器
31text-align: left;
32恢复。
33隐藏 Exploer textarea 的滚动条
34textarea {
35 overflow:auto;
36}
37Exploer 默认情况下 textarea 会有垂直滚动条
38设置打印分页
39h2 {
40 page-break-before:always;
41}
42page-break-before 属性能设置打印网页时的分页。
43删除链接上的虚线框
44a:active, a:focus {
45 outline:none;
46}
47Firefox 默认会在链接获得焦点(或者点击时)加上条虚线框,使用上面的属性可以删除。
48最简单的 CSS 重置
49* {
50 margin: 0; padding: 0
51}
52度与父层容器一致),
53
54
55单行一列
56以下是引用片段:
57body { margin: 0px; padding: 0px; text-align: center; }
58#content { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }
59
60两行一列
61以下是引用片段:
62body { margin: 0px; padding: 0px; text-align: center;}
63#content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px;}
64#content-end {margin-left:auto; margin-right:auto; width: 400px; width: 370px;}
65
66三行一列
67以下是引用片段:
68body { margin: 0px; padding: 0px; text-align: center; }
69#content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }
70#content-mid { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }
71#content-end { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }
72
73单行两列
74以下是引用片段:
75#bodycenter { width: 700px;margin-right: auto; margin-left: auto;overflow: auto; }
76#bodycenter #dv1 {float: left;width: 280px;}
77#bodycenter #dv2 {float: right;width: 410px;}
78
79两行两列
80以下是引用片段:
81#header{ width: 700px; margin-right: auto;margin-left: auto; overflow: auto;}
82#bodycenter { width: 700px; margin-right: auto; margin-left: auto; overflow: auto; }
83#bodycenter #dv1 { float: left; width: 280px;}
84#bodycenter #dv2 { float: right;width: 410px;}
85
86三行两列
87以下是引用片段:
88#header{ width: 700px;margin-right: auto; margin-left: auto; }
89#bodycenter {width: 700px; margin-right: auto; margin-left: auto; }
90#bodycenter #dv1 { float: left;width: 280px;}
91#bodycenter #dv2 { float: right; width: 410px;}
92#footer{ width: 700px; margin-right: auto; margin-left: auto; overflow: auto; }
93
94单行三列
95绝对定位
96以下是引用片段:
97#left { position: absolute; top: 0px; left: 0px; width: 120px; }
98#middle {margin: 20px 190px 20px 190px; }
99#right {position: absolute;top: 0px; right: 0px; width: 120px;}
100
101float定位一
102xhtml:
103以下是引用片段:
104<div id="warp">
105<div id="column">
106<div id="column1">这里是第一列</div>
107<div id="column2">这里是第二列</div>
108<div class="clear"></div>
109</div>
110<div id="column3">这里是第三列</div>
111<div class="clear"></div>
112</div>
113
114CSS:
115以下是引用片段:
116#wrap{ width:100%; height:auto;}
117#column{ float:left; width:60%;}
118#column1{ float:left; width:30%;}
119#column2{ float:right; width:30%;}
120#column3{ float:right; width:40%;}
121.clear{ clear:both;}
122
123float定位二
124xhtml:
125以下是引用片段:
126<div id="center" class="column">
127<h1>This is the main content.</h1>
128</div>
129<div id="left" class="column">
130<h2>This is the left sidebar.</h2>
131</div>
132<div id="right" class="column">
133<h2>This is the right sidebar.</h2>
134</div>
135
136CSS:
137以下是引用片段:
138body {margin: 0;padding-left: 200px;padding-right: 190px;min-width: 240px;}
139.column {position: relative;float: left;}
140#center {width: 100%;}
141#left {width: 180px; right: 240px;margin-left: -100%;}
142#right {width: 130px;margin-right: -100%;}
143
144两行三列
145xhtml:
146以下是引用片段:
147<div id="header">这里是顶行</div>
148<div id="warp">
149<div id="column">
150<div id="column1">这里是第一列</div>
151<div id="column2">这里是第二列</div>
152<div class="clear"></div>
153</div>
154<div id="column3">这里是第三列</div>
155<div class="clear"></div>
156</div>
157
158CSS:
159以下是引用片段:
160#header{width:100%; height:auto;}
161#wrap{ width:100%; height:auto;}
162#column{ float:left; width:60%;}
163#column1{ float:left; width:30%;}
164#column2{ float:right; width:30%;}
165#column3{ float:right; width:40%;}
166.clear{ clear:both;}
167
168三行三列
169xhtml:
170以下是引用片段:
171<div id="header">这里是顶行</div>
172<div id="warp">
173<div id="column">
174<div id="column1">这里是第一列</div>
175<div id="column2">这里是第二列</div>
176<div class="clear"></div>
177</div>
178<div id="column3">这里是第三列</div>
179<div class="clear"></div>
180</div>
181<div id="footer">这里是底部一行</div>
182
183CSS:
184以下是引用片段:
185#header{width:100%; height:auto;}
186#wrap{ width:100%; height:auto;}
187#column{ float:left; width:60%;}
188#column1{ float:left; width:30%;}
189#column2{ float:right; width:30%;}
190#column3{ float:right; width:40%;}
191.clear{ clear:both;}
192#footer{width:100%; height:auto;}
193
194
1使用 line-height 垂直居中
2line-height:24px;
3使用固定宽度的容器并且需要一行垂直居中时,使用 line-height 即可(高度与父层容器一致),一行垂直居中时,使用 line-height 即可
4清除容器浮动
5#main {
6 overflow:hidden;
7}
8不让链接折行
9a {
10 white-space:nowrap;
11}
12上面的设定就能避免链接折行
13始终让 Firefox 显示滚动条
14html {
15 overflow:-moz-scrollbars-vertical;
16}
17更多的 Mozilla/Firefox 私有 CSS 属性可以参考这里。需跨浏览器的支持,也可以使用
18body, html {
19 min-height:101%;
20}
21使块元素水平居中
22margin:0 auto;
23其实就是
24margin-left: auto;
25margin-right: auto;
26这个技巧基本上所有的 CSS 教科书都会有说明,别忘记给它加上个宽度。Exploer 下也可以使用
27body{
28 text-align: center;
29}
30然后定义内层容器
31text-align: left;
32恢复。
33隐藏 Exploer textarea 的滚动条
34textarea {
35 overflow:auto;
36}
37Exploer 默认情况下 textarea 会有垂直滚动条
38设置打印分页
39h2 {
40 page-break-before:always;
41}
42page-break-before 属性能设置打印网页时的分页。
43删除链接上的虚线框
44a:active, a:focus {
45 outline:none;
46}
47Firefox 默认会在链接获得焦点(或者点击时)加上条虚线框,使用上面的属性可以删除。
48最简单的 CSS 重置
49* {
50 margin: 0; padding: 0
51}
52度与父层容器一致),
53
54
55单行一列
56以下是引用片段:
57body { margin: 0px; padding: 0px; text-align: center; }
58#content { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }
59
60两行一列
61以下是引用片段:
62body { margin: 0px; padding: 0px; text-align: center;}
63#content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px;}
64#content-end {margin-left:auto; margin-right:auto; width: 400px; width: 370px;}
65
66三行一列
67以下是引用片段:
68body { margin: 0px; padding: 0px; text-align: center; }
69#content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }
70#content-mid { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }
71#content-end { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }
72
73单行两列
74以下是引用片段:
75#bodycenter { width: 700px;margin-right: auto; margin-left: auto;overflow: auto; }
76#bodycenter #dv1 {float: left;width: 280px;}
77#bodycenter #dv2 {float: right;width: 410px;}
78
79两行两列
80以下是引用片段:
81#header{ width: 700px; margin-right: auto;margin-left: auto; overflow: auto;}
82#bodycenter { width: 700px; margin-right: auto; margin-left: auto; overflow: auto; }
83#bodycenter #dv1 { float: left; width: 280px;}
84#bodycenter #dv2 { float: right;width: 410px;}
85
86三行两列
87以下是引用片段:
88#header{ width: 700px;margin-right: auto; margin-left: auto; }
89#bodycenter {width: 700px; margin-right: auto; margin-left: auto; }
90#bodycenter #dv1 { float: left;width: 280px;}
91#bodycenter #dv2 { float: right; width: 410px;}
92#footer{ width: 700px; margin-right: auto; margin-left: auto; overflow: auto; }
93
94单行三列
95绝对定位
96以下是引用片段:
97#left { position: absolute; top: 0px; left: 0px; width: 120px; }
98#middle {margin: 20px 190px 20px 190px; }
99#right {position: absolute;top: 0px; right: 0px; width: 120px;}
100
101float定位一
102xhtml:
103以下是引用片段:
104<div id="warp">
105<div id="column">
106<div id="column1">这里是第一列</div>
107<div id="column2">这里是第二列</div>
108<div class="clear"></div>
109</div>
110<div id="column3">这里是第三列</div>
111<div class="clear"></div>
112</div>
113
114CSS:
115以下是引用片段:
116#wrap{ width:100%; height:auto;}
117#column{ float:left; width:60%;}
118#column1{ float:left; width:30%;}
119#column2{ float:right; width:30%;}
120#column3{ float:right; width:40%;}
121.clear{ clear:both;}
122
123float定位二
124xhtml:
125以下是引用片段:
126<div id="center" class="column">
127<h1>This is the main content.</h1>
128</div>
129<div id="left" class="column">
130<h2>This is the left sidebar.</h2>
131</div>
132<div id="right" class="column">
133<h2>This is the right sidebar.</h2>
134</div>
135
136CSS:
137以下是引用片段:
138body {margin: 0;padding-left: 200px;padding-right: 190px;min-width: 240px;}
139.column {position: relative;float: left;}
140#center {width: 100%;}
141#left {width: 180px; right: 240px;margin-left: -100%;}
142#right {width: 130px;margin-right: -100%;}
143
144两行三列
145xhtml:
146以下是引用片段:
147<div id="header">这里是顶行</div>
148<div id="warp">
149<div id="column">
150<div id="column1">这里是第一列</div>
151<div id="column2">这里是第二列</div>
152<div class="clear"></div>
153</div>
154<div id="column3">这里是第三列</div>
155<div class="clear"></div>
156</div>
157
158CSS:
159以下是引用片段:
160#header{width:100%; height:auto;}
161#wrap{ width:100%; height:auto;}
162#column{ float:left; width:60%;}
163#column1{ float:left; width:30%;}
164#column2{ float:right; width:30%;}
165#column3{ float:right; width:40%;}
166.clear{ clear:both;}
167
168三行三列
169xhtml:
170以下是引用片段:
171<div id="header">这里是顶行</div>
172<div id="warp">
173<div id="column">
174<div id="column1">这里是第一列</div>
175<div id="column2">这里是第二列</div>
176<div class="clear"></div>
177</div>
178<div id="column3">这里是第三列</div>
179<div class="clear"></div>
180</div>
181<div id="footer">这里是底部一行</div>
182
183CSS:
184以下是引用片段:
185#header{width:100%; height:auto;}
186#wrap{ width:100%; height:auto;}
187#column{ float:left; width:60%;}
188#column1{ float:left; width:30%;}
189#column2{ float:right; width:30%;}
190#column3{ float:right; width:40%;}
191.clear{ clear:both;}
192#footer{width:100%; height:auto;}
193
194