iT邦幫忙

2021 iThome 鐵人賽

DAY 26
0
自我挑戰組

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

Day26 切版筆記- 方塊酥版面

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


運用到的觀念:

  1. 使用float排版
  2. :first-child
  3. ~選取器
  4. 相對定位&絕對定位
  5. 盒模型& box-sizing:border-box;
  6. overflow:hidden;
  7. margin:auto;
  8. google fonts字體載入
  9. opacity 搭配:hover, transition作出互動效果
  10. 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區塊


  1. 將文字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;


  1. 將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;
 } 


  1. 載入字體設定
@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;
} 


  1. 使用opacity 搭配:hovertransition 做出游標碰到圖片時文字才會出現的效果
.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;
}


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

參考資料:金魚都能懂的這個網頁畫面怎麼切 : 方塊酥版面,金魚都能懂網頁設計入門 : Float浮動 (鐵人賽第九天)

以上為個人學習筆記整理
若有錯誤,歡迎指正


上一篇
Day25 切版筆記 - 導覽列
下一篇
Day27 切版筆記 - 破格式設計
系列文
文組視角的初學前端筆記30

尚未有邦友留言

立即登入留言