Home Explore Help
Sign In
lovecoding
/
web0715
10
0
Fork 0
Files Issues 0 Wiki
Browse Source

add

fengchuanyu 10 months ago
parent
1d5e1d78b5
commit
115f72fb39
3 changed files with 119 additions and 0 deletions
Split View Show Diff Stats
  1. 46 0
      2_css/23_定位.html
  2. 36 0
      2_css/24_定位.html
  3. 37 0
      2_css/24_隐藏效果.html

+ 46 - 0
2_css/23_定位.html
View File 

@@ -0,0 +1,46 @@
 
+<!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>
 
+        .box{
 
+            width: 400px;
 
+            height: 400px;
 
+            border:3px solid black;
 
+            position: relative;
 
+        }
 
+        .box2{
 
+            width: 100px;
 
+            height: 100px;
 
+            background-color:red;
 
+            /* float: right; */
 
+            /* relative 相较于自己进行定位 */
 
+            /* position: relative;
 
+            top:20px;
 
+            left: 20px; */
 
+
 
+            /* absolut 相较于最近已经定位的父元素 */
 
+            /* position: absolute;
 
+            right: 0;
 
+            bottom: 0; */
 
+
 
+            position: absolute;
 
+            left: 0;
 
+            top: 0;
 
+
 
+            /* fixd 固定定位 相较于浏览器窗口 */
 
+            /* position: fixed;
 
+            right: 0;
 
+            bottom: 0; */
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box">
 
+        <div class="box2"></div>
 
+        <span>hello</span>
 
+    </div>
 
+</body>
 
+</html>

+ 36 - 0
2_css/24_定位.html
View File 

@@ -0,0 +1,36 @@
 
+<!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>
 
+        .box{
 
+            width: 400px;
 
+            height: 400px;
 
+            border:3px solid black;
 
+            position: relative;
 
+        }
 
+        .box1,.box2{
 
+            width: 100px;
 
+            height: 100px;
 
+            position: absolute;
 
+            top:0;
 
+            left: 0;
 
+        }
 
+        .box1{
 
+            background-color: red;
 
+            z-index: 1;
 
+        }
 
+        .box2{
 
+            background-color: blue;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box">
 
+        <div class="box1"></div>
 
+        <div class="box2"></div>
 
+    </div>
 
+</body>
 
+</html>

+ 37 - 0
2_css/24_隐藏效果.html
View File 

@@ -0,0 +1,37 @@
 
+<!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>
 
+        .box{
 
+            width: 400px;
 
+            height: 400px;
 
+            border:3px solid black;
 
+        }
 
+        .box:hover .box2{
 
+            display: none;
 
+        }
 
+        .box2:hover{
 
+            display: none;
 
+        }
 
+        .box2{
 
+            width: 100px;
 
+            height: 100px;
 
+            /* background-color: rgba(0, 0, 0, 0); */
 
+            background-color: red;
 
+            /* opcity 控制元素的透明度 取值范围0-1 */
 
+            /* opacity: 0.9; */
 
+
 
+            /* display: none; */
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box">
 
+        <div class="box2"></div>
 
+        <span>hello</span>
 
+    </div>
 
+</body>
 
+</html>