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. Does compiler create default constructor when we write our own?

    In C++, compiler by default creates default constructor for every class. But, if we define our own c ...

  2. JS 的三种定义变量 var let const

    Let 只在 let 命令所在的代码块内有效,在外就会报错 Let 是块级作用域,函数内部使用let定义后,对函数外部无影响 Let/const 不存在变量提升,使用前一定要声明后,在使用,否则会报错 ...

  3. JUC概述

    JUC概述1: 首先是进程和线程的概念: 进程:是指系统在系统中正在运行的一个应用程序,程序一旦运行就是进程,进程是资源分配的最小单位 线程:进程之内独立执行,是程序执行的最小单位 线程的六大状态:在 ...

  4. 培训班输出的大量学员，会对IT行业产生哪些影响？

    先说下会有哪些影响呢?   1 可能也就是些大城市的,规模比较大的,口碑比较好的培训学校输出的码农才能入行,而且能做长久.一些线上的所谓培训机构,或者小城市的培训学校,输出的能入行的码农,其实规模很有 ...

  5. python模块（三）

    hashilib模块 hashilib模块的主要作用是加密,可以将明文数据通过一系列算法转化为秘闻数据. 目的是为了数据的安全. 加密算法包括md系列,sha系列,base系列,hmac系列. 基本使 ...

  6. [BUUCTF]PWN——[Black Watch 入群题]PWN

    [Black Watch 入群题]PWN--栈劫持 入群题密码在 /password.txt Ubuntu 16 2020年02月27日:此入群题已作废,请看新版入群题. 附件 解题步骤: 例行检查, ...

  7. 小迪安全 Web安全 基础入门 - 第十天 - 信息打点-APP&小程序篇&抓包封包&XP框架&反编译&资产提取

    一.本节知识点思维导图 二.APP-外在资产收集 1.将APP安装在模拟器中,修改模拟器代理设置,使用Fiddler.Burpsuite.Charles等抓包工具抓取APP访问的http协议数据包,抓 ...

  8. Java面向对象~类和对象&方法，类方法

    面向对象 概念:     1.同一类事物的抽象描述,不是具体的    2.类和对象的关系:        类 是抽象的.        对象 是具体的.    3.对象的体征,称为"属性&q ...

  9. Shell 丢弃错误和输出信息

    shell中使用>/dev/null 2>&1 丢弃信息   在一些Shell脚本中,特别是Crontab的脚本中,经常会看到 >/dev/null 2>&1这 ...

  10. SQL优化一例：通过改变分组条件（减少计算次数）来提高效率

    #与各人授权日期相关,所以有十万用户,就有十万次查询(相关子查询) @Run.ExecuteSql("更新各人应听正课数",@"update bi_data.study_ ...