分析了 操作 元素样式属性的 三种方式 : 行内样式操作 , 类名样式操作 , 类列表样式操作 ;
一、案例需求
在页面中 , 设置一个对话框 , 点击对话框左侧 x 按钮 , 关闭对话框 ;
二、案例核心要点...1、关闭对话框的效果实现
关闭对话框 的 效果 , 可以使用 display 属性实现 ;
显示对话框 : 设置 display:block 属性 ;
隐藏对话框 : 设置 display:none...属性 ;
2、display 属性简介
标签元素 的 display 属性 可用于定义一个元素如何在页面上显示 , 该属性 控制了元素的盒模型特性 , 如 : 尺寸、布局方式和如何处理与其他元素的关系..., PC 页面不常用 ;
grid : 设置元素 为 网格容器 , 子元素 按照网格系统排列 , 适用于创建复杂的二维布局 ;
list-item : 设置元素 为 列表项 , 通常用于 使用 绝对布局 , 设置 上下左右 绝对布局值的时候 , 使用 负值即可超出边界 ;
三、完整代码示例
代码示例 :
<!