实现DIV居中布局三种途径_第1页
实现DIV居中布局三种途径_第2页
实现DIV居中布局三种途径_第3页
实现DIV居中布局三种途径_第4页
全文预览已结束

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、现在DIV+CSS布局越来越流行了，怎么实现div居中好像是个难题，这里给出关于DIV居中布局的几种实现方法,相信会对大家有所帮助. 第一种方法:DIV+CSS布局有很多值得学习的地方，这里和大家描述一下关于DIV居中布局的实现方法，主要有三种方法，每种方法都有各自的特点，请看下文详细介绍，相信通过本文描述你对DIV居中布局一定会有深刻的认识。关于DIV居中布局的几种实现方法现在DIV+CSS布局越来越流行了，怎么实现div居中好像是个难题。本文给出关于DIV居中布局的几种实现方法,相信会对大家有所帮助.第一种方法:1. body  2. margin:0pxauto;  

2、3. text-align:center;  4.  但是如果没申明下面这句解析方法,页面就会出错.不能居中对齐! 5. <!DOCTYPEhtmlPUBLIC"-/W3C/DTDXHTML1.1/EN"  6.  7. "/TR/xhtml11/DTD/xhtml11.dtd"> 8.  9.  但是有时候页面并不能全部按上面规定的代码格式来编写,比如说要改多彩滚动条.第二种方法:10. margin-left:50%; 

3、0;11. left:-width/2;  12.  这里的width不是CSS中的Width,而是你的DIV的宽度例如你的div是768px宽，那么你就应该设置left:-384px。第三种方法:使用JS来控制div居中.在页面之中添加了下面的一小段代码.13. <scriptlanguagescriptlanguage="javascript" 14.  15. type="text/javascript"src="function.js"></script>

4、0;function.js内容:16. if(window.screen.width>800)  17. document.write("<styletypestyletype="text/css"> 18.  19. bodymargin-left:"+(window.screen.width-800)/2+"px</style>");  经过测试.可以正常实现DIV居中补充一点:上面这段JS必须放在你的最后一个CSS连接或</style>的后面.下面

5、是这种方法的详细讲解:首先解释一下JS中窗口和网页的几种尺寸属性的含义document.body.clientWidth（网页可见区域宽）：是指浏览器显示网页的区域宽度，不包括浏览器的边框宽度和垂直滚动条的宽度。大小随着浏览器的窗口大小而改变。document.body.clientHeight（网页可见区域高）：是指浏览器显示网页的区域所能看到的高度，不包括浏览器的边框宽度和水平滚动条的高度。大小随着浏览器的窗口大小而改变。document.body.scrollTop（网页被卷去的高）：是指拉动垂直滚动条时网页上面被地址栏及菜单栏遮盖着的部分的高。document.body.scrollL

6、eft（网页被卷去的左）：是指拉动水平滚动条时网页左面被左边线遮盖着的部分的宽。现在我们来分析一下程序该如何实现：第一步我们要实现的是使层在弹出时绝对DIV居中不去考虑是否有滚动条的情况。1.计算出层距离显示区域左边和上边的位置注意：divId指的是所要居中的层,divId.clientWidth为其宽度！ 1. vardivId=document.getElementById("xxx");  2. varv_left=(document.body.clientWidth-divId.clientWidth)/2;  3. varv_top=

7、(document.body.clientHeight-divId.clientHeight)/2;  4.  2.把得到的值重新赋给DIV的left和top属性5. divId.style.leftv_left;  6. divId.style.top=v_top;  7.  说明：divId为DIV标签的id值，这样这个层就是DIV居中显示的了。第二步我们要实现的是使在拖动滚动条的情况下弹出的层也能居中。1.其实很简单我们只要把拖动的宽度和高度加到前面计算出来的左边距和上边距中就OK了。8. v_left+=document.body.sc

8、rollLeft;  9. v_top+=document.body.scrollTop;  10.  2.把得到的值重新赋给DIV的left和top属性11. divId.style.leftv_left;  12. divId.style.top=v_top;  13.  这样显示出来就是DIV居中的了。完整代码如下：14. <!doctypehtmlpublic“-/w3c/dtdhtml4.0transitional/en"> 15. <html> 16. <head

9、> 17. <title>弹出的层居中显示</title> 18. <metanamemetaname="generator"content="editplus"> 19. <metanamemetaname="author"content=""> 20. <metanamemetaname="keywords"content=""> 21. <metan

10、amemetaname="description"content=""> 22.  23. </head> 24. <body> 25. <tablewidthtablewidth=100%> 26. <tr><td><spanonclickspanonclick="divcenter()">test</span></td></tr> 27. <tr>

11、<td><spanonclickspanonclick="divcenter()">test</span></td></tr> 28. <tr><td><spanonclickspanonclick="divcenter()">test</span></td></tr> 29. <tr><td><spanonclickspanonclick="divcenter()

12、">test</span></td></tr> 30. <tr><td><spanonclickspanonclick="divcenter()">test</span></td></tr> 31. <tr><td><spanonclickspanonclick="divcenter()">test</span></td></tr> 32. </table> 33. <dividdivid=mxhstyle="position:absolute;  34. left:200px;top:30px;width:200px;height:200px;  35. background-color:n

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论