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

fix:day6

e 1 year ago
parent
6ae0511b46
commit
3337c5cd72
3 changed files with 59 additions and 0 deletions
Unified View Show Diff Stats
  1. 25 0
      day6/css/index.css
  2. 34 0
      day6/html/index.html
  3. BIN
      day6/images/banner.png

+ 25 - 0
day6/css/index.css
View File 

@@ -0,0 +1,25 @@
 
+.box {
 
+    width: 200px;
 
+    height: 200px;
 
+    background: #00f;
 
+    margin-top: 20px;
 
+    color: #ff0;
 
+    font-size: 30px;
 
+    font-weight: bold;
 
+}
 
+* {
 
+    margin: 0;
 
+    padding: 0;
 
+    box-sizing: border-box;
 
+}
 
+.special {
 
+    background: #f00;
 
+    /* position: fixed; */
 
+    /* position: sticky; */
 
+    /* position: static; */
 
+    /* top: 150px; */
 
+    position: absolute;
 
+    top: 100px;
 
+    left: 150px;
 
+    /* left: 100px; */
 
+}

+ 34 - 0
day6/html/index.html
View File 

@@ -0,0 +1,34 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <link rel="stylesheet" href="../css/index.css">
 
+</head>
 
+<body>
 
+    <!-- 
+        网页页面：标准流 浮动 定位
 
+        定位：
 
+            position
 
+            1.fixed 固定定位 相对于祖先元素 不占位脱离了文档流
 
+            2.sticky 粘性定位 占位不脱离文档流
 
+            3.static 静态定位
 
+            4.relative 相对定位 相对于元素本身 占位不脱离文档流
 
+            5.absolute 绝对定位 不占位脱离文档流 
+                a.当使用绝对定位时 父级元素中没有使用定位  相对于祖先元素定位
 
+                b.当父级元素使用相对定位 则子元素相对于父级进行定位
 
+            位置：top bottom left right
 
+     -->
 
+     <div style="margin-top: 100px;border: 1px solid #000;width: 300px;height: 100%;position: relative;">
 
+        <div class="box">1</div>
 
+        <div class="box">2</div>
 
+        <div class="special box">3</div>
 
+        <div class="box">4</div>
 
+        <div class="box">5</div>
 
+        <div class="box">6</div>
 
+        <div class="box">7</div>
 
+        <div class="box">8</div>
 
+     </div>
 
+</body>
 
+</html>

BIN
day6/images/banner.png
View File