HTML5基礎加強css樣式篇（css過度效果：介面的浮層遮罩和消失）（十九）

阿新 • • 發佈：2019-01-20

1最終效果圖：

1.靜態頁面佈局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        html, body{
            height: 100%;
            /*html, body 預設高度 0 */
            margin: 0;
        }
        .wrapper{
            width: 480px;
            margin: 0 auto;

            background-color: yellow;
            height: 100%;

            position: relative;
        }
        .header{
            background-color: orange;
        }
        .header img{
            vertical-align: middle;
            margin: 8px;
        }
        .mask{
            background-color: rgba(0, 0, 0, .5);
            position: absolute;
            width: 100%;
            height: 100%;

            top: 0;
        }
    </style>
</head>
<body>

<div class="wrapper">
    <div class="header">
        <img src="img/icon_list.png" alt="">
    </div>
    <div class="mask">

    </div>
</div>

<script type="text/javascript">


</script>
</body>
</html>

2.邏輯程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        html, body{
            height: 100%;
            /*html, body 預設高度 0 */
            margin: 0;
        }
        .wrapper{
            width: 480px;
            margin: 0 auto;

            background-color: yellow;
            height: 100%;

            position: relative;
        }
        .header{
            background-color: orange;
        }
        .header img{
            vertical-align: middle;
            margin: 8px;
        }
        .mask{
            background-color: rgba(0, 0, 0, .5);
            position: absolute;
            width: 0;
            height: 100%;

            top: 0;
        }
        /*顯示浮層*/
        .mask-show{
            width: 100%;
            transition-duration: 1s;
        }

    </style>
</head>
<body>

<div class="wrapper">
    <div class="header">
        <img src="img/icon_list.png" alt="" id="btnToggle">
    </div>
    <div class="mask" id="mask">

    </div>
</div>

<script type="text/javascript">
//    單擊導航圖示顯示浮層，需要有過渡效果

        var btnToggleDom = document.querySelector("#btnToggle");
        var maskDom = document.querySelector("#mask");

        btnToggleDom.onclick = function () {
            maskDom.classList.toggle("mask-show");
        }
//        單擊浮層，浮層消失
        maskDom.onclick = function () {
            maskDom.classList.toggle("mask-show");
        }

</script>
</body>
</html>

3最終程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        html, body{
            height: 100%;
            /*html, body 預設高度 0 */
            margin: 0;
        }
        .wrapper{
            width: 480px;
            margin: 0 auto;

            background-color: yellow;
            height: 100%;

            position: relative;
        }
        .header{
            background-color: orange;
        }
        .header img{
            vertical-align: middle;
            margin: 8px;
        }
        .mask{
            background-color: rgba(0, 0, 0, .5);
            position: absolute;
            width: 0;
            height: 100%;

            top: 0;

                      /* 當過度時間設定在開始狀態時就會變成雙向過度*/

            transition-duration: 1s;

        }

        /*顯示浮層*/
        .mask-show{
            width: 100%;
          /*transition-duration: 1s;*/

        }

    </style>
</head>
<body>

<div class="wrapper">
    <div class="header">
        <img src="img/icon_list.png" alt="" id="btnToggle">
    </div>
    <div class="mask" id="mask">

    </div>
</div>

<script type="text/javascript">
//    單擊導航圖示顯示浮層，需要有過渡效果

        var btnToggleDom = document.querySelector("#btnToggle");
        var maskDom = document.querySelector("#mask");

        btnToggleDom.onclick = function () {
            maskDom.classList.toggle("mask-show");
        }
//        單擊浮層，浮層消失
        maskDom.onclick = function () {
            maskDom.classList.toggle("mask-show");
        }

</script>
</body>
</html>

HTML5基礎加強css樣式篇（css過度效果：介面的浮層遮罩和消失）（十九）

1最終效果圖： . 1.靜態頁面佈局： <!DOCTYPE html> <html lang="en"> <head> <meta charset=

HTML5基礎加強css樣式篇（多媒體選擇器）（十七）

1印表機： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

HTML5基礎加強css樣式篇（伸縮容器屬性：flex-direction， flex-wrap，flex-flow，align-items，align-content）（五十三）

1.justify-content 屬性詳見（五十二）2.flex-direction:row || row-reverse || column || column-reverse //設定主軸的方向row:預設：row 反向設定主軸方向：column :主軸方向設定為縱軸方

HTML5基礎加強css樣式篇（背景圖大小設定：background-size）（三十九）

1.background-size屬性： <!DOCTYPE html> <html lang="en"> <head> <meta charset=

HTML5基礎加強css樣式篇（css屬性：怪異盒模型解析）（四十六）

1.怪異盒模型和border有關：設定border寬度可以影響其他元素的佈局：但是在IE5及以下里面只是影響其子元素； 2.可以同時設定 box-sizing屬性來使用這一特性，是其改變border寬度也不影響其他元素； 3,.box-sizing:簡單理解就是盒子大小基

HTML5基礎加強css樣式篇（語義化表單）（五十六）

1.語義化表單<!doctype html> <html> <head> <meta charset="UTF-8"/> </head> &l

web前端（7）—— 瞭解CSS樣式，引入css樣式的方式

CSS 在前面大概的介紹了css，從本片博文開始，會詳細的介紹它，在最開始介紹web前端時，開啟百度首頁，當時我提出了一個問題，為什麼百度首頁的輸入框可以放在正中間，就是由於有css的控制，我們可以開啟瀏覽器的除錯介面檢視這個輸入框的css樣式：圖中我

web前端（7）—— 了解CSS樣式，引入css樣式的方式

ont 屬性每一個添加聲明客戶學習查看 ref CSS 在前面大概的介紹了css，從本片博文開始，會詳細的介紹它，在最開始介紹web前端時，打開百度首頁，當時我提出了一個問題，為什麽百度首頁的輸入框可以放在正中間，就是由於有css的控制，我們可以打開瀏覽器的調

CSS——（CSS樣式規則，CSS樣式表單，選擇器，常用的CSS屬性）

CSS（Cascading Style Sheets，層疊樣式表單）是由W3C所提出，主要的用途是控制網頁的外觀，也就是定義網頁的編排，顯示，格式化及特殊效果，有部分功能與HTML重疊。 1.CSS樣式規則與選擇器 CSS樣式表單是由一條一條的樣式規則（st

CSS進階（十九）文本控制

bre spa div 切換效果 nowrap align 分隔下劃線效果 text-indent 應用（1）使用 text-indent 負值隱藏文本內容，例如網站標頭（2）使用text-indent的百分比值來實現寬度已知的內聯子元素居中 letter-spac

Spring.NET教程（十九）整合NHibernate和ASP.NET MVC(基礎篇)

contains sar occurs false port company param soft stat 今天帶給大家的就是期待以久的ASP.net MVC與Spring.NET和NHibernate的組合，視圖打造.NET版的SSH(Spring-Struts-Hib

CSS進階（十九）文字控制

text-indent 應用（1）使用 text-indent 負值隱藏文字內容，例如網站標頭（2）使用text-indent的百分比值來實現寬度已知的內聯子元素居中 letter-spacing 應用（1）清除 inline-block 列表由於換行符或者空格產生的空白間隙，使我們的佈局控

CSS總結篇之css組合選擇符

（一）後代選擇器後代選擇器：先找到選擇器1，然後在選擇器1下面去查詢所有選擇器2，並設定屬性（1）語法：選擇器1 選擇器2{ } （2）注意點後代選擇器必須使用空格隔開；後代不僅僅包括兒子，還包括孫子，曾孫等等；後代選擇器可以無限巢狀（二）子

7. CSS樣式基本知識與選擇器、繼承、層疊和特殊性

css 樣式由選擇符和宣告組成，而宣告又由屬性和值組成 p{ color: blue } p_選擇符 {}_宣告 color_屬性 blue_值第7章 CSS樣式基本知識內聯式、嵌入式和外部式三種三種方法的優先順序:內聯式 >

css樣式表、css選擇器

1 簡述 CSS 樣式表的使用方式。 HTML 頁面有三種使用 CSS 樣式表的方式： 1、內聯樣式表：樣式規定在單個的元素中，寫在元素的 style 屬性裡； 2、內部樣式表：樣式定義在HTML

《Android 基礎（四十九）》Navigation Of JetPack【譯】

原文地址: https://developer.android.google.cn/topic/libraries/architecture/navigation/ 介紹 Jetpack是Android軟體元件的集合，可以使你更輕鬆地開發出色的Android應用

java基礎學習總結（十九）：Unsafe與CAS

Unsafe 簡單講一下這個類。Java無法直接訪問底層作業系統，而是通過本地（native）方法來訪問。不過儘管如此，JVM還是開了一個後門，JDK中有一個類Unsafe，它提供了硬體級別的原子操作。 &n

Spring Boot + Spring Cloud 實現許可權管理系統後端篇（十九）：服務消費（Ribbon、Feign）

技術背景上一篇教程中，我們利用Consul註冊中心，實現了服務的註冊和發現功能，這一篇我們來聊聊服務的呼叫。單體應用中，程式碼可以直接依賴，在程式碼中直接呼叫即可，但在微服務架構是分散式架構，服務都執行在各自的程序之中，甚至部署在不同的主機和不同的地區。這個時候就需要相關的遠端呼叫技術了。 Spring

Python3基礎之（十九）class類 init功能

一、init __init__可以理解成初始化class的變數，取自英文中initial最初的意思.可以在執行時，給初始值賦值，執行c=Calculator(‘bad calculator’,18,17,16,15),然後調出每個初始值的值。看如下程式碼。 class Ca

Python3基礎之（二十九）zip lambda map

一、zip zip函式接受任意多個（包括0個和1個）序列作為引數，合併後返回一個tuple列表,請看示例： a=[1,2,3] b=[4,5,6] ab=zip(a,b) print(list(ab))#需要加list來視覺化這個功能輸出： [(1, 4), (2,

HTML5基礎加強css樣式篇（css過度效果：介面的浮層遮罩和消失）（十九）

相關推薦