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. OpenStack之四: keystone验证服务(端口5000)

    #官网地址:https://docs.openstack.org/keystone/stein/install/keystone-install-rdo.html #:创建库,并授权 MariaDB ...

  2. Spring.DM版HelloWorld

    本文主要描述使用Spring.DM2.0,创建OSGi的HelloWorld演示程序,理解Spring.DM的OSGi框架实现机制.   环境描述: 项目 版本 Eclipse 3.7.x JDK 1 ...

  3. 手写Starter

    一. Starter工程的命名 Spring 官方定义的Starter通常命名遵循的格式为spring-boot-starter-{name},例如 spring-boot-starter-web.S ...

  4. Springboot整合MongoDB(Eclipse版本)

    IDEA版本其实也差不多的,大同小异 简单Demo地址: https://blog.csdn.net/shirukai/article/details/82152243 Springboot项目整合M ...

  5. pthread_cond_signal与pthread_cond_wait详解

    转:http://blog.chinaunix.net/uid-11572501-id-3456343.html //pthread_cond_signal 只发信号,内部不会解锁,在Linux 线程 ...

  6. 通过Docker部署Java项目的日志输出到宿主机指定目录

    之前写过2篇关于Docker部署的文章: 1.超!超!超简单,Linux安装Docker 2.Docker通过阿里云镜像仓库使用Gitlab_CI部署SpringBoot项目 用上篇博客部署Java程 ...

  7. CF111A Petya and Inequiations 题解

    Content 请找出一个由 \(n\) 个正整数组成的数列 \(\{a_1,a_2,\dots,a_n\}\),满足以下两种条件: \(\sum\limits_{i=1}^na_i^2\geqsla ...

  8. TCP 长连接保活机制&HTTP长连接设置

    TCP KeepAlive Wireshark抓包分析机制 -------------------------------- 如上图所示,TCP保活报文总是成对出现,包括TCP保活探测报文和TCP保活 ...

  9. JAVA匹配html中所有img标签

    public static List<String> getImg(String htmlStr) { List<String> list = new ArrayList< ...

  10. 一种实用性较强的求IOU的算法(任意多边形之间的IOU)

    PS:要转载请注明出处,本人版权所有. PS: 这个只是基于<我自己>的理解, 如果和你的原则及想法相冲突,请谅解,勿喷. 前置说明   本文作为本人csdn blog的主站的备份.(Bl ...