Home Explore Help
Sign In
lovecoding
/
Web1020
10
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

admin

fengchuanyu 3 months ago
parent
b4cd34c8af
commit
525df58833
2 changed files with 158 additions and 0 deletions
Unified View Show Diff Stats
  1. 70 0
      5_DOM/8_cssBFC.html
  2. 88 0
      5_DOM/练习3_右键菜单.html

+ 70 - 0
5_DOM/8_cssBFC.html
View File 

@@ -0,0 +1,70 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        /* BFC */
 
+        .box{
 
+            width: 200px;
 
+            height: 200px;
 
+            background-color: blue;
 
+            /* overflow: hidden; */
 
+            border:1px solid black;
 
+        }
 
+        .box2{
 
+            width: 100px;
 
+            height: 100px;
 
+            background-color: red;
 
+            margin-left: 10px;
 
+            margin-top: 50px;
 
+        }
 
+        .box3,.box4{
 
+            width: 100px;
 
+            height: 100px;
 
+            background-color: green;
 
+        }
 
+        .box3{
 
+            margin-bottom: 30px;
 
+        }
 
+        .box4{
 
+            margin-top: 20px;
 
+            background-color: purple;
 
+        }
 
+        .box5{
 
+            overflow: hidden;
 
+        }
 
+        .box6,.box7{
 
+            width: 100px;
 
+            height: 100px;
 
+            background-color: blue;
 
+            float: left;
 
+        }
 
+        .box7{
 
+            background-color: red;
 
+        }
 
+        .box8{
 
+            
+            background-color:green;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <!-- 外边距溢出 -->
 
+    <!-- <div class="box">
 
+        <div class="box2"></div>
 
+    </div> -->
 
+
 
+    <!-- 外边距合并 -->
 
+    <!-- <div class="box5">
 
+        <div class="box3"></div>
 
+    </div>
 
+    <div class="box4"></div> -->
 
+
 
+    <div class="box8">
 
+        <div class="box6"></div>
 
+        <div class="box7"></div>
 
+    </div>
 
+</body>
 
+</html>

+ 88 - 0
5_DOM/练习3_右键菜单.html
View File 

@@ -0,0 +1,88 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        /* css reset */
 
+        body{
 
+            margin: 0;
 
+        }
 
+        li{
 
+            list-style: none;
 
+        }
 
+        ul{
 
+            margin: 0;
 
+            padding: 0;
 
+        }
 
+
 
+        .box{
 
+            /* width: 100vw;
 
+            height: 100vh; */
 
+            position: fixed;
 
+            top: 0;
 
+            left: 0;
 
+            right: 0;
 
+            bottom: 0;
 
+            background-color: rgba(0,0,0,0.5);
 
+        }
 
+        .menu{
 
+            width: 200px;
 
+            height: 400px;
 
+            background-color: #fff;
 
+            position: fixed;
 
+            top:200px;
 
+            left: 200px;
 
+        }
 
+        .menu li{
 
+            padding:10px 20px;
 
+            border-bottom: 1px solid #999;
 
+
 
+        }
 
+        .container{
 
+            display: none;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="container">
 
+        <!-- 黑色半透明背景蒙版 -->
 
+        <div class="box"></div>
 
+        <!-- 菜单栏 -->
 
+        <div class="menu">
 
+            <ul>
 
+                <li>菜单一</li>
 
+                <li>菜单二</li>
 
+                <li>菜单三</li>
 
+            </ul>
 
+        </div>
 
+    </div>
 
+    <script>
 
+        // 获取dom元素 整个文档
 
+        var oDom = document.documentElement;
 
+        // 蒙版和菜单区域
 
+        var oContainer = document.getElementsByClassName("container")[0];
 
+        // 蒙版
 
+        var oBox = document.getElementsByClassName("box")[0];
 
+        // 菜单
 
+        var oMenu = document.getElementsByClassName("menu")[0];
 
+        
+        // 右键显示菜单
 
+        oDom.oncontextmenu = function(e){
 
+            // 记录点击位置
 
+            var x = e.clientX;
 
+            var y = e.clientY;
 
+            // 设置菜单位置
 
+            oMenu.style.left = x+"px";
 
+            oMenu.style.top = y+"px";
 
+            // 显示菜单及蒙版
 
+            oContainer.style.display = "block";
 
+            return false;
 
+        }
 
+        oBox.onclick = function(){
 
+            oContainer.style.display = "none";
 
+        }
 
+   </script>
 
+</body>
 
+</html>