這次來學習用超通用橫式版面，許多公版網站都會看到這樣的切版，只是看有幾個而已。
學習重點
HTML 架構
架構相當簡單，
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <div class="wrap">
<div class="container">
<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 樣式
整體範圍使其高度與螢幕高度相符，並且讓裡面的元素橫向且在螢幕垂直於中間。
1
2
3
4
5
| .wrap {
height: 100vh;
display: flex;
align-items: center;
}
|
在元素的範圍寬度給予寬度為 1200px，並且橫向排列，這次要做上下排列，所以使用到 flex-wrap 斷行，且置中對齊。
1
2
3
4
5
6
| .container {
width: 1200px;
display: flex;
flex-wrap: wrap;
margin: 0 auto;
}
|
.item 內容較重要的部分如下：
- 要左右成列，寬度預設為 50%，但因為左右要間格 1%，又有加邊框限 1px，所以設定成 47%。
- 把圖片與文字這兩個所佔的比例設定為 6:4。
- 這次學到一個新的屬性是
object-fit: cover ，使圖片跟容器大小一致，可惜不支援 iE(沒有關係)。
- 按鈕部分使用到
align-self: flex-end，讓自己靠右對齊， margin-top: auto 自動往上推擠到最底部，以上都是 flex 特性的相依語法。
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
| .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 {
vertical-align: middle;
object-fit: cover; //使圖片跟容器大小一致，不支援 iE
}
}
.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;
}
}
}
}
|
最後就完成了這個常見的通用橫向版型囉!!
Demo https://codepen.io/hnzxewqw/full/KKVxbLa