Inicio Explorar Ayuda
Iniciar sesión
lovecoding
/
W260426
10
0
Fork 0
Archivos Incidencias 0 Pull Requests 0 Wiki
Explorar el Código

admin

fengchuanyu hace 2 horas
padre
aaf3d7b15f
commit
d40cbbf556
Se han modificado 4 ficheros con 86 adiciones y 0 borrados
Unificar vista Mostrar estadísticas de diff
  1. 36 0
      2_CSS/8_盒子模型.html
  2. 20 0
      2_CSS/9_圆角.html
  3. BIN
      2_CSS/img/phone.png
  4. 30 0
      2_CSS/练习2_简单商品卡.html

+ 36 - 0
2_CSS/8_盒子模型.html
Ver fichero 

@@ -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>

+ 20 - 0
2_CSS/9_圆角.html
Ver fichero 

@@ -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>

BIN
2_CSS/img/phone.png
Ver fichero


+ 30 - 0
2_CSS/练习2_简单商品卡.html
Ver fichero 

@@ -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>