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