纯CSS精准定位的固定不动竖直垂直居中波动层编

日期:2021-01-20 类型:科技新闻 

关键词:小游戏源代码,互动小游戏微信,自制小游戏,html5游戏,制作游戏大概多少钱

有关在html中波动层是诸多网页页面喜好者一开始的难点,关键在于精准定位。假如你对CSS精准定位还不足掌握 能够接着往下看,运作里边的內容便可。
【要求】:
将1个网页页面分为头、身和脚3一部分。以下:
————————————————————

————————————————————

————————————————————

————————————————————
规定:1、头脚等高,而且头坐落于访问器顶部,脚坐落于访问器底部,身高可转变;
2、在身的上下各自置放两个竖直垂直居中的div,相近波动广告宣传条,部位固定不动,不随翻转条的翻转和翻转;
【难题】:
1、怎样固定不动层?

拷贝编码
编码以下:

/* 全局性波动层固定不动默认设置款式设定,适用FF和IE */
.fixed {position:fixed;}
* html div.fixed {position:absolute; right:16px;} /* [only for ie] "right=16px"是以便显示信息翻转条,即right最少值为16px */

下列摘抄1一部分文本以下:

因为广告宣传的乱用,使得1些访问器手机软件都刚开始有了广告宣传內容阻拦,使得1些很好的实际效果如今都不强烈推荐应用了。例如让1个元素将会伴随着网页页面的翻转而持续更改自身在访问器的部位。而如今我能够根据CSS中的1个精准定位特性来完成这样的1个实际效果,这个元素特性便是以前不被适用的position:fixed; 他的含意便是:固定不动精准定位。这个固定不动与肯定精准定位很像,唯1不一样的是肯定精准定位是被固定不动在网页页面中的某1个部位,而固定不动精准定位则是固定不动在访问器的视框部位。
尽管原先的访问器其实不适用过个特性,可是访问器的发展趋势使得如今的高級访问器都可以以正确的分析这个CSS特性。而且根据CSS HACK来让IE6都可以以完成这样的实际效果(现阶段没法使IE5.x)完成这类实际效果。
2、怎样竖直垂直居中?

这个难题实际上便是DIV肯定精准定位是垂直居中难题。实际上so easy!下列是我的思路:要是将该固定不动精准定位的div的top设为50%,随后将上移到该层的高宽比的1半就可以了(margin-top为负),比如,假如某div高宽比为200px,要使得该div竖直垂直居中,要是设定"position:absolute;top:50%;margin-top:⑴00px",便是这么简易!

因而,水平垂直居中也处理了,假如该层宽度为300px,那末"position:absolute;left:50%;margin-left:⑴00px"编码能够处理水平垂直居中难题。

即水平又竖直,那就将二者融合起来喽!嘿嘿。。。

提醒:您能够先改动一部分编码再运作

內容来源于:http://blog.csdn.net/xxd851116/archive/2009/06/29/4308161.aspx
上一篇:css FF与IE适配性总结 返回下一篇:没有了