Skip to content

Commit 2840945

Browse files
张欧文张欧文
张欧文
authored and
张欧文
committed
placing items
1 parent 2f6e16d commit 2840945

File tree

5 files changed

+233
-170
lines changed

5 files changed

+233
-170
lines changed

‎starter/02-HTML-Fundamentals/challenge.html

Lines changed: 35 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -11,39 +11,43 @@
1111
<body>
1212
<article>
1313
<h2>Converse Chuck Taylor All Star Low Top</h2>
14-
<img
15-
class="part0"
16-
src="img/challenges.jpg"
17-
width="240px"
18-
height="240px"
19-
alt="图片炸了"
20-
/>
21-
<div class="part1">
22-
<p class="money"><b>$65.00</b></p>
23-
<p class="fshi">Free shipping</p>
24-
<div class="clear"></div>
25-
<p>
26-
Ready to dress up or down, these classic canvas Chucks are an
27-
everyday wardrobe staple
28-
</p>
29-
<a class="more" href="#">More information &rarr;</a>
14+
<div class="row">
15+
<img
16+
class="part0"
17+
src="img/challenges.jpg"
18+
width="240px"
19+
height="240px"
20+
alt="图片炸了"
21+
/>
22+
<div class="part1">
23+
<div class="little-row">
24+
<p class="money"><b>$65.00</b></p>
25+
<p class="fshi">Free shipping</p>
26+
</div>
27+
<div class="clear"></div>
28+
<p>
29+
Ready to dress up or down, these classic canvas Chucks are an
30+
everyday wardrobe staple
31+
</p>
32+
<a class="more" href="#">More information &rarr;</a>
3033

31-
<div class="color-bars">
32-
<div class="color-bar color-1">&nbsp</div>
33-
<div class="color-bar color-2">&nbsp</div>
34-
<div class="color-bar color-3">&nbsp</div>
35-
<div class="color-bar color-4">&nbsp</div>
36-
<div class="color-bar color-5">&nbsp</div>
37-
<div class="color-bar color-6">&nbsp</div>
34+
<div class="color-bars">
35+
<div class="color-bar color-1">&nbsp</div>
36+
<div class="color-bar color-2">&nbsp</div>
37+
<div class="color-bar color-3">&nbsp</div>
38+
<div class="color-bar color-4">&nbsp</div>
39+
<div class="color-bar color-5">&nbsp</div>
40+
<div class="color-bar color-6">&nbsp</div>
41+
</div>
42+
</div>
43+
<div class="part2">
44+
<h3 class="product-details">Product details</h3>
45+
<ul class="details">
46+
<li>Lightweight, durable canvas sneaker</li>
47+
<li>Lightly padded footbed for added comfort</li>
48+
<li>Iconic Chuck Taylor ankle patch</li>
49+
</ul>
3850
</div>
39-
</div>
40-
<div class="part2">
41-
<h3 class="product-details">Product details</h3>
42-
<ul class="details">
43-
<li>Lightweight, durable canvas sneaker</li>
44-
<li>Lightly padded footbed for added comfort</li>
45-
<li>Iconic Chuck Taylor ankle patch</li>
46-
</ul>
4751
</div>
4852
<button class="add-to-cart">Add to cart</button>
4953
</article>

‎starter/02-HTML-Fundamentals/stylec.css

Lines changed: 36 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,9 @@ h2 {
2323
text-align: center;
2424
}
2525

26-
h3 {
26+
/* h3 {
2727
margin-top: 30px;
28-
}
28+
} */
2929
b {
3030
font-size: 24px;
3131
}
@@ -70,8 +70,11 @@ button:hover {
7070
li {
7171
margin-bottom: 10px;
7272
}
73+
li:last-child {
74+
margin-bottom: 0;
75+
}
7376

74-
ul {
77+
li ul {
7578
margin-left: 20px;
7679
}
7780

@@ -146,7 +149,7 @@ ul {
146149
.color-6 {
147150
background-color: cyan;
148151
}
149-
152+
/*
150153
.part0 {
151154
float: left;
152155
width: 240px;
@@ -180,13 +183,40 @@ ul {
180183
.clear {
181184
clear: both;
182185
}
183-
186+
*/
184187
.product-details {
185-
margin-top: 10px;
188+
/* margin-top: 10px; */
186189
margin-bottom: 10px;
187190
}
188191

189192
/* .clearfix::after {
190193
content: "";
191194
clear: both;
192195
} */
196+
.little-row {
197+
display: flex;
198+
align-items: center;
199+
justify-content: space-between;
200+
201+
/* gap: 25px; */
202+
}
203+
.row {
204+
display: flex;
205+
/* justify-content: space-between; */
206+
align-items: center;
207+
/* gap: 25px; */
208+
margin-bottom: 0;
209+
}
210+
211+
.part1 {
212+
flex: 1;
213+
margin-left: 40px;
214+
margin-top: 20px;
215+
margin-right: 40px;
216+
}
217+
218+
.part2 {
219+
flex: 1;
220+
/* margin-top: 20px; */
221+
/* margin-right: 40px; */
222+
}

‎starter/04-CSS-Layouts/css-grid.html

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@
1111
}
1212
.el--2 {
1313
background-color: orangered;
14+
grid-column: 1 / 2;
15+
grid-row: 2 / 3;
1416
}
1517
.el--3 {
1618
background-color: green;
@@ -30,19 +32,28 @@
3032
}
3133
.el--8 {
3234
background-color: crimson;
35+
grid-column: 2 / 3;
36+
grid-row: 1 / 2;
3337
}
3438

3539
.container--1 {
3640
/* STARTER */
3741
font-family: sans-serif;
3842
background-color: #ddd;
39-
font-size: 40px;
43+
font-size: 20px;
4044
margin: 40px;
4145

4246
/* CSS GRID */
47+
display: grid;
48+
grid-template-columns: 1fr 1fr 1fr 1fr;
49+
grid-template-rows: repeat(2, 1fr);
50+
51+
column-gap: 30px;
52+
row-gap: 60px;
4353
}
4454

4555
.container--2 {
56+
display: none;
4657
/* STARTER */
4758
font-family: sans-serif;
4859
background-color: black;

0 commit comments

Comments
 (0)