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. SpringBoot 整合 spring security oauth2 jwt完整示例 附源码

    废话不说直接进入主题(假设您已对spring security.oauth2.jwt技术的了解,不懂的自行搜索了解) 依赖版本 springboot 2.1.5.RELEASE spring-secu ...

  2. my36_InnoDB关键特性之change buffer

    一.关于IOT:索引组织表 表在存储的时候按照主键排序进行存储,同时在主键上建立一棵树,这样就形成了一个索引组织表,一个表的存储方式以索引的方式来组织存储的. 所以,MySQL表一定要加上主键,通过主 ...

  3. 【Matlab】快速傅里叶变换/ FFT/ fftshift/ fftshift(fft(fftshift(s)))

    [自我理解] fft:可以指定点数的快速傅里叶变换 fftshift:将零频点移到频谱的中间 用法: Y=fftshift(X) Y=fftshift(X,dim) 描述:fftshift移动零频点到 ...

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

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

  5. 前端浅谈-协议相关(DNS协议)

    从应用层到实体层的协议太多了,我们并不能一一涉及,目前来说就打算整理可能会与前端相关的协议. 前端面试常会问到一个问题-"从输入一个url到页面渲染经历了哪些过程".这其实是一个相 ...

  6. Hadoop分布式文件系统（HDFS）设计

    Hadoop分布式文件系统是设计初衷是可靠的存储大数据集,并且使应用程序高带宽的流式处理存储的大数据集.在一个成千个server的大集群中,每个server不仅要管理存储的这些数据,而且可以执行应用程 ...

  7. LuoguB2106 矩阵转置 题解

    Content 给定一个 \(n\times m\) 的矩阵 \(A\),求其转置 \(A^\text T\). 数据范围:\(1\leqslant n,m\leqslant 100\). Solut ...

  8. flutter 学习笔记

    常用属性 container 填充padding,边距margins,边框borders,背景色color, decoration: 渐变gradient-Alignment(x,y),圆角borde ...

  9. SpringBoot项目使用Nacos作为配置中心

    前置条件:jdk.SpringBoot项目.Nacos.Linux服务器(可无) 具体版本:jdk11.SpringBoot 2.3.5.RELEASE.Nacos 2.0.3.Centos 6 目标 ...

  10. IDEA快速创建一个简单的SpringBoot项目(需要联网)

    一.点击File-New-Project,选择Spring initializr ,选择jdk1.8及以上 二.填写相关信息,点击Next 3.选择Web -Spring Web,点击Next 4.输 ...