iT邦幫忙

css相關文章
共有 1069 則文章
鐵人賽 自我挑戰組 DAY 9

技術 Day 09 CSS <背景屬性>

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

鐵人賽 Modern Web DAY 4

技術 第4車廂-老師在說你有沒有在聽?淺談CSS選擇器及優先權

怎麼選取到元素改變網頁原有外觀呢?本篇主要整理CSS選取器分類及CSS優先權 切版學習途中,你是否有這樣的疑問? 要怎麼選才能選到我要的元素改變? 認識選...

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

技術 Day.10 「沒有 RWD 的網站 === 沒有未來」 —— RWD 響應式網頁設計

雖然標題有點聳動,但在這個行動裝置越來越多的現在,如果沒有手機版的網頁,SEO 排名會大受影響,也等同於宣告死刑了。 沒有手機版網頁,使用者體感差,字小按鈕...

鐵人賽 Modern Web DAY 4

技術 #3-打字特效炫起來!(CSS Animation)

昨天的第三個按鈕動態提案:文章傳送門 使用了CSS動態的動態的主菜——Animation。 其實有很多特效,只要能夠拆解他的原理,就可以使用Animation...

鐵人賽 Modern Web DAY 6

技術 [Day 06] Sass - Partials

這篇文章會講解如何將Sass分成多個檔案模組化管理,並於編譯時只會編譯到同一個css檔案內 首先,我們在專案的sass資料夾內先建立一個variables.sc...

鐵人賽 Modern Web DAY 6

技術 [Day 06 - CSS] Flexbox帶你飛,實現多樣化的網頁佈局

為什麼要學 Flexbox ?還沒學習 Flexbox 的我們,想要讓文字段落並排顯示時,只能調整元素的寬度讓它為了適應大小自動換行,這樣實在太不方便了!為了能...

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

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

中秋連假寫稿好像有點不太應景,所以今天不會講太多東西,最後把 Grid 單元的對齊稍微補一下,連假嘛,大家輕鬆一點。 不過武漢肺炎肆虐,大家還是小心為上。 單...

鐵人賽 Modern Web DAY 19

技術 Day19. 後端工程師需要具備的前端常識

後端寫樣式,要有後端的樣子。我們雖然沒辦法像前端那麼專業,但我們的自由度相對前端還要自由很多。首先我們先來介紹,後端工程師應該具備的一些工具 !importan...

鐵人賽 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:本次...