技術 【Day06】內容長度 - 過長的內容

情境 我們用下面這個垂直下拉選單來說明這個情境： 上圖示我們常見的下拉選單形式，這些選單有一些選項，例如我們可以對這個帳號做一些設定、登出、查看自己的個人資料...

Taiming ‧ 2022-09-20 ‧團隊光明頂

技術 [Day26] Grid 網格項目

當瞭解完網格容器的屬性後，接下來要進入網格項目的部分，如果你還不了解什麼是網格容器及網格環境，可以回顧地ˊ十七天Grid 基本認識及第十八天Grid 網格容器...

placeholder name ‧ 2020-10-11

技術 #27 網頁載入字體、Icon Font 與 CSS font-family、font-weight

↓ 今日學習重點 ↓ 了解字體的基本知識 了解網頁如何載入字體 了解 CSS font-family、font-weight 了解如何使用...

Eva Chen ‧ 2023-10-13

技術 CSS讓Box移動了!【Transform篇】

Transform 變形 主要是讓目標元素變形，可以旋轉、歪斜、放大、縮小、移動元素有分成2D以及3D的部分，先來介紹 2D transform transf...

我是誰我在哪... ‧ 2022-09-25

技術 Containing block

文章將陸續整理並更新至個人部落格。 每個元素會生成零(display: none 時)至多個盒子(例如 display 為 list-item 時)，盒...

yachen ‧ 2019-09-27 ‧團隊好想工作室 v3.0

技術 [CSS] Flex/Grid Layout Modules, part 13

單元對齊跟留白的部分今天會繼續，定位的問題基本上不出亂子的話就如同昨天說明的。當然，如果再加上對齊跟留白，如果不小心也是會爆炸的。 對於留白問題，我一律設定為...

閃光洽 ‧ 2021-09-18

技術 Day 15 CSS <網頁布局-定位布局-1.定位模式>

為什麼需要定位元素? 定位元素可以實現 : 某個元素可以自由地在一個盒子內移動位置，並且壓住其他盒子 當滾動窗口的時候，盒子是固定屏幕某個位置的 所以 :...

a0265392_lin ‧ 2021-09-25

技術 重新認識 CSS - @import

今天來介紹 CSS 的 @import。 前言 「重新認識 CSS」這個系列名稱的由來就如其名，我想要重新認識它。雖然以前就有學過 CSS，但這次想從 CSS...

Titangene ‧ 2019-09-28 ‧團隊好想工作室 v3.0

技術 Day29 - Float

Float float：用來將區塊並排時可以使用，當設定浮動時，其父層會抓不到子層的高度 left：靠左浮動 right：靠右浮動 none：不浮動...

hokou ‧ 2020-10-14

技術 誰說低代碼平台上就不能寫自己的CSS

都已經千辛萬苦的學會CSS了，不用用這個技能不是就太浪費了嗎? 對，本篇文就是要來看看怎麼在低代碼平台上用CSS。 工具 好用的IDE (我用Visual S...

Mel ‧ 2020-10-12

技術 Day 04：多媒體資源匯入

一、前言 在製作網頁時，我們會需要一些文字或是圖片來裝飾我們的頁面，這些資料可能來自設計師或是後端工程師。但是我們在前端製作頁面時，沒有這些文字與圖片資源時該...

東尼先生 ‧ 2022-09-18

技術 day25_css3 border

使用 CSS3 的border-radius 屬性可為元素添加圓角邊框以及box-shadow 屬性可為元素添加陰影 範例： &lt;!DOCTYPE html...

小斑 ‧ 2017-12-28

技術 Something about front-end

技術 #19-我的台北直直落! 文字影片＋滾動視差

有一陣子滑網頁案例時，超常看到用SVG配上滾動視差（Parallax）今天終於要來試試看了！ 滾動視差就是讓元素動的幅度和滾動的幅度有落差，主要是偵測scrol...

Global Rachel ‧ 2021-10-05 ‧團隊寫 code 需要講幹話

技術 Secret 19: 折角效果

折角是一個很普遍的設計技巧 有許多有用的的CSS方法能實現這個效果，最早在2010年就有了，它的原理是用偽元素做二個三角形，一個跟背景色一樣，假裝是被折去的角，...

yowlonglee ‧ 2018-11-08

技術 [Day23] grid 縮寫

grid 縮寫 grid 提供了一個最簡單的縮寫，讓許多屬性可以寫在一起。 .container { grid: none | &lt;grid-tem...

placeholder name ‧ 2020-10-08

技術 Day.11 「利用漸變效果，讓網頁不再死板！」 —— CSS Transform & CSS Transition

現在我們會使用基本的偽類選擇器做效果了，但看到變化過程一閃而過、冷冰冰的，想增添更多漸變效果，讓動態效果可以更多變化、更平滑動感，就要使用我們的 transf...

Mao ‧ 2021-09-20 ‧團隊請付費解鎖團隊名稱

技術 Day 09 CSS <背景屬性>

CSS背景屬性 可以給頁面元素添加背景樣式背景屬性可設置背景顏色、背景圖片、背景平舖、背景圖片位置、圖像固定等等 1.背景顏色background-color屬...

a0265392_lin ‧ 2021-09-19

技術 【Day09】內容長度 - 固定的寬度

情境 在上一篇當中我們討論了固定高度在某些特定情境下有可能產生內溶溢出的問題。我相信我們的讀者一定也很能夠舉一反三，既然固定高度下，內容過長有可能會溢出，那換個...

Taiming ‧ 2022-09-23 ‧團隊光明頂

技術 Day 12 CSS <圓角邊框、盒子陰影>

圓角邊框 使用border-radius圓角邊框樣式，可以修改盒子邊框變成圓角 語法: border-radius:length; //四邊屬性設置同樣 bo...

a0265392_lin ‧ 2021-09-22

技術 Tailwind CSS 中的樣式渲染順序

如果你 tailwind 已經寫一段時間了，相信你有時候也會想把因為 tailwind 語法而變的很長的 class 變短吧，那這時候就要用到的是 tailwi...

技術 Day28 網頁前端-刻意練習(模仿遊戲#1)

Day28 六角 模仿遊戲#1 簡單小語 這個週末偷懶了一下，多花了點時間完成這個模仿遊戲，再次把最近學到的To Do List給放進來刻意練習一遍，Java...

TerryYu ‧ 2020-09-28

技術 [快速入門前端 8] CSS 引入方式和撰寫規則

什麼是 CSS？ CSS (Cascading Style Sheets）是一種用來為結構化檔案 (例如 HTML 和 CSS)加入樣式設定的語言，又被稱作階層...

徵才 [急徵]網頁設計師招募

☑️年終保障1個月☑️離捷運站超近☑️可活用日文能力日商178人力銀行急徵網頁設計師中，如果你喜歡聽人分享職涯規劃，想了解各行各業的生態，或是對人力資源行業有興...

技術 視覺格式化模型-塊格式化上下文(BFC)

文章將陸續整理並更新至個人部落格。 在先前的文章中提到不少次「BFC」，今天就來看看 BFC 是什麼，它又有什麼用處～ 塊格式化上下文 (BFC) 摘...

yachen ‧ 2019-10-03 ‧團隊好想工作室 v3.0

技術 大角頭 inline

文章將陸續整理並更新至個人部落格 版面是由各個元素所組成，所以切版前先來跟 html 元素中的兩大角頭拜一下碼頭吧！ html 中的元素在預設下大致可劃分...

yachen ‧ 2019-09-17 ‧團隊好想工作室 v3.0

技術 Happy CSSer - 05) Music Player

FB event:https://www.facebook.com/events/403776003304356/GitHub repo: https://gi...

Rplus ‧ 2017-12-24

技術 Happy CSSer - 03) Pokemon Go - Radar

FB event: https://www.facebook.com/events/1911828859048006/GitHub repo: https://...

Rplus ‧ 2017-12-22

技術 CSS visibility

倘若不斷向深處扎根，就能茁壯成長 - RM 前言 在 CSS 中，有幾種方式可以影響元素的顯示，其中我們可以透過 visibility 這個屬性去設定元素的...

RURU Tseng ‧ 2019-10-08 ‧團隊好想工作室 v3.0

技術 大 角頭 block

文章將陸續整理並更新至個人部落格 在上一篇 大角頭1號 - inline元素 中，已經向 inline 元素拜過碼頭，接下來就是 block 元素了！二...

yachen ‧ 2019-09-18 ‧團隊好想工作室 v3.0