iT邦幫忙

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

技術 CSS微動畫 - 先了解將使用的屬性是很重要的!transform & transition

Q: 不會設計怎麼辦?A: 小編也不會設計,但可以把別人的設計變成網頁! 本篇開始將使用transform跟transition屬性做微動畫,透過操控這兩個...

鐵人賽 自我挑戰組 DAY 10

技術 Day 10 CSS <元素顯示模式>

1. 什麼是元素顯示模式 元素顯示模式就是元素(標籤)以什麼方式進行顯示 作用 : 網頁的標籤非常多,了解他們的特點可以更方便的布局網頁 ex : &lt;di...

鐵人賽 自我挑戰組 DAY 9

技術 Day 09 CSS <背景屬性>

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

鐵人賽 Modern Web DAY 10

技術 #10 CSS3 Flexbox: nav style setting

What is nav? nav = navagator “The &lt;nav&gt; HTML element represents a sectio...

鐵人賽 Modern Web DAY 6

技術 [13th-鐵人賽]Day 6:Modern CSS 超詳細新手攻略 - Selector (二)

介紹完基礎選擇器,再來介紹一下複合選擇器~ a b 選擇a元素裡的子元素 ab ab為同一元素但不同標籤 a, b 同時選擇a及b元素 a +...

鐵人賽 Modern Web DAY 5

技術 [13th-鐵人賽]Day 5:Modern CSS 超詳細新手攻略 - Selector (一)

今天再來深度研究一下CSS的語法!我要介紹的是CSS中的選擇器,選擇器是最重要的語法之一,決定了要改變樣式的到底是哪些元素,先從基本選擇器開始! 基本選擇器...

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

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

你如果會用 Excel,那 Grid 就應該不陌生。 不過老實講,我也不太會用 Excel。 Grid Layout Module 其實他已經 CR 好一...

鐵人賽 自我挑戰組 DAY 8

技術 Day 08 CSS <文本屬性>

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

鐵人賽 Modern Web DAY 9

技術 #9 CSS3 Flexbox: main style setting

What is Flexbox? Flexbox = Flexible Box &quot;CSS3 Flexbox was designed as a o...

鐵人賽 Modern Web DAY 8

技術 #8 Web Layout: RWD

What is RWD? “Responsive web design (RWD) is a design and technical approach tha...

鐵人賽 Modern Web DAY 5

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

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

鐵人賽 Modern Web DAY 4

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

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

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

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

數學不會背叛你,數學不會就是不會。 我現在寫三角函數都是去 Google 的,不要問。注意!本篇可能會出現大量的加減乘除,如有出現頭暈目眩、噁心想吐、手腳冰...

鐵人賽 Modern Web DAY 7

技術 #7 Web Layout: CSS Fundamentals

Final Design CSS Web Layout Tips 1. Horizontally center the text: try text-ali...

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

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

Media Query 已經快被講爛了。 我不確定現在是否還流行 RWD 這件事情,如果以 Core Web Vitals 來看,你可能會被建議減少未使用的...

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

技術 CSS微動畫 - 為了不依賴套件,所以要自己來!

Q: 很多免費的現成的套件可以直接套用就有效果,拿來用吧?A: 真的有比較好用嗎? 網頁的組成離不開html的架構及css的樣式,除了放上會動的圖片之外,...

鐵人賽 自我挑戰組 DAY 7

技術 Day 07 CSS <字體屬性>

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

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

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

結果我真的兩篇就快講完了(驚恐)。 既然是說要講切版的話,還是多少交代一些比較基礎的東西好了。 Flex 的軸流向與留白 之前我們提及了多數 CSS 框架的...

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

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

本篇會有不少冷門範例。 其實我覺得很奇妙,就是我老是踩到一些超冷門連 Google 都找不太到的雷。 Flexbox 能與不能 首先還是得叮嚀一下,如果使...

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

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

萬事起頭難,只要不起頭,就一點都不難了。 在這個充滿著 CSS Frameworks 的年代,人人有功練,人人有版切,身為老屁股的我只能在沙灘上曬乾,而且還...

鐵人賽 Modern Web DAY 6

技術 33歲轉職者的前端筆記-DAY 6 CSS button 套件

最近的工作專案很常用到 button 按鈕 因為小公司的關係沒有設計 所以通常要自已想 button 按鈕樣式 但沒有設計腦真的很難想要怎麼呈現顏色跟效果 今天...

鐵人賽 自我挑戰組 DAY 6

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

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

鐵人賽 Modern Web DAY 6

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

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

鐵人賽 Modern Web DAY 5

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

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

鐵人賽 Modern Web DAY 4

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

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

鐵人賽 Modern Web DAY 2

技術 [13th-鐵人賽]Day 2:Modern CSS 超詳細新手攻略 - 入門

WHO? WHAT? CSS到底是誰?CSS的全名為Cascading Style Sheets,其中的style是樣式,因此CSS就是用來描述網頁樣式的工具。...

鐵人賽 Modern Web DAY 6

技術 #6 CSS Table x Stock Price

An ordinary CSS table looks like Ways of making CSS table beautiful 1. Change...

鐵人賽 Modern Web DAY 1

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

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

鐵人賽 自我挑戰組 DAY 5

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

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

鐵人賽 Modern Web DAY 5

技術 #5 Types of CSS Selector

After the previous 2 articles of CSS basic introducttion, let's talk about 5 Typ...