ARTICLE是什麼?

用來標記獨立的內容，幫助提高文檔的結構性和可讀性。

HTML

📌 <div class ="items">
      <article class = "item">
         <img src="./img/1.jpg">
         <span>商品1</span>
         <span>$123</span>
      </article>
      <article class = "item">
         <img src="./img/1.jpg">
         <span>商品1</span>
         <span>$123</span>
      </article>
      <article class = "item">
         <img src="./img/1.jpg">
         <span>商品1</span>
         <span>$123</span>
      </article>
      <article class = "item">
         <img src="./img/1.jpg">
         <span>商品1</span>
         <span>$123</span>
      </article>
    </div>

文字標籤

📌 <span>商品1</span>

CSS

📌 .items
   {
      width: 90vw;
      margin-left: 5vw;
      margin-top: 1vh;
      height: auto;
      border-radius: 1em;
      display: flex;
      border:1px solid rgb(202, 201, 201);
      background-color: white;
   }
   .item
   {
      width: 23%;
      height: 30vh;
      margin-left:1%;
      margin-right:1%;
      margin-top: 1vh;
      margin-bottom: 1vh;
      border:1px solid rgb(202, 201, 201);
      border-radius: 1em;
   }
   .item img
   {
      width:80%;
      margin-left: 10%;
   }
   .item span
   {
      margin-left: 10%;
      font-size: 200%;
   }

讓DIV 由左到右

📌 display: flex;

DIV的外框用黑邊描1PX

📌 border:1px solid rgb(202, 201, 201);

設置文字大小

📌 font-size: 200%;

如此一來，可愛的商品欄誕生~

程式碼收錄:https://github.com/chyhhwen/shopping-system