Header
Analysis:
The outermost wrapper nests all the content inside, and the overall positioning is relative . max min already controls the narrowest and widest values very well, but it has no effect on IE. If there are no other layouts interspersed, this layer can actually be written in the body, eliminating one layer of nesting.
#wrapper{ width:auto; border:1px solid #000; min-width:776px; max-width:1000px; text-align:left; margin-left:auto; margin-right:auto; position:relative;}
wrapper’s lower-level outer header footer
The header is positioned absolutely and the footer is positioned relative; the outer has 130px margins on the left and right respectively. This is Key to compatibility with non-IE.
#outer{ margin-left:130px; margin-right:130px; background:silver; border-left:1px solid #000; border-right:1px solid #000; color: #000;}
#header{ position:absolute; top:0; left:0; width:100%; height:70px; line-height:70px; border-bottom:1px solid #000; overflow:hidden; background:#0ff; text-align:center; font-size:xx-large}
#footer { width:100%; clear:both; line-height:50px; border-top:1px solid #000; background:#ffc; color :#000; text-align:center; position:relative;}
outer lower-level clearheader outerwrap right clearer
clearheader is used to fill in the blanks of the header. Clearer is a commonly used filling hack. .
Why is outerwrap width 99% instead of 100%?
Because its upper outer layer has a border, adding 2 border pixels to 100% width will stretch it, and FF has obvious effects.
The processing of right is very classic. It is resolved as positioning under IE and as floating under FF. The processing of negative margins also just uses the space left by the upper outer.
#clearheader{ height:72px;}
.outerwrap { float:left; width:99%;}
#right {
position:relative;
width:130px; float:right; left:1px;
margin-right:-129px;
}
* html #right { margin-right:-130px; margin-left:-3px}
.clearer{ height:1px; overflow:hidden; margin-top:-1px; clear:both;}
The idea of centercontent left clearer in outerwrap is similar to the above.
Specify that browsers of IE5.0 and above are valid
Use the expression method to control the width condition of IE5.0 and above, and realize automatic width adjustment and centering. I fixed the width value because if you use auto here, the div content will not be displayed during the window resizing process.
body {
width:expression( documentElement.clientWidth <= 800 ? (documentElement.clientWidth == 0 ? (body.clientWidth <= 800 ? "776" : "1000") : " 776px") : "1000" );
}
#wrapper {
width:expression( documentElement.clientWidth <= 800 ? (documentElement.clientWidth == 0 ? (body.clientWidth <= 800 ? "776" : "1000") : "776px") : "1000" );
}
This example combines many classic usages and definitions of DIV CSS, and is very traditional and practical at the same time.
Footer
Code Analysis: The outermost wrapper nests all the content inside, and the overall positioning is relative. max min already controls the narrowest and widest values very well, but it has no effect on IE. If there are no other layouts interspersed, this layer can actually be written in the body, eliminating one layer of nesting. #wrapper{ width:auto; border:1px solid #000; min-width:776px; max-width:1000px; text- align:left; margin-left:auto; margin-right:auto; position:relative;} The header is positioned absolutely and the footer is positioned relative; the outer is positioned on the left and right respectively There are 130px margins, which is key to compatibility with non-IE. #outer{ margin-left:130px; margin-right:130px; background:silver; border-left:1px solid #000; border-right :1px solid #000; color: #000;} outer lower-level clearheader outerwrap right clearer #clearheader{ height:72px;} The idea of centrecontent left clearer in outerwrap is similar to the above. Specifies that browsers of IE5.0 and above are valid Use the expression method to control the width condition of IE5.0 and above, and automatically adjust the width and center it. I fixed the width value because if you use auto here, the div content will not be displayed during the window resizing process. body { This example combines many classic usages and definitions of DIV CSS, and is very traditional and practical at the same time .
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
182
183-->
184
185
186
187
188
189
190
191
192
193Header
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209< ;p>wrapper's lower-level outer header footer
210
211
212
213
214
215#header{ position:absolute; top:0; left:0; width:100%; height:70px; line-height:70px; border-bottom:1px solid #000; overflow:hidden; background:#0ff; text-align:center; font-size:xx-large}
216
217#footer { width:100%; clear:both; line-height:50px; border-top:1px solid #000; background:#ffc; color:#000; text-align:center; position:relative;}
218
219
220
221
222
223outerwrap Why is the width 99% instead of 100%?
224
225 Because its upper outer layer has a border, 100% width plus 2 border pixels will make it bigger, and FF has obvious effects.
226
227right's processing is very classic. It is resolved to positioning under IE and floating under FF. The processing of negative margins also just uses the space left by the upper outer.
228
229
230
231.outerwrap { float:left; width: 99%;}
232
233#right {
234
235position:relative;
236
237width:130px; float:right; left:1px;
238
239margin-right:-129px;
240
241}< br />
242
243* html #right { margin-right:-130px; margin-left:-3px}
244
245.clearer{ height: 1px; overflow:hidden; margin-top:-1px; clear:both;}
246
247
248
249
252
253
254
255width:expression( documentElement.clientWidth <= 800 ? (documentElement.clientWidth == 0 ? (body.clientWidth <= 800 ? "776" : "1000") : "776px") : "1000" );
256
257}
258
259#wrapper {
260
261width:expression( documentElement.clientWidth <= 800 ? (documentElement.clientWidth == 0 ? (body.clientWidth <= 800 ? "776" : "1000") : "776px") : "1000" );< br />
262
263}
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
