元素隐藏与显示属性及操作方式
属性 操作 方式 显示 元素 隐藏
2023-06-13 09:14:00 时间
元素的隐藏显示经常会使用,比如二级导航,响应式布局等等。
使用场景:让某元素在屏幕中不可见,如:鼠标:hover之后元素隐藏/显示
常用属性方法:
visibility: hidden;
浏览器对其渲染可是不可见,它在网页中占位置却不可点击,也就是说明元素不可见却仍然占据空间。
/* 元素隐藏 */
display:none;
/* 元素显示 */
display:block;
隐藏元素本身,并且在网页中不占位置,在隐藏的方法中,取none值这种方法一般是不可取的!因为display:none是直接不显示,也就是不渲染此元素,如果它所作用的元素排版在页面较前,先渲染,就容易引起回流(reflow)和重绘(repaint),造成难以预知的后果。
/* 表示完全不透明*/
opacity:1;
/* 表示完全透明*/
opacity:0;
注意: 会让元素整体变透明,包括里面的内容,如:文字、子元素等…
展示案例(导航的二维码默认隐藏点击显示)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
/* 因为有通栏:占满一行的边框,所以需要有一个通栏:占满一行的盒子 */
.nav {
height: 40px;
border-bottom: 1px solid #ccc;
}
/* 因为ul中所有的内容都是在网页的宽度固定并且水平居中的盒子内部,所以设置ul为宽度固定并且水平居中的效果(后面项目中所用到的版心) */
ul {
list-style: none;
width: 1200px;
margin: 0 auto;
}
ul li {
float: left;
width: 20%;
height: 40px;
border-right: 1px solid #ccc;
/* 自动内减 */
box-sizing: border-box;
text-align: center;
line-height: 40px;
}
ul .last {
border-right: none;
}
ul li a {
/* a标签默认是行内元素,宽高由内容撑开,并且无法设置宽高,此时默认情况用户只能点击文字区域才能调整 */
/* 如果把a标签转换成块级元素,此时可以设置宽高,会让a标签范围更大,用户可以点击调整的区域也越大 */
display: block;
/* 宽度不设置块元素会默认占满一行 */
height: 40px;
text-decoration: none;
color: #000;
}
.nav .app {
position: relative;
}
.nav .app .code {
display: none;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 40px;
border: 1px solid #ccc;
}
.nav .app:hover .code {
display: block;
}
</style>
</head>
<body>
<!-- 导航 -->
<div class="nav">
<ul>
<li><a href="#">我要投资</a></li>
<li><a href="#">平台介绍</a></li>
<li><a href="#">新手专区</a></li>
<li><a href="#" class="app">手机微金所<img src="./img/code.jpg" alt="" class="code"></a></li>
<li class="last"><a href="#">个人中心</a></li>
</ul>
</div>
</body>
</html>
相关文章
- 【说站】python__name__ 属性的使用注意
- 【说站】ps属性栏在哪里
- ExcelVBA文件操作之Application.FileDialog属性与方法
- pthread_create 线程属性-多线程操作 pthread_create pthread_join
- 【Android 应用开发】Activity 任务亲和性 taskAffinity 设置 ( taskAffinity 属性 )
- 【约束布局】ConstraintLayout 屏障 Barrier 约束 ( 简介 | 屏障适用场景 | 位置说明 | 相关属性 | 可视化操作 | 代码示例 | 总结 )
- 【MATLAB】基本绘图 ( 句柄值 | 对象句柄值获取 | 创建对象时获取句柄值 | 函数获取句柄值 | 获取 / 设置 对象属性 | 获取对象属性 )
- 【C 语言】文件操作 ( 配置文件读写 | 框架搭建 | 头文件定义 | 头文件导入限制 | 兼容 C++ 语言 | 函数形参输入输出属性注释)
- 【Unity3D】游戏物体操作 ② ( 3D 原生物体 | 立方体 | 球体 | 平面 | 物体移动 | 沿坐标轴移动 | 沿坐标平面移动 | 在 Inspector 检查器窗口设置坐标属性 )
- 【Unity3D】游戏物体操作 ③ ( 旋转操作 | 旋转工具 | 基本旋转 | 设置旋转属性 | 增量旋转 | 缩放操作 | 轴向缩放 | 整体缩放 | 操作工具切换 | 操作模式切换 )
- MySQL修改字段属性:一步一步来(mysql修改字段的属性)
- spring boot项目:java -jar命令 没有主清单属性详解编程语言
- JS操作属性节点(非常详细)
- JS属性节点的操作
- MySQL添加字段属性:快速操作指南(mysql添加字段属性)
- MSSQL如何添加自增属性的操作指南(mssql 添加自增属性)
- MySQL修改列属性操作指南(mysql中修改列属性)
- javascript常用方法、属性集合及NodeList和HTMLCollection的浏览器差异
- DOM_window对象属性之--clipboardData对象操作代码
- js中巧用cssText属性批量操作样式
- C#获取属性名的方法
- jqueryajax属性async(同步异步)示例
- python通过ElementTree操作XML获取结点读取属性美化XML
- Javascript设置对象的ReadOnly属性(示例代码)