Kezdőlap Felfedezés Súgó
Bejelentkezés
lovecoding
/
VIP28
9
0
Másolás 0
Fájlok Problémák 0 Beolvasztási kérések 0 Wiki
Forráskód Böngészése

fix:day3

e 1 éve
szülő
44525a41a0
commit
428c1447e2
2 módosított fájl, 93 hozzáadás és 0 törlés
Egyesített Nézet Diff Statisztika Mutatása
  1. 26 0
      day4/1.css基础样式.html
  2. 67 0
      day4/2.盒模型.html

+ 26 - 0
day4/1.css基础样式.html
Fájl Megtekintése 

@@ -0,0 +1,26 @@
 
+<!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>
 
+        input {
 
+            border: 1px solid #f00;
 
+            /* 
+                轮廓 outline 复合属性
 
+                    1.none 取消轮廓
 
+                    2.width style color;
 
+            */
 
+            outline: none;
 
+            outline: 2px solid #00f;
 
+            outline-width: 10px;
 
+            outline-style: dotted;
 
+            outline-color: aqua;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <input type="text">
 
+</body>
 
+</html>

+ 67 - 0
day4/2.盒模型.html
Fájl Megtekintése 

@@ -0,0 +1,67 @@
 
+<!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>
 
+        * {
 
+            margin: 0;
 
+            padding: 0;
 
+            box-sizing: border-box;
 
+            list-style: none;
 
+            text-decoration: none;
 
+        }
 
+        .content {
 
+            width: 200px;
 
+            height: 200px;
 
+            background: #00f;
 
+            color: #fff;
 
+            border: 2px solid #ff0;
 
+            /* 内边距 复合属性
 
+                padding: 
+                    1个值 上下左右
 
+                    2个值 上下 左右
 
+                    3个值 上 左右 下
 
+                    4个值 上 右 下 左
 
+                padding-top
 
+                padding-bottom
 
+                padding-left
 
+                padding-right
 
+                外边距 复合属性
 
+                margin: 
+                    1个值 上下左右
 
+                    2个值 上下 左右
 
+                    3个值 上 左右 下
 
+                    4个值 上 右 下 左
 
+                margin-top
 
+                margin-bottom
 
+                margin-left
 
+                margin-right
 
+            */
 
+            padding: 20px 10px 30px 40px;
 
+            padding-top: 40px;
 
+            /* margin: 10px; */
 
+
 
+        }
 
+        .main {
 
+            width: 100px;
 
+            height: 100px;
 
+            background: #f00;
 
+            margin: 30px;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <!-- 
+        盒模型
 
+        标准盒模型(IE盒模型) box-sizing:content-box;
 
+         width=content(内容) + padding +border
 
+        怪异盒模型：box-sizing:border-box;
 
+         width = content(width + padding + border)
 
+     -->
 
+    <div class="content">
 
+        <div class="main"></div>
 
+    </div>
 
+</body>
 
+</html>