-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathday6-xiaomi-smartphones.html
121 lines (108 loc) · 3.06 KB
/
day6-xiaomi-smartphones.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小米手机</title>
<style>
body {
background-color: #f5f5f5;
}
ul {
display: flex;
flex-wrap: wrap;
padding: 0;
}
h1 {
text-align: center;
}
.product {
border: solid #f0f0f0 1px;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.6rem;
background-color: white;
padding: 0 0.8rem 2rem 0.8rem;
margin: 0.4rem;
}
.product-price {
margin-top: 0.4rem;
font-size: 0.8rem;
}
.product-price__onSale>span {
color: red;
}
.product-price__soldOut {
color: gray;
text-decoration: line-through;
}
.product-price__soldOut>span {
color: gray;
}
.product-price__soldOut::before {
content: "已售罄";
}
.product-name {
font-size: 1rem;
}
.product-feature {
font-size: 0.8rem;
color: gray;
}
</style>
</head>
<body>
<h1>热卖机型</h1>
<ul>
<li class="product">
<img src="https://placehold.co/200x200" height="200" width="200" alt="小米10 青春版 5G 蓝色">
<h3 class="product-name">
用<code><ul></code>和<code><li></code>来罗列
</h3>
<p class="product-feature">
用<code><ul></code>和<code><li></code>来罗列各个机型
</p>
<p class="product-price product-price__onSale">
<span>2099</span>
元起
</p>
</li>
<li class="product">
<img src="https://placehold.co/200x200" height="200" width="200" alt="小米10 青春版 5G 蓝色">
<h3 class="product-name">此处用<code><h3></code></h3>
<p class="product-feature">此处用<code><p></code></p>
<p class="product-price product-price__onSale">
此处用<code><p></code>
</p>
</li>
<li class="product">
<img src="https://placehold.co/200x200" height="200" width="200" alt="小米10 黑色">
<h3 class="product-name">小米10</h3>
<p class="product-feature">骁龙865 / 1亿像素相机</p>
<p class="product-price product-price__soldOut">
<span>3799</span>
元起
</p>
</li>
<li class="product">
<img src="https://placehold.co/200x200" height="200" width="200" alt="Redmi K30 Pro 白色">
<h3 class="product-name">Redmi K30 Pro</h3>
<p class="product-feature">双模5G，骁龙865，弹出全面屏</p>
<p class="product-price product-price__onSale">
<span>2699</span>
元起
</p>
</li>
<li class="product">
<img src="https://placehold.co/200x200" height="200" width="200" alt="Redmi K30 Pro 变焦版 灰色">
<h3 class="product-name">Redmi K30 Pro</h3>
<p class="product-feature">双模5G，骁龙865，弹出全面屏</p>
<p class="product-price product-price__onSale">
<span>3499</span>
元起
</p>
</li>
</ul>
</body>
</html>