本文介绍了CSS中的关键布局技巧，包括盒子模型的特性、如何实现水平居中、圣杯布局的具体实现方式，以及滑动门技术的不同层级应用。
一. 补充：
１ 如果定位的盒子没有宽高，那么默认宽高为0;
２ 如果给子盒子设置宽度为100%,那么这个子盒子的宽与父盒子一样宽。
３ 透明度：
opacity:不透明度
赋值：opacity:0.5;
取值：在0-1之间的小数。
这个属性ie6不支持，如果要在ie6中设置透明，要用：
filter: Alpha(opacity=50);
二. margin补充：
１ 用法：
margin: 0 auto;
作用：让容器水平居中。
２ margin-right: auto;
作用：如果不设置其它属性只设置这个属性，那么浏览器在解析的时候会将一个盒子的所有的默认的margin全部给margin-right
３ margin设置为负数：
如果margin-left设置为负数，那么将来这个盒子会向左方向移动。
如果margin-right设置为负数，那么盒子会向右移动。
４ 圣杯布局：
特点：左右两边的内容保持不变，中间的内容可以根据屏幕的大小的改变而改变。
名称：双飞翼布局。
代码：
1 <!DOCTYPEhtml>
2 <htmllang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style>
7 .content{
8 padding: 0 200px;
9 height: 200px;
10 min-width: 200px;
11 }
12 .left{
13 width: 200px;
14 height: 200px;
15 background: red;
16 float: left;
17 margin-left: -200px;
18 }
19 .right{
20 width: 200px;
21 height: 200px;
22 background: yellow;
23 float: right;
24 margin-right: -200px;
25 }
26 .center{
27 width: 100%;
28 min-width: 200px;
29 height: 200px;
30 background: green;
31 float: left;
32 }
33 </style>
34 </head>
35 <body>
36 <div class="content">
37 <divclass="left"></div>
38 <divclass="center"></div>
39 <divclass="right"></div>
40 </div>
41 </body>
42 </html>
三. 滑动门：
１ 最基本的滑动门：
用三张图片完成
２ 中级滑动门：
用两张图片完
３ 高级滑动门：
用一张图片完成
四. 页面中常见的三角：
１ 易讯网三角：
２ 淘宝三角：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
