iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 14
0
Modern Web

菜鳥網頁基礎系列 第 14

菜鳥網頁基礎 DAY14

  • 分享至 

  • xImage
  •  

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

<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>

https://ithelp.ithome.com.tw/upload/images/20200923/20129535WuCFTVDIT9.png
https://ithelp.ithome.com.tw/upload/images/20200923/20129535sH0HYq9Kdb.png

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

我們要把三張卡片變橫的就要去設定裝在這三張卡片的容器,所以就是最外面那個區塊,我們要使使用的是 flex 元素,放在 flex 內的項目會橫著排,然後我們讓她置中。
https://ithelp.ithome.com.tw/upload/images/20200923/20129535TxR5o9FgcO.png
上圖是電腦呈現的時候

https://ithelp.ithome.com.tw/upload/images/20200923/2012953563Cbb724RY.png
上圖是縮小成手機版面

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

https://ithelp.ithome.com.tw/upload/images/20200923/201295352udxHbVFPY.png
https://ithelp.ithome.com.tw/upload/images/20200923/20129535WgHrw62HbE.png

.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程式碼


上一篇
菜鳥網頁基礎 DAY13
下一篇
菜鳥網頁基礎 DAY15
系列文
菜鳥網頁基礎30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言