2 周之前 · d20f8e40fb
--- a/2_CSS/8_cssreset.html
+++ b/2_CSS/8_cssreset.html
@@ -0,0 +1,38 @@
 
				+<!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>
			
 
				+        /* css reset 重置浏览器默认样式 */
			
 
				+        /* 因为浏览器自带样式会影响我们的布局 所以需要重置浏览器默认样式 */
			
 
				+        /* 一般情况下我们会去除所有浏览器自带样式 */
			
 
				+        ul {
			
 
				+            padding: 0;
			
 
				+        }
			
 
				+        li{
			
 
				+            list-style: none;
			
 
				+        }
			
 
				+        div{
			
 
				+            width: 500px;
			
 
				+            margin:100px auto;
			
 
				+            border:3px solid black;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+    <!-- css reset 重置浏览器默认样式 -->
			
 
				+    <div>
			
 
				+        <ul>
			
 
				+            <li>列表项 1</li>
			
 
				+            <li>列表项 2</li>
			
 
				+            <li>列表项 3</li>
			
 
				+        </ul>
			
 
				+    </div>
			
 
				+
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/2_CSS/9_背景色.html
+++ b/2_CSS/9_背景色.html
@@ -0,0 +1,19 @@
 
				+<!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;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <div class="box"></div>
			
 
				+</body>
			
 
				+</html>
			
--- a/2_CSS/练习2盒子模型.html
+++ b/2_CSS/练习2盒子模型.html
@@ -0,0 +1,45 @@
 
				+<!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: 500px;
			
 
				+            border:3px solid blue;
			
 
				+            margin:100px auto;
			
 
				+            border-radius: 20px;
			
 
				+            padding: 0 50px;
			
 
				+        }
			
 
				+        img{
			
 
				+            width: 500px;
			
 
				+            border-radius: 20px;
			
 
				+        }
			
 
				+        ul{
			
 
				+            padding: 0;
			
 
				+        }
			
 
				+        /* 块元素默认宽度跟父元素的一样宽 */
			
 
				+        li{
			
 
				+            list-style: none;
			
 
				+            background-color: gray;
			
 
				+            margin:10px 0;
			
 
				+            border-radius: 10px;
			
 
				+            padding:10px;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <div class="box">
			
 
				+        <h1>盒子一</h1>
			
 
				+        <!-- 图片大小不受容器限制 -->
			
 
				+        <img src="./img/img1.jpg" alt="图片">
			
 
				+        <p>这是盒子 1 中的详细描述。这里可能包含更多的文字内容，以展示内边距的效果。</p>
			
 
				+        <ul>
			
 
				+            <li>列表项 1</li>
			
 
				+            <li>列表项 2</li>
			
 
				+            <li>列表项 3</li>
			
 
				+        </ul>
			
 
				+    </div>
			
 
				+</body>
			
 
				+</html>