博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js学习进阶-页面覆盖
阅读量:5264 次
发布时间:2019-06-14

本文共 690 字,大约阅读时间需要 2 分钟。

页面覆盖以显示一条信息,照片或者常见的登录,广告,

实例:

  
JS Bin

Existing material.

特点:覆盖整个web页面,设置遮布(样式overlay)的宽高为100%,要能看见底部的信息,设置透明度:opacity:.5;filter:alpha(opacity=50);

    消息显示(样式overlaymsg)设置要在遮布之上,设置z-index 的值远大于遮布,居中显示,设置左边距和上边距50%。

    最后一个要确保上下滚动鼠标时,样式一致,设置遮布定位方式为:fixed;

显示隐藏页面:

*.style.hidden = "visible";

*.style.hidden = "hidden";

特点:任然占用了物理空间,影响其他的元素,

*.style.display = "block";

*.style.display = "none";

特点:完全从页面布局中删除了该元素,

display其他的属性值:inline-block  内容像一个块级元素格式化,然后像内联元素排练

    inherit   默认显示,继承该元素的父节点

补充:

块元素:div  , p  , form,   ul,  li ,  ol, dl,   address,  fieldset,  hr, menu,  table

行内元素:span,   strong,   em, img ,  input,  select,  textarea, 

转载于:https://www.cnblogs.com/dreamHot/p/6075940.html

你可能感兴趣的文章
vue2.x directive - 限制input只能输入正整数
查看>>
实现MyLinkedList类深入理解LinkedList
查看>>
自定义返回模型
查看>>
C#.NET 大型通用信息化系统集成快速开发平台 4.1 版本 - 客户端多网络支持
查看>>
HDU 4122
查看>>
Suite3.4.7和Keil u3自带fx2.h、fx2regs.h文件的异同
查看>>
打飞机游戏【来源于Crossin的编程教室 http://chuansong.me/account/crossincode 】
查看>>
[LeetCode] Merge Intervals
查看>>
【翻译自mos文章】当点击完 finishbutton后,dbca 或者dbua hang住
查看>>
Linux编程简介——gcc
查看>>
一种高效的序列化方式——MessagePack
查看>>
2019年春季学期第四周作业
查看>>
2019春第十周作业
查看>>
解决ThinkPHP关闭调试模式时报错的问题汇总
查看>>
【APT】SqlServer游标使用
查看>>
关于ExecuteNonQuery()返回值为-1
查看>>
Firefox修復QQ快速登錄
查看>>
PAT——1060. 爱丁顿数
查看>>
分布式技术追踪 2017年第二十期
查看>>
git添加公钥后报错sign_and_send_pubkey: signing failed: agent refused operation的解决办法
查看>>