HTML常用元件介紹
px, em, rem
名稱 | 說明 |
|---|---|
| px | 絕對大小, 12px等於12像素，不會受到外圍文字的影響，表示螢幕中每個「點」 (pixel) |
| em | 相對大小，每個子元素透過「倍數」乘以父元素的 px 值。 |
| rem | 相對大小，每個元素透過「倍數」乘以根元素的 px 值。 相對於root層級的文字大小(網頁中的html) |
| % | 相對單位，每個子元素透過「百分比」乘以父元素的 px 值。 |
測試:
px and em:
測試:18px
測試:1em
可以發現外層如果是18px內層的1em就等同18px
html大小屬性
名稱 | 定義 |
|---|---|
| medium | 預設值，等於16px(h4預設值) |
| xx-small | 0.6 * medium (h6預設值) |
| x-small | 0.75 * medium |
| small | 0.8 * medium (h5預設值, W3C定義0.89倍 |
| large | 1.1 , h3, W3C:1.2 |
| x-large | 1.5, h2 |
| xx=large | 2, h1 |
| smaller | 父層80% |
| large | 父層120% |
bootstrap
color
顏色是很多人都會想改的東西，當然他的宣告很簡單，但是如果每次都要自己來解未免有些麻煩，
更何況專案裡面或多或少都會引進一些其他的css，利用這些既有的設定是比較妥當的，
以下為bootstrap的顏色:
語法:
bg-xxx
範例:
.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-white
.bg-transparent
按鍵:
語法:
btn btn-xxx
primary
danger
dark
基本上顏色的名稱都是固定，所以按鍵上我只列了一些，如果要全部顏色請參考
card設計
自己設計
justify-content
通常卡片都是一個區塊一個區塊排列再一起，
所以您要先了解:
justify-content {
display: flex;
/* justify-content: space-around; 你可以設定一些間距之間的填充方式*/
justify-content: flex-start; /* 預設就是靠左邊對齊，基本上不要去動它 */
}
💥 這兩個屬性一定要一起搭配才會有效果
其中justify-content沒有考慮上下，所以您可能要考慮使用margin-top(如果是使用bootstrap，可以用mt來幫忙)
好啦，講了那麼多這邊的重點就是:
display: flex;
flex-wrap
當我們有能力把卡片分開之後，接下來我們要處理的是，如何在擁有多張卡片時，自動為卡片換行的問題，
可以使用:
.flex-wrap {
flex-wrap: wrap;
}
最後您只要設定卡片的大小即可，例如: w-30 (設定width:30%)
範例
<section class="flex-wrap mt5" style="display:flex;">
<div class="w-30">
{{ partial "description-with-image" . }}
</div>
</section>
如果您想要把物件放在中間，可以考慮用margin-left的方式，例如
<article style="margin-left:10%;">
<section class="flex-wrap mt5" style="display:flex;">
<div class="w-30">
{{ partial "description-with-image" . }}
</div>
</section>
</article>
附加裝飾
圓滑的邊緣(四個角)
#example {
border: 2px solid red; /* 邊框 */
border-radius: 20px; /* 圓角化 4 個角*/
border-top-left-radius: 50px 20px; /* 圓角化左上角 */
}
使用bootstrap
用法如下，大小可以用rem指定，架構安排很好，也提供按鈕
您還可以加上zoom-in
<section class="zoom-in card" style="width: 20rem;"> {{/* 20rem來控制卡片的寬度 */}}
<a href=""><img class="card-img-top" src="" alt=""></a>
<div class="card-body">
{{/* link dim 取消下畫線；style="color: inherit;可以讓鼠標hover的時候不會有顏色出來 */}}
<a class="link dim" href="" style="color: inherit;"><h3 class="card-title">Title</h3></a>
<p class="card-text">description</p>
<a href="#" class="btn btn-primary">read more</a>
{{/* text-muted 讓文字背景顏色是灰色(類似) small
float-end是bootstrap5的東西可以讓文字偏右
*/}}
<p class="card-text"><small class="text-muted float-end">2020/12/24</small></p>
</div>
</section>
你還可以加上zoom-in這樣就可以放大
.zoom-in {
transition: transform .2s;
}