iT邦幫忙

css相關文章
共有 1091 則文章
鐵人賽 Modern Web DAY 11
CSS 讓你的網頁動起來 系列 第 11

技術 CSS微動畫 - Loading來了!轉啊轉啊~

Q: 從哪一種Loading開始呢? A: 轉圈圈的Loading應該是基本? 之後將會進入一系列的Loading效果,本篇只會介紹一款,並對其做比較詳細的...

鐵人賽 自我挑戰組 DAY 3

技術 第 3 集:CSS 魔力

此篇內容不會有 CSS 語法教學,而是著重在使用 Bootstrap 5 時需要具備的 CSS know-how。 CSS Reset 問題:不同瀏覽器擁有各...

鐵人賽 Modern Web DAY 5

技術 [Day 05] Sass - Variables

Variables 在Sass中,開發者可以使用變數,例如可以將常用的顏色、寬度設定成變數,這樣未來如果顏色或寬度要改變時,只需要改掉變數的值,而不用像一般CS...

鐵人賽 自我挑戰組 DAY 8

技術 Day 08 CSS <文本屬性>

CSS Text 屬性可定義文本的外觀 例如 : 文本的顏色、對齊文本、裝飾文本、文本縮進、行間距 1.文本顏色 color用於定義文本的顏色 div{ co...

鐵人賽 Modern Web DAY 9
入門前端技能之旅 系列 第 9

技術 Day.9 「我實際不存在 DOM 裡~」 —— CSS 偽類選擇器(Pseudo classes) 與 偽元素(Pseudo element)

為什麼會有個「偽」字呢? 偽(Pseudo)這個意思有虛幻虛無的意思,類選擇器是用來處理 DOM 操作不了選擇器,偽元素則是原本並沒有在 HTML DOM 中...

鐵人賽 Modern Web DAY 3

技術 #2 - Button文字換起來! (CSS: 移動位置)

Day 1 介紹了用CSS 偽元素的方式放大縮小變寬去做連結特效。傳送門 今天也選了幾個button的特效,使用位移的方式,簡單使用CSS特性就可以。 先來看看...

鐵人賽 Modern Web DAY 5

技術 [Day 05 - CSS] 玩轉CSS樣式,進入網頁美麗新世界

在上一篇學到了 CSS 的基本語法、使用選擇器以及檔案的套用方法。接著就讓我們來學習如何運用樣式屬性!首先來簡單了解一下 CSS 是如何去進行網頁的排版和調整元...

鐵人賽 Modern Web DAY 13
CSS Flex/Grid Layout Modules 系列 第 13

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

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

鐵人賽 Modern Web DAY 10
CSS 讓你的網頁動起來 系列 第 10

技術 CSS微動畫 - 了解Animation並做出更多效果吧!

Q: 是時候表演真正的技術了? A: 要動起來是少不了animation屬性的! 本篇開始將使用animation屬性做微動畫,別於transition是在...

鐵人賽 自我挑戰組 DAY 7

技術 Day 07 CSS <字體屬性>

CSS Fonts(字體) 屬性 用於定義字體系列、大小、粗細 和文字樣式(ex:斜體) 1.字體系列 font-family 屬性定義文本的字體系列 <...

鐵人賽 Modern Web DAY 8
入門前端技能之旅 系列 第 8

技術 Day.8 「怎麼就這樣脫離文檔流了!」 —— CSS 定位屬性 position & 浮動元素 float

我們已經了解到基本的切版概念了,但前面所學的都是固定在網頁上,也就是之前所說正常的文檔流!而這一篇就要來學會更進階一點了佈局方法了,讓元素布局上更加奔放自由,...

鐵人賽 Modern Web DAY 4

技術 [Day 04] Sass - 簡介

這篇文章簡單介紹一下Sass~ Sass 是什麼 ? Sass是一種CSS預處理器語言(CSS preprocessor),可以讓開發者使用像是變數、函式、嵌套...

鐵人賽 Modern Web DAY 2

技術 #1-連結Hover動起來!(CSS 偽元素)

網站必備!連結動態 連結的Hover動態算是網頁動態最基本款, 一個好的動態絕對可以幫網頁 點擊率(CTR) 加分。 (話說當時菜鳥的我根本不知道什麼是hove...

鐵人賽 Modern Web DAY 4

技術 [Day 04 - CSS] 網頁長這樣能看嗎,CSS魔術Show

CSS (Cascading Style Sheets,階層樣式表),用來描述 HTML 外觀的樣式表,含有各式各樣的樣式屬性,能夠讓你在元素上面套用樣式美化網...

鐵人賽 Modern Web DAY 12
CSS Flex/Grid Layout Modules 系列 第 12

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

今天繼續來講 Grid 單元,昨天提到了對齊基本用法,今天繼續來講對齊與留白。不過一開始,還是先解釋清楚關於格線與單元之間的事情。 總覺得 15 天就會結束了說...

鐵人賽 Modern Web DAY 5

技術 Day 5【JavaScript】可以看到,將近是20公分的深度

【前言】 我的習慣是先在 Youtube 看完落落長的影片,然後才去 Coursera 看看有什麼學院派會特別注重的地方,還有與 Youtube 教學不同的地...

鐵人賽 Modern Web DAY 3

技術 [Day 03] 環境建置(二) - gulp、compiling SASS

今天要來安裝這次會用到的所有工具套件,並能順利將SASS編譯成CSS~ VS Code 套件 我們這次需要使用到Live Server,可以到VS Code的延...

鐵人賽 Modern Web DAY 7
入門前端技能之旅 系列 第 7

技術 Day.7 「CSS 網頁切版必學,用過都說讚!」 —— CSS 彈性盒模型 Flexbox

要來介紹大家最愛用的 Flexbox 了,以往兼容性還不太好的時候,大多都是使用表格(table)屬性來進行排版,也容易出問題,現在科技進步迅速,瀏覽器也持續...

鐵人賽 自我挑戰組 DAY 6

技術 Day 06 CSS <複合選擇器>

CSS的選擇器分為基礎選擇器以及複合選擇器 本日將將繼續說明複合選擇器 複合選擇器可以更準確更高效的選擇元素(標籤) 是由兩個或多個基礎選擇器透過不同方式組合...

鐵人賽 Modern Web DAY 11
CSS Flex/Grid Layout Modules 系列 第 11

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

現在終於可以開始講 Grid 單元的事情了,雖然可以講的事情可能不多,絕大部分會圍繞在造成容器影響的地方,當然基本的東西還是會先帶一下。 只是說講完之後到底能不...

鐵人賽 Modern Web DAY 1

技術 30天學會HTML+CSS,製作精美網站

隨著科技不斷進步,智慧型手機的普及,網際網路已經進入生活的食衣住行等各方面的需求,隨時隨地只要透過網頁就可以向使用者分享資訊、互動、溝通、購物....,使用者只...

鐵人賽 Modern Web DAY 8
CSS 讓你的網頁動起來 系列 第 8

技術 CSS微動畫 - 彈出來的選單 Part.1

Q: 這個看起來像貓爪的東西是什麼? A: 喵? 本篇開始將實作選單的微動畫,比較特別的要來說說transform的順序帶給動態效果的影響! 謎音1:本次...

鐵人賽 Modern Web DAY 4

技術 DAY4-比CS更好玩的CSS

前言: 昨天的進度中,我們大致完成了一個由HTML建構起來的網站,只是看起來真的是太陽春了。今天我們就透過CSS來加上一些會動又好看的特效吧! 我CSS有龍炮...

鐵人賽 Modern Web DAY 4

技術 Day 4【HTML + CSS】於是他開始像靈犬萊西一樣到處蒐集證據

【前言】 不知道大家有沒有看過 Youtube 上面一些 5~12 小時的 Coding 教學影片。這是一件頗好笑的事情,以前我都想到底誰會把這種影片看完來學...

鐵人賽 Modern Web DAY 3

技術 DAY3-HTML一定要配CSS

前言: 就像吃藥一定要配溫開水一樣,html一定要配CSS! (貼心提醒:有些藥如果配溫開水其實是會造成反效果的!可以點進下方報導看一下~ https://t...

鐵人賽 自我挑戰組 DAY 5

技術 Day 05 CSS <基礎選擇器>

CSS的選擇器分為基礎選擇器以及複合選擇器 本日將先說明基礎選擇器 DAY6將繼續說明複合選擇器 CSS中的基礎選擇器 單個選擇器組成,包含標籤選擇器、類選擇器...

鐵人賽 Modern Web DAY 10
CSS Flex/Grid Layout Modules 系列 第 10

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

來到了 30 天的三分之一,然後我才剛講完網格容器而已,但是,剩下的東西也不多了,好像要寫滿 30 篇難度有點高。 只好多寫一點廢話了。 間隔、間隔、間隔...

鐵人賽 Modern Web DAY 6
入門前端技能之旅 系列 第 6

技術 Day.6 「只要我想,我也能把 div 變 table!」 —— CSS display 屬性

如同前面章節所說,一開始的標籤元素,很單調只有一行並沒有各式各樣的元素,是瀏覽器內建的樣式表賦予它該展示的樣子。 圖中,瀏覽器為 <table>...

鐵人賽 Modern Web DAY 7
CSS 讓你的網頁動起來 系列 第 7

技術 CSS微動畫 - 不使用圖片製作「加到最愛」開關按鈕

Q: 請問icon要怎麼出圖好呢? A: 一定要用圖片嗎? 本篇要實作的是「加到最愛」的按鈕,結合之前所述的偽元素,以不使用圖片的方式做出圖案,讓按鈕可以有...

鐵人賽 Modern Web DAY 5
入門前端技能之旅 系列 第 5

技術 Day.5 「我的樣式失靈啦!你有頭緒嗎?」 —— CSS 選擇器 與 權重

了解盒模型後,就要為標籤套上各種花樣了,上一篇介紹了簡單的套用方法,但這個套用方法其實不太好用! 使用標籤元素套用就像是畫草圖上底色,雖然有色彩但不細緻,這時...