切版-超通用模式版面
根據金魚切版練習切版
程式撰寫
參考Amos老師金魚系列切版:
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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超通用模式版面 -
金魚都能懂得這個畫面怎麼切</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
.wrap{
/*100vh=百分之百的視窗高度*/
height: 100vh;
display: flex;
align-items: center;
background: linear-gradient(-30deg,#fdaecb,#e7597f,#fe8556);
}
.container{
width: 1200px;
/*margin:auto =您可以將margin屬性設置為auto使元素在
* 其容器中水平居中。然後，元素將佔據指定的寬度，
* 剩餘空間將在左右邊界之間平均分配*/
margin: auto;
display: flex;
flex-wrap: wrap;
}
.item{
width: 368px;
margin: 0 15px;
display: flex;
background-color: #fff;
border: 1px solid #888;
/*加陰影
* box-shadow(陰影可以使用與背景色相近的顏色比較不突兀)
* &rgba調整透明度*/
box-shadow: 0 10px 30px rgba(160,0,0,.5);
font-family: 'Noto Sans TC', sans-serif;
}
.item .pic{
width: 50%;
}
.item .pic img{
width: 100%;
height: 100%;
/*CSSobject-fit屬性用於指定應如何調整<img>或<video>的大小以適合其容器。*/
object-fit: cover;
}
.item .txt{
width: 50%;
padding: 20px;
/*註1*/
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.item .txt h2{
font-weight: 500;
margin-bottom: .4em;
}
.item .txt p{
font-weight: 300;
}
.item .txt .btn{
line-height: 1.5em;
border:1px solid #ccc;
padding: 0 1em;
align-self: flex-end;
text-decoration: none;
border-radius: 200px;
margin-top: auto;
color: #aaa;
}
.item .txt .btn:hover{
background-color: #ccc;
color: #fff;
}
</style>
</head>
<body>
<div class="wrap">
<div class="container">
<div class="item">
<div class="pic">
<img src="https://picsum.photos/400/400?random=10">
</div>
<div class="txt">
<h2>金魚都能懂得網頁入門</h2>
<p>年度最佳網頁入門教學影片，輕鬆學會網頁製作，原始碼原來如此有趣啊。</p>
<a href="#" class="btn">more
</a>
</div>
</div>
<div class="item">
<div class="pic">
<img src="https://picsum.photos/400/400?random=11">
</div>
<div class="txt">
<h2>金魚都能懂的網頁切版</h2>
<p>沒想到切版竟然如此簡單，以往的困難迎刃而解，技巧原來這般單純。</p>
<a href="#" class="btn">more
</a>
</div>
</div>
<div class="item">
<div class="pic">
<img src="https://picsum.photos/400/400?random=12">
</div>
<div class="txt">
<h2>金魚都能懂的CSS選取器</h2>
<p>CSS選取器原來是這道理啊，其實之前都誤解她了，對不起 9523 !</p>
<a href="#" class="btn">more
</a>
</div>
</div>
</div>
</div>
</body>
</html>
|
程式碼內容詳解
關於CSS的一個重要概念就是盒子模型(box model)，它控制著頁面各元素的寬與高，比如當我們設定了一個元素的寬高時，所設定的數值還要再加上padding和border，最後才會是這個元素的實際尺寸。
所以若要準確控制版面不破版，原本所設定的尺寸還需要再扣掉border/padding，但是這樣每次設尺寸都要做計算，顯得太麻煩了，這時可以使用box-sizing此屬性，方便我們在設定width、height上更直觀。
box-sizing的設定值
content-box：預設值，實際寬高＝所設定的數值＋border＋padding
border-box：實際寬高＝所設定的數值(已包含border和padding)
參考:讓控制版面更容易
備註
按住alt鍵不放，點選要輸入的位置，可一次輸入多個一樣的內容。
a.btn = <a href="#" class="btn"></a>按鈕類可以在一個被使用<a>，<button>或 <input>元件。
http://www.flycan.com/article/css/reset-css-562.html :point_down:
但是 *{ } 選取器會遍歷整個網頁所有的標籤，所以在執行速度上多多少少是會比較慢來的，在這個網頁速度會影響 SEO 的時代，網頁的速度是很重要的，因此，當我們教到 Reset CSS 之後 就會鼓勵同學使用 reset.css 或是 normalize.css 比較好，之後就不會再使用 *{ } 選取器了。