2 godzin temu · d40cbbf556
--- a/2_CSS/8_盒子模型.html
+++ b/2_CSS/8_盒子模型.html
@@ -0,0 +1,36 @@
 
				+<!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>
			
 
				+        /* 盒子模型 分为标准盒子模型和怪异（IE）盒子模型 */
			
 
				+        /* 标准盒子模型 元素尺寸=内容宽度+内边距+边框宽度 */
			
 
				+        /* .box{
			
 
				+            width: 200px;
			
 
				+            height: 200px;
			
 
				+            border:1px solid black;
			
 
				+            padding: 20px;
			
 
				+            margin:20px;
			
 
				+        } */
			
 
				+        /* 怪异（IE）盒子模型 元素尺寸=内容宽度 */
			
 
				+        .box {
			
 
				+            width: 200px;
			
 
				+            height: 200px;
			
 
				+            border: 1px solid black;
			
 
				+            padding: 20px;
			
 
				+            margin: 20px;
			
 
				+            box-sizing: border-box;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+    <div class="box">
			
 
				+        hello world
			
 
				+    </div>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/2_CSS/9_圆角.html
+++ b/2_CSS/9_圆角.html
@@ -0,0 +1,20 @@
 
				+<!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: 200px;
			
 
				+            height: 200px;
			
 
				+            border:1px solid black;
			
 
				+            /* 圆角 */
			
 
				+            border-radius: 20px;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <div class="box"></div>
			
 
				+</body>
			
 
				+</html>
			
--- a/2_CSS/img/phone.png
+++ b/2_CSS/img/phone.png
--- a/2_CSS/练习2_简单商品卡.html
+++ b/2_CSS/练习2_简单商品卡.html
@@ -0,0 +1,30 @@
 
				+<!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>
			
 
				+        .product-card{
			
 
				+            width: 400px;
			
 
				+            height: 500px;
			
 
				+            border:1px solid black;
			
 
				+            margin: 0 auto;
			
 
				+            padding:40px;
			
 
				+        }
			
 
				+        .product-img{
			
 
				+            width: 400px;
			
 
				+        
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <!-- 类起名 1、要做见名知意。2、如果多个单词 用短横线连接起来 -->
			
 
				+    <div class="product-card">
			
 
				+        <img class="product-img" src="./img/phone.png" alt="商品图片">
			
 
				+        <h2 class="product-name">精美智能手机</h2>
			
 
				+        <p>高清屏幕，强大性能，出色拍照。</p>
			
 
				+        <p>价格：¥3999</p>
			
 
				+    </div>
			
 
				+</body>
			
 
				+</html>