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

add

fengchuanyu 9 months ago
parent
3970d6e339
commit
5015cbc273
4 changed files with 130 additions and 0 deletions
Split View Show Diff Stats
  1. 32 0
      2_css/11_行元素&块元素.html
  2. 29 0
      2_css/12_浮动.html
  3. 35 0
      2_css/13_解决浮动问题.html
  4. 34 0
      2_css/练习1_正方形.html

+ 32 - 0
2_css/11_行元素&块元素.html
View File 

@@ -0,0 +1,32 @@
 
+<!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>
 
+        /* 行元素 外边距只有左右没有上下 */
 
+        span{
 
+            height: 100px;
 
+            width: 100px;
 
+            background-color: red;
 
+            margin-right: 10px;
 
+            margin-bottom: 10px;
 
+            /* padding-right: 10px;
 
+            padding-bottom: 10px; */
 
+        }
 
+        div{
 
+            height: 100px;
 
+            width: 100px;
 
+            background-color: blue;
 
+            margin-bottom: 10px;
 
+        }
 
+
 
+    </style>
 
+</head>
 
+<body>
 
+    <span>hello</span><span>你好</span>
 
+    <div>world</div>
 
+    <div>世界</div>
 
+</body>
 
+</html>

+ 29 - 0
2_css/12_浮动.html
View File 

@@ -0,0 +1,29 @@
 
+<!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>
 
+        div{
 
+            width: 100px;
 
+            height: 100px;
 
+            float: left;
 
+        }
 
+        .box1{
 
+            background-color: blue;
 
+        }
 
+        .box2{
 
+            background-color: red;
 
+        }
 
+        .box3{
 
+            background: yellow;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box1"></div>
 
+    <div class="box2"></div>
 
+    <div class="box3"></div>
 
+</body>
 
+</html>

+ 35 - 0
2_css/13_解决浮动问题.html
View File 

@@ -0,0 +1,35 @@
 
+<!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>
 
+        .box1{
 
+            border:1px solid black;
 
+            /* border-width: 1px;
 
+            border-style: solid;
 
+            border-color: black; */
 
+            width: 300px;
 
+            height: 300px;
 
+        }
 
+        .box2,.box3{
 
+            width: 100px;
 
+            height: 100px;
 
+        }
 
+        .box2{
 
+            background-color: red;
 
+        }
 
+        .box3{
 
+            background-color: blue;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box1">
 
+        <div class="box2"></div>
 
+        <div class="box3"></div>
 
+        <span>hello</span>
 
+    </div>
 
+</body>
 
+</html>

+ 34 - 0
2_css/练习1_正方形.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>
 
+    <style>
 
+        .box{
 
+            width: 100px;
 
+            height: 100px;
 
+            background-color:red;
 
+        }
 
+        .box2{
 
+            background-color: blue;
 
+            padding-bottom: 100px;
 
+            width: 100px;
 
+        }
 
+        .box3{
 
+            width: 100px;
 
+            background-color: yellow;
 
+        }
 
+        .box3::after{
 
+            content: "";
 
+            display: block;
 
+            padding-bottom: 100%;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box"></div>
 
+    <div class="box2"></div>
 
+    <div class="box3"></div>
 
+</body>
 
+</html>