0%

CSS 筆記 - 金魚切版系列:01-圖文滿版切法

pic

這次要完成的切版如上圖,當中藏著幾個小技巧:

HTML 架構

先確認架構正確了,再來寫 CSS 會更快速。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="banner">
<div class="container">
<div class="bannerText">
<h1>
金魚系列-圖文滿版練習
<small>跟著 AMOS 來切版</small>
</h1>
<h2>使用到的技巧</h2>
<p>
使用到 CSS reset,inline & block ,flex-direction 的原理
<br />
漸層色彩與多重背景撰寫方式,100vh 螢幕高度!
</p>
</div>
</div>
</div>

SCSS

CSS reset

Amos 用這個方式就完成了 CSS reset (尖叫)!

1
2
3
4
5
* {
margin: 0;
padding: 0;
list-style: none;
}

container

制定 container 的寬度,當中有一個 RWD 偷懶方式

1
2
3
4
5
6
.container {
width: 100%;
max-width: 1280px; //RWD 偷懶方式
height: 100%;
margin: 0 auto;
}

.bannerText 文字排版

再來處理文字排版,先不給色彩與細節,這邊僅確認排版。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.bannerText {
height: 100%;
display: flex;
flex-direction: column; //主軸
justify-content: center; //次軸
align-items: flex-start;
h1 {
font-size: 50px;
border-bottom: 1px solid #000;
small {
display: block;
}
}
h2 {
font-size: 30px;
}
p {
font-size: 20px;
}
}

再來設定 .banner 位置,

1
2
3
4
5
6
7
8
9
10
11
12
13
.banner {
width: 100%;
height: 100vh;
//背景縮寫技巧 漸層:(角度,背景色,第一個漸層色空間,第二個漸層色空間) background-position / 漸層寬高;
background: linear-gradient(115deg, #f8d848 50%, transparent 50%) center center /
100% 100%, //多重背景寫法 url(背景連結) background-position /圖片寬高
url("https://images.unsplash.com/photo-1594046243098-0fceea9d451e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80")
right center / auto 100%;

.bannerText {
...;
}
}

完成!!

Codepen https://codepen.io/hnzxewqw/full/XWXBYEQ

參考資料