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. 【Linux】【Services】【SaaS】Docker+kubernetes（10. 利用反向代理实现服务高可用）

    1. 简介 1.1. 由于K8S并没有自己的集群,所以需要借助其他软件来实现,公司的生产环境使用的是Nginx,想要支持TCP转发要额外安装模块,测试环境中我就使用HAPROXY了 1.2. 由于是做 ...

  2. java实现数组集合转成json格式

    一.下载fastjson.jar http://repo1.maven.org/maven2/com/alibaba/fastjson 二.项目添加jar包 Java Build Path 三.导入类 ...

  3. pytest_BDD + allure 自动化测试框架

    一.项目结构 --driverAction ----Assessement.py ----basicPageAction.py ----BrowserDriver.py --drivers ----c ...

  4. C#汽车租赁系统

    类图: 父类(车类,抽象类) /// <summary> /// 车辆基本信息类.搞一个抽象类玩玩 /// </summary> public abstract class V ...

  5. HMAC在“挑战/响应”（Challenge/Response）身份认证的应用

    HMAC的一个典型应用是用在"挑战/响应"(Challenge/Response)身份认证中. 认证流程 (1) 先由客户端向服务器发出一个验证请求. (2) 服务器接到此请求后生 ...

  6. AT2287 [ARC067B] Walk and Teleport 题解

    Content 一条直线上有 \(n\) 个城市,第 \(i\) 个城市的坐标为 \(x_i\).你在某一个城市内,每一次你可以按两种方式之一进行移动: 左右移动,每移动一个单位疲劳值增加 \(a\) ...

  7. .NET Core基础篇之：白话管道中间件

    在.Net Core中,管道往往伴随着请求一起出现.客户端发起Http请求,服务端去响应这个请求,之间的过程都在管道内进行. 举一个生活中比较常见的例子:旅游景区. 我们都知道,有些景区大门离景区很远 ...

  8. TensorFlow.NET机器学习入门【2】线性回归

    回归分析用于分析输入变量和输出变量之间的一种关系,其中线性回归是最简单的一种. 设: Y=wX+b,现已知一组X(输入)和Y(输出)的值,要求出w和b的值. 举个例子:快年底了,销售部门要发年终奖了, ...

  9. Semaphore信号量源码解析

    介绍 Semaphore是什么 Semaphore可以称为信号量,这个原本是操作系统中的概念,是一种线程同步方法,配合PV操作实现线程之间的同步功能.信号量可以表示操作系统中某种资源的个数,因此可以用 ...

  10. JAVA获取当前年份，月份、日期、小时、分钟、秒等

    import java.util.Calendar; public class Main { public static void main(String[] args) { Calendar cal ...