1.visibility:hidden;
2.display: none; 区别:
1.visibility:hidden 隐藏元素本身,且在网页中 占位置
2.display:none; 隐藏元素本身,且在网页中不占用位置,脱标 开发中常用:
display:none;隐藏 display:block 显示出来

使用案例:鼠标经过弹出下载二维码导航

html结构代码
<body>
<div class="box">
<div class="centerbox">
<ul>
<li><a href="#">平台导航</a></li>
<li><a href="#">平台导航</a></li>
<li class="abc"><a href="#">平台导航</a>
<img src="./images/code.jpg" alt="">
</li>
<li><a href="#">app下载</a> </li>
<li><a href="#">平台导航</a></li> </ul>
</div> </div>
</body>

CSS结构代码

<style>
.box{
height: 37px;
border-top: 1px solid red;
border-bottom: 1px solid red;
}
.centerbox{
width: 1075px;
margin: 0 auto;
}
ul{
padding: 0;
margin: 0;
list-style: none;
}
ul li{
float: left;
width: 215px;
height: 37px;
border-right: 1px solid red;
box-sizing: border-box;
text-align: center;
line-height: 37px;
}
ul li:last-child {
border-right: 0;
}
ul li a{
text-decoration: none;
color: #0c0c0c;
}
ul .abc{
position: relative;
}
ul .abc img{
position: absolute;
top:33px;
left: 46px;
display: none;
}
ul .abc:hover img{
display: block;
}
</style>

CSS基础 装饰 元素本身隐藏和显示效果及案例的更多相关文章

  1. HTML&CSS基础-子元素的伪类选择器

    HTML&CSS基础-子元素的伪类选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html的源代码 <!DOCTYPE html> <html& ...

  2. HTML&CSS基础-子元素和后代元素选择器

    HTML&CSS基础-子元素和后代元素选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html ...

  3. HTML&CSS基础-伪元素选择器

    HTML&CSS基础-伪元素选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> ...

  4. CSS基础 表框圆角的基本使用和案例

    属性:border-radius:数字+px: 用途:修饰盒子圆角 使用语法格式: 1. border-radius:20px : /* 四个叫同时以半径20px圆角*/ 2. border-radi ...

  5. 第一百六十六节,jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度、偏移、滚动条

    jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度.偏移.滚动条 学习要点: 1.DOM 简介 2.设置元素及内容 3.元素属性操作 4.元素样式操作 ...

  6. HTML&CSS基础-内联和块元素

    HTML&CSS基础-内联和块元素 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> ...

  7. [19/06/05-星期三] CSS基础_样式表的位置(内联、内部、外部样式)、块元素(div)、内联元素(span)、常用的选择器

    一.概念 CSS(Cascading Style Sheets,层叠样式表) 可以用来为网页创建样式表,通过样式表可以对网页进行装饰. 所谓层叠,就是可以将整个网页想象成是一层一层的结构,层次高的将会 ...

  8. CSS基础:块级元素与盒模型

    简介 在 HTML4.01 中,元素通常可以分为块级元素( “Block-level element” ) 和内联元素 ( "Inline-level element" ) 两大类 ...

  9. CSS 小结笔记之元素的隐藏与显示

    在网站上经常会有一些需要一定操作才会显示或隐藏的元素,这时会用到元素的隐藏与显示.主要通过以下三种属性实现. 1.display :none|block |inline |inline-block d ...

随机推荐

  1. Google Guava 常用集合方法

    /** * Author: momo * Date: 2018/6/7 * Description: */ public class ListTest { public static void mai ...

  2. SQL查询:并集、差集、交集

    新建两个表进行测试: test_a ID name 1 曹操 2 郭嘉 3 孙权 4 周瑜 test_b ID name 1 刘备 2 关羽 3 张飞 4 孙权 5 周瑜 1.UNION形成并集 UN ...

  3. java上传图片或文件

    转载至:http://www.xdx97.com/#/single?bid=8b351a73-922c-eadc-512e-9e248a3efde9 前端通过form表单用post方式提交文件,后台进 ...

  4. 【Fastjson】Fastjson反序列化由浅入深

    Fastjson真-简-介 fastjson是由alibaba开发并维护的一个json工具,以其特有的算法,号称最快的json库 fastjson的使用 首先先创一个简单的测试类User public ...

  5. IM即时通讯设计 高并发聊天服务:服务器 + qt客户端(附源码)

    来源:微信公众号「编程学习基地」 目录 IM即时通信程序设计 IM即时通讯 设计一款高并发聊天服务需要注意什么 如何设计可靠的消息处理服务 什么是粘包 什么是半包 解决粘包和半包 IM通信协议 应用层 ...

  6. Table.Skip删除前面N….Skip/RemoveFirstN(Power Query 之 M 语言)

    数据源: "姓名""基数""个人比例""个人缴纳""公司比例""公司缴纳"&qu ...

  7. Spring5 概述及Spring IOC学习

    Spring Framework 5 1. Spring框架 1.1 Spring框架概述 1.2 主要内容 Spring框架是一个开源的JavaEE的应用程序 主要核心是 IOC(控制反转)和AOP ...

  8. Django中的常用字段类型与参数

    Django中的常用字段类型 1. 数值型 以下都是数值相关的,比如AutoField,它在MySQL中的类型为int(11),而BooleanField在MySQL中对应的类型是tinyint(1) ...

  9. LuoguP2378 因式分解II 题解

    Content 输入一个多项式 \(x^2+ax+b\)(不保证 \(a,b\neq0\)),请对这个多项式进行因式分解(形式为 \((x-x_1)(x-x_2)\),其中 \(x_1>x_2\ ...

  10. LuoguP5006 [yLOI2018] 大美江湖 题解

    Content 题意实在是太过复杂了,因此请回到题面查看. Data Range 本部分和 Solution 部分变量的含义同题面. \(1\leqslant n,m\leqslant 100,0\l ...