題目說明
寫出這樣子的網頁切版
示範效果
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
這兩個屬性去微調
這個是很好用的小技巧，可以特別留意
心得
這種切板很常見 使用的伎倆其實差不多就那些
學習上
可以藉由先完成效果 再尋求優化的原則
以上 有相關問題都可以提出討論 或是歡迎投稿想要切版的圖片
我未來可以寫一系列的切版文來跟大家交流～～～
很棒的分享！