菜鳥網頁基礎 DAY14

第 12 屆 iThome 鐵人賽

DAY 14

Modern Web

菜鳥網頁基礎系列第 14 篇

12th鐵人賽

小徐

團隊教練我想寫code

2020-09-29 00:04:28

543 瀏覽

上一片把卡片做好了，這次我們就來排版，我們複製第一張卡片的程式碼，然後圖片換掉，用好後後變成這樣。

<body>
  <!-- 卡片1開始 -->
  <section>
    <h1>卡片</h1>
    <div class="card">
      <img class="card-img" src="https://picsum.photos/id/250/600/400" alt="">
      <div class="card-body">
        <h2 class="card-title">卡片標題</h2>
        <p class="card-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia quos obcaecati, rerum
          quia fugit exercitationem laudantium repellat eos molestias. Odio numquam minima eum non placeat, eligendi
          deserunt maiores illum rem, dignissimos, sequi in! Laborum harum perferendis, at ab nisi veritatis eveniet
          corporis voluptatem saepe hic pariatur ut culpa perspiciatis distinctio!</p>
      </div>
    </div>
    <!-- 卡片1結尾 -->
 
    <!-- 卡片2開始 -->
    <div class="card">
      <img class="card-img" src="https://picsum.photos/id/210/600/400" alt="">
      <div class="card-body">
        <h2 class="card-title">卡片標題</h2>
        <p class="card-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia quos obcaecati, rerum
          quia fugit exercitationem laudantium repellat eos molestias. Odio numquam minima eum non placeat, eligendi
          deserunt maiores illum rem, dignissimos, sequi in! Laborum harum perferendis, at ab nisi veritatis eveniet
          corporis voluptatem saepe hic pariatur ut culpa perspiciatis distinctio!</p>
      </div>
    </div>
    <!-- 卡片2結尾 -->
 
    <!-- 卡片3開始 -->
    <div class="card">
      <img class="card-img" src="https://picsum.photos/id/270/600/400" alt="">
      <div class="card-body">
        <h2 class="card-title">卡片標題</h2>
        <p class="card-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia quos obcaecati, rerum
          quia fugit exercitationem laudantium repellat eos molestias. Odio numquam minima eum non placeat, eligendi
          deserunt maiores illum rem, dignissimos, sequi in! Laborum harum perferendis, at ab nisi veritatis eveniet
          corporis voluptatem saepe hic pariatur ut culpa perspiciatis distinctio!</p>
      </div>
    </div>
    <!-- 卡片3結尾 -->
 
  </section>
</body>

網頁呈現出來的方式會是直的，不管你怎麼伸縮網頁他的版型都是直的，所以我們要把它變成橫的。

我們要把三張卡片變橫的就要去設定裝在這三張卡片的容器，所以就是最外面那個區塊，我們要使使用的是 flex 元素，放在 flex 內的項目會橫著排，然後我們讓她置中。

上圖是電腦呈現的時候

上圖是縮小成手機版面

那我們想要讓它呈現手機版面的時候是正常的，就會使用 flex-wrap: wrap;，空間不夠的時候他就會自動換行

.cards {
    display: flex;
    justify-content: center;
    /* 讓 flex 內的項目置中 */
    flex-wrap: wrap;
    /* 空間不夠時會自動換行 */
}

這是針對排版的程式碼

* {
    /* border: 1px solid black; */
    margin: 0;
    padding: 0;
}
 
.cards {
    display: flex;
    justify-content: center;
    /* 讓 flex 內的項目置中 */
    flex-wrap: wrap;
    /* 空間不夠時會自動換行 */
}
 
.card {
    width: 350px;
    margin: 20px 35px;
    box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.5);
    /* x軸 y軸 模糊度 rgb的0.5是透明度 */
    border-radius: 15px;
    overflow: hidden;
    /* 把內部超出邊界的內容隱藏 */
}
 
.card-img {
    width: 100%;
    display: block;
}
 
.card-title {
    padding-left: 15px;
    /* margin-bottom: 15px;
        margin-top: 15px; */
    margin: 15px 0 15px 0;
    /*  margin: 15px 0 15px 0;  上 右 下 左*/
}
 
.card-content {
    padding-left: 15px;
    padding-bottom: 15px;
    padding-right: 15px;
    /* padding: 0 15px 15px 15px;  上 右 下 左*/
}

這些是完整的CSS程式碼