要想把html中的层设计的很好,来实现一定的效果,也要有一定的思想。做web开发也有好几年了,刚开始的时候,对层不是很了解,总感觉不是很好做,因为当时,我对css这类东西不熟,总觉得这些东西应当由美工来完成,知识总是要学的。什么是html的层呢?html的层根普通意义上的层,意思是一样的。很多东西叠加在一起,三明志,汉堡等,分好几层。
看一个例子,一个拉窗帘的效果,用firefox看,IE下面还没有调试好.
http://blog.51yip.com/demo/curtain/
下面css样式的代码
.collectionDiv{ position:relative; width:320; height:426; } .clickButton{ position:absolute; top:350px; left:14px; z-index:200; } .glow{ position:absolute; top:346px; left:11px; z-index:100; } .curtainLeft{ position:absolute; height:426px; width:160px; left:0px; top:0px; z-index:300; background-image: url("curtain_left.png"); background-repeat: repeat-y; background-position: right; } .curtainRight{ position:absolute; height:426px; width:160px; left:160px; top:0px; z-index:300; background-image: url("curtain_right.png"); background-repeat: repeat-y; background-position: left; }
根层有关的东西挺多的,下面就上面提到的内容做一下解释
1,层都是有位置的
position : static | absolute | fixed | relative
static :默认值。无特殊定位,对象遵循HTML定位规则
absolute :将对象从文档流中拖出,使用 left , right , top , bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象,则依据 body 对象。而其层叠通过 z-index 属性定义
fixed :未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范
relative :对象不可层叠,但将依据 left , right , top , bottom 等属性在正常文档流中偏移位置
absolute特点:
用absolute的时候,不会考虑周围的其他布局,定死在某个地方,如果有层重复的话,也会叠加在一起,此时的对像不具有外补丁margin,但是还是有内补丁padding和border。使用absolute,要加上left,top之类,不然会使用默认auto,这将导致对象遵从正常的HTML布局规则,在前一个对象之后立即被呈递
relative特点:
当有几个relative出现时,他们是不可以重叠的,absolute相对于窗口的,而relative相对于其他标签的。
2,层的宽度width和高度heigth
3,距离左边left和距离顶部top
4,z-index用来控制层的显示次序,数字大的层会盖在数据小的层上面
5,设置背景图片,背景图片的优先级大于背景颜色
6,图片平铺,当我们设置了背景图片时,我们就可以来设置图片是的平铺方式,就根我们设置桌面一样的。
background-repeat : repeat | no-repeat | repeat-x | repeat-y
repeat : 默认值。背景图像在纵向和横向上平铺
no-repeat : 背景图像不平铺
repeat-x : 背景图像仅在横向上平铺
repeat-y : 背景图像仅在纵向上平铺
7,背景位置,background-position后面可以是top, center,bottom,left,center,right;也是数字和百分比数字
对于上面css文件中的参数设置,可以改变一下,来查看一下效果,例如:我把curtainright中的z-index的值改成50会是什么样子呢,各个参数都试一下吧。
顺便把js代码也贴一下,有兴趣的朋友可以看一下
<script language="javascript"> $(document).ready( function() { $('.curtainLeft').animate({ width: '-=155', }, 3000, function() { display:'none'; }); $('.curtainRight').animate({ width: '-=155', left: '+=155', }, 3000, function() { display:'none'; }); $('.glow').fadeOut("slow",CompleteFadeOut); } ); function CompleteFadeOut(){ $('.glow').fadeIn("slow", CompleteFadeIn) } function CompleteFadeIn(){ $('.glow').fadeOut("slow", CompleteFadeOut) } </script>
简单的说一下思想,进入页面时,左右二边的白色层向左右二边,缩小。completefadeout和completefadein他们二个相互调用,无限循环,这样才会出现了闪动的效果。
转载请注明
作者:海底苍鹰
地址:http://blog.51yip.com/htmlcss/1025.html
我是一位老人,想用网页给孙子做一些学习用的东西,以前学过点html,但现在都用html5加js和css了,感觉现在的浏览器都可以做很多东西了。