切版-製作一個互動圖文卡片
根據金魚切版練習切版
程式撰寫
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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+TC:100,500&display=swap" rel="stylesheet">
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
font-family: 'Noto Sans TC', sans-serif;
}
.wrap{
width: 100%;
display: flex;
}
.item{
width: 25%;
position: relative;
}
.item img{
width: 100%;
/*vertical-align使用是因為div插入圖片會產生些空隙，
* 所以以此去做些微調整，除了baseline其他皆可使用，詳細說明見備註*/
vertical-align: middle;
}
.item .txt{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 20px;
background-color: rgba(0,0,0,.6);
display: flex;
justify-content: center;
flex-direction: column;
opacity: 0;
transition: opacity .5s;
}
.item:hover .txt{
opacity: 1;
}
.item h2{
font-size: 28px;
color: #ff0;
font-weight: 500;
}
.item h2:after{
content: '';
display: block;
width: 0%;
height: 2px;
margin: 10px 0;
background-color: #ff0;
transition: width .5s .3s;
}
.item:hover h2:after{
width: 100%;
}
.item p{
font-size: 18px;
color: #fff;
font-weight: 100;
}
</style>
</head>
<body>
<div class="wrap">
<div class="item">
<img src="https://picsum.photos/500/400?random=10">
<div class="txt">
<h2>金魚都能懂的這個網頁畫面怎麼切 : 互動圖文卡片</h2>
<p>互動圖文卡片是我們在網頁中經常見到的另一種稀飯版，不會切你就遜掉囉。</p>
</div>
</div>
<div class="item">
<img src="https://picsum.photos/500/400?random=5">
<div class="txt">
<h2>稀飯版都不會切你怎麼轉職？來我的網頁暴力班，保證讓你邊痛邊學會</h2>
<p>把技能學好是需要一點點痛一點點爽一點點過癮跟一點點的暴力，不信你來報名試試看啊！</p>
</div>
</div>
<div class="item">
<img src="https://picsum.photos/500/400?random=20">
<div class="txt">
<h2>不知道你有沒有聽過網頁的都市傳說，絕對不要相信沒有驗證過的謠言</h2>
<p>網頁的都市傳說很多種，其中一種叫做兒子絕對定位老爸就要相對定位，這啥鬼？</p>
</div>
</div>
<div class="item">
<img src="https://picsum.photos/500/400?random=30">
<div class="txt">
<h2>買線上課程前停個幾秒想想，還是先把免費的金魚教學練一練吧</h2>
<p>買了不會看，那不如來看免錢的，縱使不看也不會有罪惡感，更不會心痛啊。</p>
</div>
</div>
</div>
</body>
</html>
|
備註
延伸問題
假如希望網頁中圖片置中，需要再製作一個父層div，範例中我取名”container”
1
2
3
4
5
6
| .container{
height: 100vh;
display: flex;
align-items: center;
}
|
vertical-align: img與div之間的空隙問題
參考文章:
1.CSS段落對齊方式，系統認識block元素與inline元素
2.CSS內聯元素垂直對齊的解決方案，vertical-align屬性詳解
3.圖片在容器中產生的底部間隔，CSS可以巧妙解決，前端原理很重要