WEB教程基地:www.91ctc.com为你搭建学习WEB技术的优秀平台
网站地图 加入收藏 设为首页
您的位置:本站首页>>DIV CSS HTML>>DIV布局之道三:DIV块的覆盖,DIV层遮盖其他DIV

DIV布局之道三:DIV块的覆盖,DIV层遮盖其他DIV

[ 录入者:91ctc | 时间:2012-01-08 13:26:53 | 作者: 91ctc| 来源:本站原创 | 浏览: 次 ]

本文讲解DIV布局网页的第三种方式:覆盖。DIV覆盖方式经常应用于网页弹出框的制作,例如在网店系统中,当用户没有登录时,点击购买,系统弹出一个登陆框。

请看代码:

HTML部分:

XML/HTML Code复制内容到剪贴板
  1. <body topmargin="0">  
  2.   
  3. <div class="main">  
  4. 网页主体内容,包含网页其他栏目   
  5. </div>  
  6. <!--蒙板-->  
  7. <div class="mask"></div>  
  8. <div class="opendiv" >  
  9.     最上层DIV覆盖下面的全部DIV   
  10. </div>  
  11. </body>  

这里,网页主体信息放在main这个样式所在的DIV块内,我们添加一个蒙版,当弹出一个div时,不允许用户进行其他操作。

CSS部分:

CSS Code复制内容到剪贴板
  1. .main { width:960pxheight:800pxbackground-color:#FF9966margin:0px auto;}    
  2. .mask{ z-index:900; position:fixed!importantposition:absoluteleft:0pxtop:0pxwidth:100%; height:100%;  background:#000; filter: alpha(opacity=45); opacity: 0.45; -moz-opacity: 0.45; -khtml-opacity: 0.45; }   
  3. .opendiv{z-index:920;position:absolute;left:50%; top:50%; margin-left:-175pxmargin-top:-125pxwidth:334pxheight:180pxbackground-color#6699FFtext-align:centerpadding-top:20px;}  

这里的样式用到了CSS滤镜写法,z-index属性用来指定当前DIV所处的高度(即Z轴的值),预览效果图如下:

DIV覆盖布局

我们可以看到,中间蓝色背景的DIV块是网页中最上面的一个DIV块,覆盖了其他的DIV,当其他DIV块被覆盖后,不允许用户点击被覆盖的内容,实现了约束用户的操作的目的。访客可以自己练习一下这个例子。当我们在中间蓝色背景的DIV中放置登陆框的时候,结合JS的控制,就变成了一个弹出式登陆框了哦。

相关文章:

DIV布局之道一:DIV块的水平并排、垂直并排

学习DIV+CSS要注意些什么,如何学习DIV+CSS布局网页

浅谈网页制作模型,网页盒子模型,DIV盒子模型

网页设计如何入门,如何设计网页

 本讲到此结束,敬请浏览本站后续技术文章。如有疑问请在本站留言

PS:如果您对本文有纠错、质疑、转载、举报等问题时,请加入到网站Q&Q&群:86783981(验证信息:91ctc.com)提交您的问题,让大伙一块讨论。谢谢您的支持,计算机教程中心网将会一如既往的提供优秀资源助您一臂之力!
关闭】【返回顶部

您可能感兴趣的文章
91ctc.com 网络先锋,引领科技,本站原创作品[转载请注明出处]。网站Q&Q&群:86783981(验证信息:91ctc.com)
Copyright© 2010-2017 计算机教程中心网 . All rights reserved. 苏ICP备11081842号