CSS基礎裝飾元素本身隱藏和顯示效果及案例

阿新 • • 發佈：2021-12-30

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.visibility：hidden; 2.display:none；區別： 1.visibility：hidden 隱藏元素本身，且在網頁中佔位置

jQuery：元素的隱藏和顯示

1 改變元素的寬和高（帶動畫效果）　　show( speed )：顯示　　hide( speed )：隱藏

jquery控制元素的隱藏和顯示的幾種方法。

使用jquery控制div的顯示與隱藏，一句話就能搞定，例如： 1.$(\"#id\").show()表示為display：block，

jQuery實現HTML元素隱藏和顯示

讓我們來模仿一下淘寶網當你搜索某個商品的時候，那種顯示全部品牌和顯示部分品牌的功能。

微信小程式中的滑動頁面隱藏和顯示元件功能的實現程式碼

用csdnAPP的使用者都知道，在釋出blink動態時，那個紅色按鈕會隨著你滾動頁面消失或者出現。往上滑動時，按鈕消失。往下滑動時，按鈕出現。

html+css基礎4（讓圖片和文字在一行上下居中）

技術標籤：HTML+CSS基礎注意點csshtml HTML程式碼 <dl> <dt>聯絡我們</dt>

layui按鈕，根據表單行資料的狀態值，來隱藏和顯示

技術標籤：layuihtml layui按鈕，根據表單行資料的狀態值，來隱藏和顯示實現效果如下：

[JavaWeb] CSS——基礎選擇器，字型和文字樣式

層疊樣式表（Cascading style sheets），給頁面中的HTML標籤設定樣式。 1 基礎認識層疊樣式表（Cascading style sheets），給頁面中的HTML標籤設定樣式

JQuery實現隱藏和顯示動畫效果

本文為大家分享了實現隱藏和顯示動畫效果的具體程式碼，供大家參考，具體內容如下

jQuery 效果- 隱藏和顯示隱藏、顯示、切換，滑動，淡入淡出，以及動畫

jQuery hide() 和 show() 通過 jQuery，您可以使用 hide() 和 show() 方法來隱藏和顯示 HTML 元素：

榮耀 V40 推送 4.0.0.132 安卓系統更新：優化相機和顯示效果，預置榮耀商城 / 親選 App

2 月 24 日訊息榮耀此前釋出了 V40 手機新品。這款手機搭載 80° 大麴率飛瀑屏，支援 10.7 億色彩顯示，配備天璣 1000+ 處理器以及一顆 1/1.56 英寸 5000 萬超感光主攝像頭。

一篇文章帶你瞭解CSS基礎知識和基本用法

前言相信做過網頁的對Css都不是很陌生，它可以幫助我們重鑄網頁中很多絢麗的特效，尤其是現在Css已經發展3.0版本，很多功能更是豐富多彩，讓我們的開發時間不僅大大縮短，而且還可以輕鬆做出許多華麗的特效，需要注

CSS基礎4--衝突和繼承

衝突在預設情況下，一些css屬性繼承當前元素的父元素上設定的值，有些則不繼承。這也可能導致一些和期望不同的結果

birt報表的行隱藏和列隱藏以及分組顯示

>>> 1、行隱藏按照圖中的步驟：1、選擇要隱藏的行；2、在propertyEditor 中找到visibility選項，勾上HIde Eliment 和For all outputs ; Expression裡面填上你要隱藏該行的條件，隱藏就是fal

複合選擇器，塊元素，行內元素，CSS背景，CSS層疊性、繼承性和優先順序

這篇筆記主要講了CSS快捷鍵的使用方法，複合選擇器，塊元素，行內元素，CSS背景，CSS層疊性、繼承性和優先順序

css偽元素::after和::before，及圖示字型的使用

css中的::after和::before已經被大量地使用在我們日常開發中了，使用他們可以使我們的文件結構更加簡潔。但是很多人對::after和::before仍不是特別瞭解，究竟他們是做什麼的？如何使用他們？什麼時候應該使用他們？筆

JS獲取display為none的隱藏元素的寬度和高度的解決方案

有時候，我們一進入頁面，就需要獲取display為none元素的物理尺寸（寬高），或獲取display為none元素的子元素的物理尺寸（寬高），本篇文章就如何解決以上問題給出自己的解決方案，獲取display為none元素的子元素的物

HTML基礎標籤和CSS基礎樣式總結

HTML 1. 基礎 HTML 英文全稱 Hyper Text Markuo Language 超文字標記語言描述網頁內容和外觀的標準

CSS基礎和基礎選擇器

連結 a標籤自帶屬性： href: 連結的路徑 target: _self 在當前頁跳轉，預設就是 _blank 在新頁面跳轉

顯示隱藏檔案和顯示隱藏副檔名

技術標籤：VBSRegistry登錄檔登錄檔vbs 顯示隱藏檔案、副檔名 `缺點：要手重新整理一下，才能看到效果`XP隱藏和顯示：檔案顯示和隱藏：副檔名