fengchuanyu 2 veckor sedan
förälder
incheckning
e195014014
2 ändrade filer med 56 tillägg och 0 borttagningar
  1. BIN
      2_CSS/img/phone.png
  2. 56 0
      2_CSS/练习4_商品卡.html

BIN
2_CSS/img/phone.png


+ 56 - 0
2_CSS/练习4_商品卡.html

@@ -0,0 +1,56 @@
+<!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>
+        .goods-card{
+            width: 234px;
+            border:1px solid black;
+            padding: 20px;
+            margin:100px auto;
+            text-align: center;
+        }
+        img{
+            width: 234px;
+        }
+        .goods-title{
+            margin:0;
+            font-size: 14px;
+            font-weight: 400;
+            color: #333;
+        }
+        .goods-info{
+            margin: 0;
+            color: #b0b0b0;
+            font-size: 12px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+        .goods-price{
+            margin-top: 20px;
+        }
+        .new-price{
+            color: #ff6700;
+        }
+        .old-price{
+            color: #b0b0b0;
+        }
+    </style>
+</head>
+<body>
+    <div class="goods-card">
+        <img src="./img/phone.png" alt="手机图片">
+        <h3 class="goods-title">Xiaomi 17 Pro Max</h3>
+        <p class="goods-info">
+            徕卡光影大师 移动影像系统|徕卡 5X 超聚光潜望长焦
+        </p>
+        <div class="goods-price">
+            <span class="new-price">5999元</span>
+            <del class="old-price">6999元</del>
+        </div>
+    </div>
+</body>
+</html>