您当前位置：首页 > web前端 > htmlcss > 利用CSS+DIV控制弹出窗口样式和大小

利用CSS+DIV控制弹出窗口样式和大小

来源：程序员人生发布时间：2014-06-17 21:55:23 阅读次数：4217次

　　建站学院(LieHuo.Net)心得技巧 今天介绍一篇利用CSS+DIV控制弹出窗口样式和大小的方法，主要通过在页面中加入DIV层，并在页面中控制层的位置及显示和隐藏来实现。在介绍该方法前，我们先来认识div的两个属性。

　　1、id :<div>标志中的id也可以说是它的名字，常和CSS样式结合，实现对网页中任何元素的控制。

　　2.style :用于设置<div>标志中的元素的样式。其value值为CSS属性值。其中比较常用的CSS属性是position。该属性有两个可选值:relative和absolute。relative表示<div>标志的位置是相对于它所在的窗口的，absolute表示<div>标志的位置是绝对的。

　　style属性的另一个常用的属性是控制<div>显示的display属性。将display设置为block，<div>中的所有元素都将会被当作一个单独的块放入页面中。将display设置为none，<div>元素就像从页面中被移走一样，它下面的所有元素会被自动跟上填充。将display设置为inline，将使其行为和inline一样，即使是普通的块元素它也会被组合成像<span>那样的输出流输出到页面上。

　　注意:单独使用<div>而不配合CSS标志的时候，它在网页中的效果和<p>是一样的。

　　示例:

　　说明:点击一连接后，显示一登陆界面。

　　在页面中加入一个用户登陆的超链接

<a href="#" >建站学院用户登陆</a>

　　编写open（login）的js函数

　　说明:document.body.clientWidth为网页可见区域宽。

function open（divID）
{
divID.style.display='block';
divID.style.left=(document.body.clientWidth-240)/2;
divID.style.top=(document.body.clientHeight-139)/2;
}

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生

------分隔线----------------------------

上一篇 简单几招调教Windows 2008系统菜单

下一篇 Windows Server AppFabric 安装与步署过程

分享到:

------分隔线----------------------------

为码而活

积分：4237

15粉丝

7关注

栏目热点