iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

30天搞定CSS及切版 系列

準備轉職前端
在30天內奠定CSS基礎
認識CSS重要屬性、排版
並實現一些小作品~

參賽天數 15 天 | 共 16 篇文章 | 1 人訂閱 訂閱系列文 RSS系列文
DAY 11

CSS Flex

前言 今天要來講的是Flex 彈性盒子~,優勢就是快速的水平垂直排版、置中,又可以適應不同的螢幕尺寸,讚讚。 Flex Container 把元素設定為flex...

2021-09-21 ‧ 由 Xuan 分享
DAY 12

CSS Box-Shadow

前言 寫CSS還蠻常會用到陰影,使元素更具有立體感,今天就來認識一下陰影有什麼屬性吧。 首先我們要先來設置陰影的方向,第一個參數負責控制水平方向,第二個參數...

2021-09-22 ‧ 由 Xuan 分享
DAY 13

CSS垂直置中

absolute + top/left + tranform 利用top/left將子元素的左上角對齊中間,再利用transform平移元素自身50%的寬高達到...

2021-09-23 ‧ 由 Xuan 分享
DAY 14

CSS display:grid

Gird是一種二維的布局方式,相較flex來說grid還多控制了列~ example : <div class="wrapper"&g...

2021-09-24 ‧ 由 Xuan 分享
DAY 15

CSS display:Grid

grid-template-areas 使用 grid-template-areas 定義每個區塊,grid-item再使用grid-area決定元素的位置。...

2021-09-25 ‧ 由 Xuan 分享
DAY 15

SCSS

使用SCSS取代CSS更易於閱讀,巢狀的寫法、提供的功能像變數、mixin、function、import等等,也更容易擴展與複用。此外,還有一個跟SCSS很像...

2021-09-27 ‧ 由 Xuan 分享