相簿(方塊酥)版面
相簿式的版面，加上之前的圖文互動效果。
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
| <div class="wrap">
<!-- left -->
<div class="item">
<img src="https://picsum.photos/400/400?random=10" />
<div class="text">
<h2>金魚系列 IX - 方塊酥排版</h2>
<p>
相簿式的排版方式
</p>
<span>
體制春天電影分公司刪除一個氣氛太陽請點擊落實計算身份身邊顯得，早就平靜辦公室問題鍵盤點評收集，更多那位本次同樣轉載享受判斷夢幻開了負責年齡醫藥人間，覺得望着宣佈門口故意羅東引起順利能夠日期感情，人員位於勝利病人樹林即可裝置性感，現實加入時間中壢，緊張熱線。
</span>
</div>
</div>
<!-- right -->
<div class="item">
<img src="https://picsum.photos/400/400?random=20" />
<div class="text">
<h2>學習重點</h2>
<p>
float、～ 選取器教學、position 定位教學
</p>
</div>
</div>
<div class="item">
<img src="https://picsum.photos/400/400?random=30" />
<div class="text">
<h2>CSS3</h2>
<p>
課程後面還有很多排版。
</p>
</div>
</div>
<div class="item">
<img src="https://picsum.photos/400/400?random=40" />
<div class="text">
<h2>感謝 Amos 老師</h2>
<p>慢慢練習也慢慢熟練。</p>
</div>
</div>
<div class="item">
<img src="https://picsum.photos/400/400?random=50" />
<div class="text">
<h2>專案上可用</h2>
<p>
科技有限公司大師仔細可以用，一條機構之外亞洲，不夠指出有時情形試試傢伙實行才能來說引進就是不行整體舉報，你的完善才是裝飾十二已被隨着以為群發成就，請您特殊供應提高相對正確是什麼看法一些之下，試題連續喜歡至今主管，黃金股份有限公司辦公可以士兵全體，鮮花這次。
</p>
</div>
</div>
</div>
|
CSS
overflow: hidden：父層自動抓到所有子層的高度。
處理圖片這裡用 float，可以自動把右邊區塊的圖片變為橫向排列及斷行。如果用 flex 的話，要另外寫方法來處理，麻煩很多。
接著透過 ~ 選取器，選取第二個元素跟其之後全部的元素，一起調整寬度。完成右側的其他區塊。
圖文互動按照之前的範例使用 position 來處理定位，flex 處理元素排列。
ps.
~ 選取器：選取到對象 A 同層後方的所有 B(只要是在物件A後面的全部物件B)。
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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
| // css reset
* {
margin: 0;
padding: 0;
list-style: none;
}
body {
// 方便計算元素
box-sizing: border-box;
font-family: 'Noto Sans TC', sans-serif;
}
.wrap {
width: 1200px;
margin: 5% auto;
// 父層自動抓到所有子層的高度
overflow: hidden;
}
.item {
// 自動把右邊區塊的圖片變為橫向排列，並且斷行
float: left;
position: relative;
cursor: pointer;
// 點選圖片，顯示出文字
.text {
// 設定文字在圖片的正中央
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
color: #ffffff;
background-color: rgba($color: #000000, $alpha: 0.6);
display: flex;
flex-direction: column;
// 垂直置中對齊
justify-content: center;
align-items: center;
// 一開始不顯示
opacity: 0;
transition: all 0.3s;
// padding: 15px;
&:hover {
opacity: 1;
}
h2,
p,
span {
padding: 10px;
}
h2 {
font-size: 32px;
color: #ffffff;
}
p {
font-weight: 100;
line-height: 1.5;
}
span {
color: #fff;
line-height: 1.5;
font-weight: 100;
}
}
img {
width: 100%;
vertical-align: middle;
}
//選到第一個 item
&:first-child {
width: 50%;
}
//選到第二個以後的所有 item， ~ 選取到『對象 A 同層後方的所有 B』(只要是在物件A後面的全部物件B)
&:first-child ~ .item {
width: 25%;
}
}
|
參考：
https://www.youtube.com/watch?v=Xhhzzc9YZW4
https://hsuchihting.github.io/css/20200718/1208518551/
