元素交錯漂浮
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
| <div class="wrap">
<!-- item01 -->
<div class="item">
<div class="pic">
<img src="https://picsum.photos/600/350?random=10" alt="" />
</div>
<div class="text">
<h2>金魚切版系列 IV - 交錯漂浮版</h2>
<p>
「產品介紹」或是「關於我」常用的交錯漂浮版，
會使用到絕對定位還是相對定位，一定要使用 Flex，此篇用了
flex-shrink 屬性。
</p>
</div>
</div>
<!-- item02 -->
<div class="item">
<div class="text">
<h2>新手一定要寫註解</h2>
<p>
之後維護或寫到一半都會忘記為什麼會這樣...所以加註解非常重要，不要只靠記憶力！
</p>
</div>
<div class="pic">
<img src="https://picsum.photos/600/350?random=20" alt="" />
</div>
</div>
<!-- item03 -->
<div class="item">
<div class="pic">
<img src="https://picsum.photos/600/350?random=30" alt="" />
</div>
<div class="text">
<h2>有點難又不會太難</h2>
<p>
Box-sizing 是甚麼、 CSS relative 相對定位、
網頁的色彩原理、 flex-direction 的原理、
「>」子代選取器、:nth-child 選取器教學
</p>
</div>
</div>
<!-- item04 -->
<div class="item">
<div class="text">
<h2>:nth-child 選取器</h2>
<p>
CSS3 新增的選取器!! 架構清楚用起來就很輕鬆!
</p>
</div>
<div class="pic">
<img src="https://picsum.photos/600/350?random=40" alt="" />
</div>
</div>
</div>
|
CSS
此次有使用到 flex-shrink 屬性，因 flex 會自動運算空間，為了避免此情況，所以加上 flex-shrink，使其值為 0，就不會自動收縮。
接下來使用 :first-child 來做出交錯效果。
最後用 :nth-child(n) 來產生子ㄨ元素的樣式。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
| .item {
display: flex;
align-items: center;
margin-bottom: 70px;
//flex 收縮值為 0
.pic {
flex-shrink: 0;
width: 55%;
}
.text {
flex-shrink: 0;
width: 55%;
z-index: 2;
}
img {
width: 100%;
// 去除圖片下方空白
vertical-align: middle;
}
// 文字可以壓在圖片上
> :first-child {
margin-right: -100px;
}
// 子代選取器 :first-child、:nth-child(n) odd even 選取器
&:nth-child(1) .text {
background-color: rgba($color: #e0e0e0, $alpha: 0.8);
}
&:nth-child(2) .text {
background-color: rgba($color: #e0e0e0, $alpha: 0.8);
}
&:nth-child(3) .text {
background-color: rgba($color: #e0e0e0, $alpha: 0.8);
}
&:nth-child(4) .text {
background-color: rgba($color: #e0e0e0, $alpha: 0.8);
}
}
|
參考：
https://www.youtube.com/watch?v=aN7zFs_AT8s
https://hsuchihting.github.io/css/20200714/777238571/
