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. hadoop基本命令（转）

    在这篇文章中,我们默认认为Hadoop环境已经由运维人员配置好直接可以使用. 假设Hadoop的安装目录HADOOP_HOME为/home/admin/hadoop. 启动与关闭 启动HADOOP 进 ...

  2. 多线程异步操作导致异步线程获取不到主线程的request信息

    org.springframework.web.context.request.RequestContextHolderorg.springframework.web.context.request. ...

  3. linux shell学习之shell流程控制

    在linux shell编程中,流程控制结构与语句,也算是shell脚本中的重点了,不了解的朋友,跟随脚本小编一起来学习下吧. linux控制流结构学习. 一,shell控制流结构 1.控制结构   ...

  4. 学习 27 门编程语言的长处，提升你的 Python 代码水平

    Python猫注:Python 语言诞生 30 年了,如今的发展势头可谓如火如荼,这很大程度上得益于其易学易用的优秀设计,而不可否认的是,Python 从其它语言中偷师了不少.本文作者是一名资深的核心 ...

  5. 一种基于Java Swing/HTML/MySQL的汽车租赁系统

    该项目是一个Java的课程作业(大二),主要运用Java.Swing.HTML.MySQL,实现基本的租车逻辑.界面可视化.信息导出.数据存储等功能.实现管理员.用户两种角色登录,并结合Java开发中 ...

  6. ios获取文件MD5值

    一般我们在使用http或者socket上传或者下载文件的时候,经常会在完成之后经行一次MD5值得校验(尤其是在断点续传的时候用的更 多),校验MD5值是为了防止在传输的过程当中丢包或者数据包被篡改,在 ...

  7. HGAME2021 week4 pwn writeup

    第四周只放出两道题,也不是很难. house_of_cosmos 没开pie,并且可以打got表. 在自写的输入函数存在漏洞.当a2==0时,因为时int类型,这里就会存在溢出.菜单题,但是没有输出功 ...

  8. 工作组规划器（Project）

    <Project2016 企业项目管理实践>张会斌 董方好 编著 好像前面每分配一次任务,都要打开一个对话框,有木有简单粗暴点的法子啊? 必须有啊! 视图里有一种[工作组规划器],想要粗暴 ...

  9. Vlookup大叔早已油腻（Excel函数集团）

    1.Vlookup基础用法:https://mp.weixin.qq.com/s/0JRytWlBD-KYM2jkecG2rA 2.合并字符串:https://mp.weixin.qq.com/s/9 ...

  10. SpringCloud (一) Eureka

    Eureka Eureka 是一个服务治理组件,它主要包括服务注册和服务发现,主要用来搭建服务注册中心. Eureka 是一个基于 REST 的服务,用来定位服务,进行中间层服务器的负载均衡和故障转移 ...