软件下载 | 资讯教程 | 最近更新 | 下载排行 | 一键转帖 | 发布投稿
您的位置:最火下载站 > Web前端 > Html/css > 利用CSS+DIV控制弹出窗口样式和大小

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

  烈火建站学院(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>是一样的。

  示例:

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

<div style="position:absolute;width:240px;height:139px;display:none">
<table><tr><td>用户名<input type="text" ></td></tr>
……
</table></div>

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

<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;
}

    相关阅读
    网友评论
    栏目导航
    推荐软件