題目說明


寫出這樣子的網頁切版

示範效果

CODEPEN:https://codepen.io/flwrtykd-the-scripter/pen/VwGyOwa

代碼寫法

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>貓咪網站</title>
  </head>
  <body>
    <div class="wrap">
      <div class="hero">
        <img
          src="https://wallpapers.com/images/featured/g9rdx9uk2425fip2.jpg"
          alt=""
        />
        <div class="text">
          <span class="red">有貓咪也有狗,</span>
          <br />
          <span class="red">甚至是螳螂!</span>
          <br />
          <span class="green">隨便讓你領養</span>
        </div>
      </div>
      <div class="content">
        <div class="block">
          <img
            src="https://i.imgur.com/9ej5zY3.jpg"
            alt=""
            referrerpolicy="no-referrer"
          />
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa
            commodi quo assumenda nam tempore sint quia neque voluptatum ab.
          </p>
        </div>
        <div class="block">
          <img
            src="https://i.imgur.com/9ej5zY3.jpg"
            alt=""
            referrerpolicy="no-referrer"
          />
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa
            commodi quo assumenda nam tempore sint quia neque voluptatum ab.
          </p>
        </div>
        <div class="block">
          <img
            src="https://i.imgur.com/9ej5zY3.jpg"
            alt=""
            referrerpolicy="no-referrer"
          />
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa
            commodi quo assumenda nam tempore sint quia neque voluptatum ab.
          </p>
        </div>
      </div>
      <div class="footer">
        <p>@copy right 這邊就是一些文字</p>
      </div>
    </div>
  </body>
</html>

CSS

body {
  background: url("https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1888&q=80");
  overflow: hidden;
}

.wrap {
  width: 1000px;
  background-color: #e9edc9;
  margin: 0 auto;
  height: 100vh;
  margin-top: -10px;
}

.hero img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  object-position: 0px 1px;
}

.hero span {
  font-size: 45px;
}

.hero .green {
  font-size: 35px;
}

.text {
  position: absolute;
  top: 35px;
  left: 250px;
  font-weight: 900;
  text-shadow: 2px 2px 5px white;
  border-left: 5px solid yellow;
}

.text > * {
  margin-left: 20px;
}

.content {
  display: flex;
  justify-content: space-around;
  margin-top: 40px;
}

.block {
  width: 250px;
  border: 1px solid black;
}

.block img {
  width: 100%;
}

.block p {
  padding: 5px 20px;
}

.block:nth-child(1) {
  margin-left: 25px;
}

.footer {
  background-color: black;
  color: white;
  text-align: center;
  height: 30px;
}

.footer p {
  transform: translateY(25%);
}

布局解釋

背景以及格局

先設定一個背景 background img之後
使用wrap來製造一個效果是左右縮窄 只要設定width 以及margin auto 0就可以了
之後我使用三個分區

分別是上到下的四個div:
hero 裡面有大圖片
text是標題文字
然後是content裡面放置三個block裝著小圖片跟內容文字
最底下是footer放著版權說明

hero & text

hero就放圖片 width設定100%即可
text的話我裡面用三個span寫文字 設定class分別調整樣式
換行是使用br標籤

其中左邊的書籤效果(黃色長長那條)
是對text這個div使用border left完成的

content

這邊的話 先對content的div設定display flex達到水平排列的效果
其中可以用justify content讓它space around 平均分散開
再使用:nth-child(1) 去針對第一個block調整margin left 讓排版更精準

裡面的話 寫一個block 完成後再複製成三個

block放置img跟p即可
而它本身也要用一個border製造出邊線的效果

footer

我使用 transform: translateY(25%); 讓文字有點垂直置中的感覺
這都可以自己微調

特別注意

在hero的img調整上我使用了
object-fit
object-position
這兩個屬性去微調

這個是很好用的小技巧,可以特別留意

心得

這種切板很常見 使用的伎倆其實差不多就那些
學習上
可以藉由先完成效果 再尋求優化的原則
以上 有相關問題都可以提出討論 或是歡迎投稿想要切版的圖片

我未來可以寫一系列的切版文來跟大家交流~~~

按讚的人:

共有 1 則留言