09-滑动门、圣杯布局

2024-04-27 15:12:33

字体：大中小

来源：转载

供稿：网友

一. 补充：

１如果定位的盒子没有宽高，那么默认宽高为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>

三. 滑动门：

１最基本的滑动门：

用三张图片完成

２中级滑动门：

用两张图片完

３高级滑动门：

用一张图片完成

四. 页面中常见的三角：

１易讯网三角：

２淘宝三角：

上一篇：《客户端脚本语言-JavaScript》

下一篇：正则表达式

学习交流

硬盘分区如何设置准确的分区空间

硬盘分区如何设置准确的分区空间...

热门图片

猜你喜欢的新闻

猜你喜欢的关注

09-滑动门、圣杯布局

一. 补充：

１ 如果定位的盒子没有宽高，那么默认宽高为0;

２ 如果给子盒子设置宽度为100%,那么这个子盒子的宽与父盒子一样宽。

３ 透明度：

二. margin补充：

１ 用法：