橫式版面
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
| <div class="wrap">
<div class="container">
<!-- item01 -->
<div class="item">
<div class="pic">
<img
src="https://picsum.photos/400/300?random=10"
alt=""
/>
</div>
<div class="text">
<h2>金魚系列切版 V - 超通用橫式版面</h2>
<p>
很多商品網站都看得到，跟著 Amos
切一輪，需要用到就直接拿來套就可以!
</p>
<a href="#" class="btn">more</a>
</div>
</div>
<!-- item02 -->
<div class="item">
<div class="pic">
<img
src="https://picsum.photos/400/300?random=10"
alt=""
/>
</div>
<div class="text">
<h2>金魚系列切版 V - 超通用橫式版面</h2>
<p>
很多商品網站都看得到，跟著 Amos
切一輪，需要用到就直接拿來套就可以!
</p>
<a href="#" class="btn">more</a>
</div>
</div>
</div>
</div>
|
CSS
.item 的部分如下：
要左右成列，寬度先預設為 50%，因左右要間格 1%，又有加邊框限 1px，所以設定成 47%。另外把圖片與文字的比例設定為 6:4。
object-fit: cover:使圖片跟容器大小一致，可惜不支援 iE(沒有關係)。
按鈕部分使用到 align-self: flex-end，使其靠右對齊， margin-top: auto 自動往上推擠到最底部，以上都是 flex 特性的相依語法。
調整 .pic 及 .text width 百分比就可以改變圖文大小
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
| //css reset
* {
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
}
.wrap {
height: 100vh;
display: flex;
align-items: center;
}
.container {
width: 1200px;
display: flex;
// 元素換行
flex-wrap: wrap;
margin: 0 auto;
}
.item {
width: 47%;
margin: 1%;
display: flex;
border: 1px solid #0a232b;
box-shadow: 0 0 5px 2px rgba($color: #061a20, $alpha: 0.6);
.pic {
width: 60%;
img {
width: 100%;
height: 100%;
// 去除圖片空白部分
vertical-align: middle;
//使圖片跟容器大小一致，不支援 iE
object-fit: cover;
}
}
.text {
width: 40%;
padding: 20px;
background-color: #fff;
display: flex;
// 改變元素排列方向
flex-direction: column;
h2 {
font-size: 28px;
margin-bottom: 20px;
color: #0987ad;
}
p {
color: #444;
font-size: 14px;
line-height: 1.5;
}
.btn {
line-height: 1.5em;
border: 1px solid #0987ad;
padding: 0 10px;
// 靠右對齊
align-self: flex-end;
text-decoration: none;
border-radius: 100px;
color: #0987ad;
// 自動推到最底部
margin-top: auto;
&:hover {
background-color: #0987ad;
color: #fff;
transition: all 0.3s;
}
}
}
}
|
參考：
https://hsuchihting.github.io/css/20200715/3606873816/
https://www.youtube.com/watch?v=-mmzaE6eLzY&t=1294s
