Day26 切版筆記- 方塊酥版面

2021 iThome 鐵人賽

DAY 26

自我挑戰組

文組視角的初學前端筆記系列第 26 篇

13th鐵人賽

ptsai129

2021-09-26 18:42:25

945 瀏覽

分享至

今天來練習下面這個版面~

運用到的觀念:

使用float排版
:first-child
~選取器
相對定位&絕對定位
盒模型& box-sizing:border-box;
overflow:hidden;
margin:auto;
google fonts字體載入
opacity 搭配:hover, transition作出互動效果
transform:scale()搭配:hover, transition作出互動效果

HTML 結構

 <div class="wrap">
      <div class="item">
        <img src="https://picsum.photos/500/500?random=10" alt="" />
        <div class="txt">
          <h3>金魚都懂切版</h3>
          <p>
            金魚都懂的這個網頁怎麼切，是 IThome
            鐵人賽的主題，主要訴求在簡單快速將一個網頁畫面完成，但也由於時間有限，
            所以沒有處理RWD部分，留給廣大網友腦補囉。
          </p>
        </div>
      </div>
      <div class="item">
        <img src="https://picsum.photos/500/500?random=20" alt="" />
        <div class="txt">
          <h3>這是一首歌的歌詞</h3>
          <p>
            堅持對我來說，就是以剛克剛。 我如果對自己妥協，
            如果對自己說謊，即使別人原諒，我也不能原諒。
          </p>
        </div>
      </div>
      <div class="item">
        <img src="https://picsum.photos/500/500?random=30" alt="" />
        <div class="txt">
          <h3>這是一首歌的歌詞</h3>
          <p>
            長大後誰不是離家出走，茫茫人海裡游。抬起頭才發現，流眼淚的星星正在放棄我。
            請擁抱我，萬一我不小心墜落。
          </p>
        </div>
      </div>
      <div class="item">
        <img src="https://picsum.photos/500/500?random=40" alt="" />
        <div class="txt">
          <h3>這是一首歌的歌詞</h3>
          <p>
            世界上七千個地方，我們定居哪?告訴我答案是什麼?你喜歡去哪?
            青海或三亞?冰島或希臘?南美不去嗎?沙漠你愛嗎?
          </p>
        </div>
      </div>
      <div class="item">
        <img src="https://picsum.photos/500/500?random=50" alt="" />
        <div class="txt">
          <h3>這是一首歌的歌詞</h3>
          <p>
            閉上眼，閉上眼，總會看到剎那的神。一晃眼，一晃眼，總會碰到偶然的真。
            過一天，愛一天，反正一切都有可能。
          </p>
        </div>
      </div>
    </div>

CSS結構

1.先設定CSS RESET
將背景設成黑色
固定wrap區塊的寬度
用margin:auto;將wrap區塊水平置中
item區塊設定浮動靠左排列 float:left;
wrap區塊(item的父層)設定overflow:hidden;讓item區塊的高度能撐開wrap區塊
設定item區塊內的圖片寬度能填滿整個item區塊並更改圖片對齊設定以消除多餘的空白空間
使用 :first-child 將第一個item區塊設定成較大的寬度
使用 ~選取器將除了第一個item區塊以外的item區塊設定寬度

* {
  margin: 0;
  padding: 0;
  list-style: none;
}

body{
  background-color: #000;
}
.wrap{
  width: 960px ; 
  margin:auto; 
  overflow: hidden;
}

.item{
  float:left; 
}

.item img{
  width: 100%;
  vertical-align: middle;
}

.item:first-child{
	width: 50%;
}
.item:first-child ~ .item{
	width: 25%;
}

多出來的黑色區塊是txt區塊

將文字txt區塊固定到item區塊內

.item{
  float:left; 
  position: relative; 
}

.item .txt{
  position: absolute;
  top:0;
  left:0; 
  height: 100%;
  width:100%;
  padding: 15px;
  text-align: center;
  color: #fff;
}

可以看到有些文字內容不見了，是因為txt區塊設定高度寬度都是100%又加上padding會多出寬度，
所以設定box-sizing:border-box;來調整

.item .txt{
  position: absolute;
  top:0;
  left:0; 
  height: 100%;
  width:100%;
  padding: 15px;
  box-sizing: border-box;
  text-align: center;
  color: #fff;

新增box-sizing: border-box; 後

將txt區塊內的文字內容設成垂直置中且背景顏色調整成半透明

.item .txt{
  position: absolute;
  top:0;
  left:0; 
  height: 100%;
  width:100%;
  padding: 15px;
  box-sizing: border-box;
  text-align: center;
  color: #fff;
   background-color: rgba(0,0,0,.6);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
 }

載入字體設定

@import url("https://fonts.googleapis.com/css?family=Noto+Sans+TC:100,300,400,500,700,900&display=swap");

* {
 margin: 0;
 padding: 0;
 list-style: none;
 font-family: "Noto Sans TC", sans-serif; 
}

更改p 和h3的字體粗細和文字排版

.item p{
 font-weight: 100;
 line-height: 1.7;
}

.item h3{
margin-bottom: .4em;
}

使用opacity 搭配:hover 和 transition 做出游標碰到圖片時文字才會出現的效果

.item .txt{
  position: absolute;
  top:0;
  left:0; 
  height: 100%;
  width:100%;
  padding: 15px;
  box-sizing: border-box;
  text-align: center;
  color: #fff;
  background-color: rgba(0,0,0,.6);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition:.5s 
}
 
.item:hover .txt{
  opacity: 1;
}

使用transform: scale() 搭配:hover 和 transition 做出游標碰到圖片時文字區塊才會放大的效果

.item .txt{
  position: absolute;
  top:0;
  left:0; 
  height: 100%;
  width:100%;
  padding: 15px;
  box-sizing: border-box;
  text-align: center;
  color: #fff;
  background-color: rgba(0,0,0,.6);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
 
 opacity: 0;
  transform: scale(0); 
  transition:.5s 
}
 
.item:hover .txt{
 transform:scale(1); 
  opacity: 1;
}