iT邦幫忙

css相關文章
共有 1771 則文章
鐵人賽 Modern Web DAY 4
HTML 與 CSS 學習筆記 系列 第 4

技術 Day04 - HTML (2) - head、body

<head> 延續昨天的說明,<head> </head> 主要說明這個網頁的資訊,如編碼、標題,只會有一個 <h...

鐵人賽 Modern Web DAY 4
喪屍黑白切 系列 第 4

技術 Day 04 | 順序有那麼重要嗎?Part 2

今天要來舉例子了,廢話不多說直接開始。要用到的 HTML 只有這行 <a href="#">Zombie@Dump</a&...

鐵人賽 自我挑戰組 DAY 19

技術 Day19 網頁前端-刻意練習(Flex時光屋#1)

Day19 六角 Flex時光屋#1 簡單小語 看到當時時光屋練習的作品,想說挑兩個來整併,當作練習的機會,這次的結構不一樣的是,header及footer使...

鐵人賽 Modern Web DAY 4

技術 【Day 4】網頁設計入門:基礎 HTML、CSS 線上課程推薦

昨天分享的教學是以文章資源為主,好處是一目了然,所有大綱和分類都可以快速尋找。但文字看久難免會想睡呀! 學習時搭配一些互動式影片教學,可以幫助吸收和複習,一步一...

鐵人賽 Modern Web DAY 6
前端開發 30 個問題 系列 第 6

技術 z-index and stacking context

前言2020 秋天,我將用 30 天的時間,來嘗試回答和網路前端開發相關的 30 個問題。30 天無法一網打盡浩瀚的前端知識,有些問題可能對有些讀者來說相對簡...

鐵人賽 Modern Web DAY 3

技術 從 W3Schools 學習基本頁面佈局 - 版面【30天切版臨摹 D3】

W3Schools 首頁有用到他們自家出產的 w3.css,這是一套類似 Bootstrap 的 CSS Framework,把很多常用的css屬性包成許多cl...

鐵人賽 Modern Web DAY 3

達標好文 技術 Font-size - 金魚都能懂的CSS必學屬性

Font-size,這麼簡單的一個CSS屬性,有必要特別開一篇文章來談嗎?這根本就是騙稿費騙篇數的啊!說實在話,font-size這屬性還真的是不困難,但卻也是...

鐵人賽 Modern Web DAY 3
喪屍黑白切 系列 第 3

技術 Day 03 | 順序有那麼重要嗎?Part 1 - :link, :visited, :focus, :hover, :active

今天要介紹的這幾種偽類 pseudo-class,算是 CSS 中使用率最頻繁的幾個,我自己很常忘記這幾個的優先權順序,所以特地寫一篇筆記下來。 什麼是偽類?...

鐵人賽 Modern Web DAY 3
HTML 與 CSS 學習筆記 系列 第 3

技術 Day03 - HTML (1) - 標籤、架構、註解

標籤 (tag) 基本上 HTML 就是一堆標籤 (tag) 組合而成 有些標籤帶有屬性 (attribute),多個屬性顯示的先後順序不影響結果 屬性通常帶...

鐵人賽 Modern Web DAY 5
前端開發 30 個問題 系列 第 5

技術 Block Formatting Context

前言2020 秋天,我將用 30 天的時間,來嘗試回答和網路前端開發相關的 30 個問題。30 天無法一網打盡浩瀚的前端知識,有些問題可能對有些讀者來說相對簡...

鐵人賽 自我挑戰組 DAY 18

技術 Day18 網頁前端-刻意練習(履歷表#3)

Day18 AC 履歷表#3 簡單小語 剛好切到這個版面時學習了基礎Github,因此也把連結放上來,算是小小練習,這個版面一看到就非常吸引我,原因到現在都不...

鐵人賽 Modern Web DAY 4

達標好文 技術 [Day 04] Elements - CSS 之 2

概覽 上一篇文章主要講解了 Elements 面板中設定 CSS 的部分,今天筆者將會繼續說明 CSS 相關功能,包括 Styles 分頁上方的小工具列以及 C...

鐵人賽 Modern Web DAY 2

技術 從 W3Schools 學習基本頁面佈局 - 前處理【30天切版臨摹 D2】

從 W3Schools 學習基本頁面佈局 - 前處理 我剛開始學 HTML, CSS 是在 W3Schools 這個網站上學的,內容非常詳盡,絕對推薦給每一個想...

鐵人賽 Modern Web DAY 2

技術 【Day 2】首先,什麼是HTML?什麼是CSS?

記得剛開始接觸程式時,看到那些密密麻麻的程式碼,就像看到無字天書一樣,好多小螞蟻在爬呀爬......。゚(゚´ω`゚)゚。 和它認識久了之後,發現其實沒有想像中...

鐵人賽 Modern Web DAY 2
喪屍黑白切 系列 第 2

技術 Day 02 | 訂位?!定位?! - position

講到切版,其中最重要的就是各種定位 position 啦~CSS 中的定位有:static | fixed | relative | absolute | st...

鐵人賽 Modern Web DAY 6
重新認識 Flex 和 Grid 系列 第 6

技術 [Day06] 軸向概念 / flex-direction

軸向 你可能會好奇為什麼學 flexbox 要認識"軸向",但在善於控制一維(上下、左右)的 flexbox 世界,要能控制排列的方向和順序...

鐵人賽 Modern Web DAY 2

達標好文 技術 Font-family - 金魚都能懂的CSS必學屬性

關於網頁中最常見的CSS屬性設定,不外乎就是font-family字型的設定了,字型對一個網頁的重要性可說是左右了一個頁面的視覺感受,不僅僅是美觀與否的問題,更...

鐵人賽 Modern Web DAY 5
重新認識 Flex 和 Grid 系列 第 5

技術 [Day05] Flexbox 彈性容器

.container { display: flex | inline-flex; } 上一篇提到當我們對 container 宣告 display:...

鐵人賽 Modern Web DAY 4
重新認識 Flex 和 Grid 系列 第 4

技術 [Day04] Flexbox 基本認識

Flexbox(彈性盒子),全名 CSS Flexible Box Module Level 1(https://www.w3.org/TR/css-Flexb...

鐵人賽 Modern Web DAY 2
HTML 與 CSS 學習筆記 系列 第 2

技術 Day02 - HTML 和 CSS 概述

HTNL HTML = Hyper Text Markup Languare (超文本標記語言) 寫給瀏覽器看的 HTML 不是一種程式語言 HTML...

鐵人賽 Modern Web DAY 4
前端開發 30 個問題 系列 第 4

技術 More about CSS display

前言2020 秋天,我將用 30 天的時間,來嘗試回答和網路前端開發相關的 30 個問題。30 天無法一網打盡浩瀚的前端知識,有些問題可能對有些讀者來說相對簡...

鐵人賽 自我挑戰組 DAY 17

技術 Day17 網頁前端-刻意練習(履歷表#2)

Day17 AC 履歷表#2 簡單小語 發現一個樣板的履歷網站再次練習履歷切版,加深觀念,每一次的切版,每一次的練習,都是成就更好的自己,雖然是簡單樣板,相信...

鐵人賽 Modern Web DAY 3
重新認識 Flex 和 Grid 系列 第 3

技術 [Day03] 你可能不知道的切版歷史

「誰掌握了過去,誰就掌握了未來」 ——《1984》 既然主題和切版有關,當然要來簡單了解一下切版(黑)歷史啊 XD,認識過去的排版思維以及排版的進展(還有痛苦的...

鐵人賽 Modern Web DAY 3

技術 [Day 03] Elements - CSS

想要又快又穩的滿足各種 UI 需求,每天肯定花不少時間在 Debug CSS,不過總有某些特殊情境讓 Debug 過程非常繁瑣,甚至是難以完成,此時心中就會逐...

鐵人賽 Modern Web DAY 1
喪屍黑白切 系列 第 1

技術 Day 01 | 前言

介紹一下自己 大家好,我是 Zombie@Dump,住在垃圾場的喪屍。 今年年初時離開前份工作準備轉職,沒想到碰上疫情,出國玩的計畫泡湯,只好很認真的配合防疫,...

鐵人賽 Modern Web DAY 1

達標好文 技術 金魚都能懂的CSS必學屬性-CSS真的這麼難學嗎

說到CSS的學習與教學,基本上最多人會卡到的問題就是CSS屬性這麼多,好難學懂或是學到完整,基本上這個問題對於多數的網頁新手來說,始終都是個難解的困擾,但實際上...

鐵人賽 Modern Web DAY 1
HTML 與 CSS 學習筆記 系列 第 1

技術 Day01 - 說明、工具

前言 網頁基礎構成基本就是 HTML 和 CSS,最多再增加 JavaScript,前 2 個我幾乎每次都碰一下就會中斷,畢竟比起基礎的 HTML 和 CSS,...

鐵人賽 Modern Web DAY 1

技術 一起挖掘各大網站原始碼,掌握前端切版概念【30天切版臨摹 D1】

TL;DR,簡介30天切版臨摹 30天,跟我一起 trace 各大網站的 HTML, CSS 程式碼,直接學習好的網站是怎麼被切出來的,用最高效的方式累積實戰經...

鐵人賽 Modern Web DAY 2
重新認識 Flex 和 Grid 系列 第 2

技術 [Day02] 你知道什麼是 W3C 嗎?

「你說說,為什麼我只是要排個版還要知道 W3C?」 恩 . . .不好奇一下你寫的東西是怎麼來的嗎?寫的東西是誰訂的?為什麼寫了就能動?如果不去追究這些,也不會...

鐵人賽 Modern Web DAY 1
重新認識 Flex 和 Grid 系列 第 1

技術 [Day01] 請問你掉的是 Flexbox 還是 Grid ?

開賽阿!! 工程師轉職的路上,靈魂不小心跌入充滿 code 的洪流裡 . . . 切版之神:「請問你掉的是 Flexbox 還是 Grid ?」 我:「喔沒欸....