display:none的妙用

div hover的时候隐藏一个元素,另一个显示,类似于http://www.h5doo.com/上的效果

时间: 2024-07-30 13:50:32

display:none的妙用的相关文章

display:table和display:table-cell的妙用

display的table和table-cell一般情况下用的不多,所以很少有人去关注它,但他们两个联手起来会给你惊喜! 这里抛出这样一个问题,如下,让块里的多行文字垂直居中?一说到垂直居中就会想到,单行文字垂直居中line-height等于height:块级元素垂直居中,position定位或者flex布局.但这里我介绍display:table和table-cell是如何让多行文字垂直居中的.虽然感觉用的不多,但是在某些时候还是挺管用的,如下 直接上代码: html: <div class=

display:flex 在布局中的妙用

最近越来越依赖display:flex 了.本来只是在移动端用来作弹性布局,现在在PC端,我基本用它来取代 float:left.比如昨天做的一个专题,基本都用 flex 来布局. 但是这其中的原理呢,flex布局的相对于float的优势又在哪呢.只是对这些有一个模糊的概念. 比如float:left/right 这个功能,一般用来排版.而它的高度塌缩,一些潜在的未被触发的问题,总是给人一种很"不靠谱"的感觉. 先来盘点下float的特性: 1. 脱离当前文档流.浮动盒子会贴着容器或者

转载 【CSS进阶】伪元素的妙用--单标签之美

1.单个颜色实现按钮 hover .active 的明暗变化 请点击 转载利用伪元素单个颜色实现 hover 和 active 时的明暗变化效果 2.利用after伪类清除浮动 .clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; } .clearfix { *zoom:1; } 3.增强用户体验,使用伪元素实现增大点击热区.适合用在点击区域较小的移动端,PC端看上去是

妙味,结构化模块化 整站开发my100du

************************************************************************************* 重要:重新审视的相关知识 /* 妙味官网:www.miaov.com 技术交流:bbs.miaov.com 1.ps查看圆角度数,border-radius:; 选择->修改-> 平滑6px 2.渐变 -ms-filter:"progid:DXImageTransform.Microsoft.gradient (G

妙味课堂的导航效果

首页 首页 前端开发教程 前端开发教程 妙味视频教程 妙味视频教程 周末班上课安排 周末班上课安排 结课标准 结课标准 联系妙味 联系妙味 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> body,ul{margin: 0;padding: 0;} li{li

妙味课堂——HTML+CSS基础笔记

妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - PS工具: - 移动工具 - 矩形选框工具 - 裁切工具 - 吸管工具 - 横排文字工具 - 手抓(快捷键:空格) - 缩放(快捷键:Ctrl + 和 Ctrl -) - 标尺(快捷键:Ctrl R,主要是拖出参考线.矩形区域选择的时候,按住Ctrl,就能贴合参考线) - 自由变换(快捷键 Ctrl

您可能不知道的CSS元素隐藏“失效”以其妙用

by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2191 一.CSS元素隐藏 在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.后宫选秀——一个一个看. { display: none; /* 不占据空间,无法点击 */ } { visibility: hidden; /* 占据空间,无法点击

妙味js预热课程(一)

2016年5月24日(妙味课堂js预热课程-2笔记)一.前言 1.window.onload(事件):是在页面加载完成以后来执行一个功能: 如 window.onload=function(){ alert(“a”) } 这是一个匿名函数,因为在function后面括号前面没有名字: 即在页面加载完成以后弹出一个警告框! 2.如何提取行间事件: 3.为什么一定要用到onload? 二.主要内容 1.收缩展开菜单——if判断 如果菜单已经是显示的,把菜单隐藏: 如果菜单已经是隐藏的,把菜单显示.

您可能不知道的CSS元素隐藏“失效”以其妙用——张鑫旭

一.CSS元素隐藏 在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.后宫选秀——一个一个看. { display: none; /* 不占据空间,无法点击 */ } { visibility: hidden; /* 占据空间,无法点击 */ } { position: absolute; clip:rect(1px 1px 1px 1px); /* 不占据空间,无法点击 */ } { position: absolut