finish code challenge1

张欧文 · 张欧文 · commit 76e6c8b14afc · 2022-11-06T15:46:05.000+08:00
diff --git a/starter/02-HTML-Fundamentals/challenge.html b/starter/02-HTML-Fundamentals/challenge.html
@@ -7,34 +7,44 @@
     <title>Challenges</title>
     <link href="stylec.css" rel="stylesheet" />
   </head>
-  <div class="container">
+  <div class="container clearfix">
     <body>
       <article>
         <h2>Converse Chuck Taylor All Star Low Top</h2>
-        <img src="img/challenges.jpg" width="200" height="200" alt="图片炸了" />
-        <p><b>$65.00</b></p>
-        <p class="fshi">Free shipping</p>
-        <p>
-          Ready to dress up or down, these classic canvas Chucks are an everyday
-          wardrobe staple
-        </p>
-        <a class="more" href="#">More information &rarr;</a>
+        <img
+          class="part0"
+          src="img/challenges.jpg"
+          width="240px"
+          height="240px"
+          alt="图片炸了"
+        />
+        <div class="part1">
+          <p class="money"><b>$65.00</b></p>
+          <p class="fshi">Free shipping</p>
+          <div class="clear"></div>
+          <p>
+            Ready to dress up or down, these classic canvas Chucks are an
+            everyday wardrobe staple
+          </p>
+          <a class="more" href="#">More information &rarr;</a>
 
-        <div class="color-bars">
-          <div class="color-bar color-1">&nbsp</div>
-          <div class="color-bar color-2">&nbsp</div>
-          <div class="color-bar color-3">&nbsp</div>
-          <div class="color-bar color-4">&nbsp</div>
-          <div class="color-bar color-5">&nbsp</div>
-          <div class="color-bar color-6">&nbsp</div>
+          <div class="color-bars">
+            <div class="color-bar color-1">&nbsp</div>
+            <div class="color-bar color-2">&nbsp</div>
+            <div class="color-bar color-3">&nbsp</div>
+            <div class="color-bar color-4">&nbsp</div>
+            <div class="color-bar color-5">&nbsp</div>
+            <div class="color-bar color-6">&nbsp</div>
+          </div>
+        </div>
+        <div class="part2">
+          <h3 class="product-details">Product details</h3>
+          <ul class="details">
+            <li>Lightweight, durable canvas sneaker</li>
+            <li>Lightly padded footbed for added comfort</li>
+            <li>Iconic Chuck Taylor ankle patch</li>
+          </ul>
         </div>
-        <h3>Product details</h3>
-        <ul class="details">
-          <li>Lightweight, durable canvas sneaker</li>
-          <li>Lightly padded footbed for added comfort</li>
-          <li>Iconic Chuck Taylor ankle patch</li>
-        </ul>
-
         <button class="add-to-cart">Add to cart</button>
       </article>
     </body>
diff --git a/starter/02-HTML-Fundamentals/stylec.css b/starter/02-HTML-Fundamentals/stylec.css
@@ -1,6 +1,7 @@
 * {
   margin: 0;
   padding: 0;
+  box-sizing: border-box;
 }
 
 body {
@@ -111,7 +112,7 @@ ul {
   letter-spacing: 2px;
 }
 .color-bars {
-  margin-top: 30px;
+  margin-top: 20px;
   display: block;
 }
 
@@ -145,3 +146,47 @@ ul {
 .color-6 {
   background-color: cyan;
 }
+
+.part0 {
+  float: left;
+  width: 240px;
+}
+.part1 {
+  float: left;
+  width: 240px;
+  margin-left: 50px;
+  padding: 0;
+  margin-bottom: 0;
+}
+.part2 {
+  float: right;
+  width: 240px;
+  margin-top: 0;
+}
+
+.money {
+  float: left;
+  margin-top: 10px;
+  padding: 0;
+}
+
+.fshi {
+  float: right;
+  margin-top: 18px;
+  text-align: center;
+  clear: right;
+}
+
+.clear {
+  clear: both;
+}
+
+.product-details {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+/* .clearfix::after {
+  content: "";
+  clear: both;
+} */
diff --git a/starter/04-CSS-Layouts/style.css b/starter/04-CSS-Layouts/style.css
@@ -2,6 +2,7 @@
   /* border-top: 10px solid #1098ad; */
   margin: 0;
   padding: 0;
+  box-sizing: border-box;
 }
 
 /* PAGE SECTIONS */
@@ -299,8 +300,13 @@ article {
 aside {
   width: 300px;
   float: right;
+  padding: 50px 40px;
 }
 
 footer {
   clear: both;
 }
+
+.related {
+  margin: 0;
+}

Original file line number	Diff line number	Diff line change
`@@ -2,6 +2,7 @@`
`2`	`2`	`/* border-top: 10px solid #1098ad; */`
`3`	`3`	`margin: 0;`
`4`	`4`	`padding: 0;`
	`5`	`+ box-sizing: border-box;`
`5`	`6`	`}`
`6`	`7`
`7`	`8`	`/* PAGE SECTIONS */`
`@@ -299,8 +300,13 @@ article {`
`299`	`300`	`aside {`
`300`	`301`	`width: 300px;`
`301`	`302`	`float: right;`
	`303`	`+ padding: 50px 40px;`
`302`	`304`	`}`
`303`	`305`
`304`	`306`	`footer {`
`305`	`307`	`clear: both;`
`306`	`308`	`}`
	`309`	`+`
	`310`	`+.related {`
	`311`	`+ margin: 0;`
	`312`	`+}`