fengchuanyu 2 周之前
父節點
當前提交
08dba30bb3
共有 3 個文件被更改,包括 75 次插入0 次删除
  1. 22 0
      2_CSS/5_文本行高.html
  2. 32 0
      2_CSS/6_控制块元素水平居中.html
  3. 21 0
      2_CSS/7_圆角.html

+ 22 - 0
2_CSS/5_文本行高.html

@@ -0,0 +1,22 @@
+<!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;
+            border:1px solid black;
+            line-height: 100px;
+        }
+    </style>
+</head>
+<body>
+    <!-- <div>您可以使用 HTML 来建立自己的 WEB 站点,HTML 运行在浏览器上,由浏览器来解析。
+在本教程中,您将学习如何使用 HTML 来创建站点。</div> -->
+
+<div>hello world</div>
+</body>
+</html>

+ 32 - 0
2_CSS/6_控制块元素水平居中.html

@@ -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>
+        .box {
+            width: 100px;
+            height: 100px;
+            border: 1px solid black;
+            /* margin 后边跟着一个值的时候 上下左右 都是一样的 */
+            /* margin: 100px; */
+            /* margin 后边有4个值 margin: 上 右 下 左 */
+            /* margin:100px 100px 100px 100px; */
+            /* margin 后边跟两个值 第一个值代表上下 第二个值代表左右 */
+            /* margin:10px 100px; */
+            /* margin 后边跟3个值 第一个值代表上 第二只代表左右 第三个值代表下 */
+            /* margin: 10px 100px 20px; */
+
+            /* margin 如果使用auto这个值 仅能用作于左右 上下无效 它会把左右两边可用空间评分成两份 左右各一份 */
+            margin:0 auto;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="box"></div>
+</body>
+
+</html>

+ 21 - 0
2_CSS/7_圆角.html

@@ -0,0 +1,21 @@
+<!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;
+            border:1px solid black;
+            border-radius: 10px;
+        }
+    </style>
+</head>
+<body>
+    <div class="box">
+
+    </div>
+</body>
+</html>