fengchuanyu 10 months ago
parent
commit
c63f30aaf5
5 changed files with 44 additions and 0 deletions
  1. BIN
      .DS_Store
  2. BIN
      2_css/.DS_Store
  3. BIN
      2_css/img/.DS_Store
  4. BIN
      2_css/img/img2.png
  5. 44 0
      2_css/练习3_商品卡片.html

BIN
.DS_Store


BIN
2_css/.DS_Store


BIN
2_css/img/.DS_Store


BIN
2_css/img/img2.png


+ 44 - 0
2_css/练习3_商品卡片.html

@@ -0,0 +1,44 @@
+<!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>
+        body{
+            background-color: #f5f5f5;
+        }
+        .card-content{
+            width: 250px;
+            /* border:1px solid black; */
+            margin: 0 auto;
+            padding: 20px;
+            background-color: #fff;
+            /* 阴影  第一个值横向偏移 第二个值纵向偏移 第三个值扩散值 第四个值阴影颜色 */
+            box-shadow: 0 0 5px #666;
+        }
+        .card-img{
+            text-align: center;
+        }
+        .card-img img{
+            width: 200px;
+        }
+        /* .card-info h3{
+            margin-left: 20px;
+        } */
+        
+    </style>
+</head>
+<body>
+    <div class="card-content">
+        <div class="card-img">
+            <img src="./img/img2.png" alt="图片">
+        </div>
+        <div class="card-info">
+            <h3>精美智能手机</h3>
+            <p>高清屏幕,强大性能,出色拍照。</p>
+            <p>¥3999</p>
+        </div>
+    </div>
+</body>
+</html>