iT邦幫忙

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

技術 Day 19 CSS <icon font 字體圖標>

1. 字體圖標使用場景 主要用於顯示網頁中通用或常用的一些小圖標 因為精靈圖有許多優點 但缺點也很明顯: a. 圖片文件相對較大b. 圖片本身放大和縮小會失真c...

鐵人賽 Modern Web DAY 14

技術 項目清單-30天學會HTML+CSS,製作精美網站

項目清單分為條列式清(ol)單及編號清單(ul),兩者的差別在於是否有自動排序項目的功能,&lt;ul&gt;是黑點符號「●」,在不同的瀏覽器下可能呈現不同的效...

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

技術 CSS微動畫 - 圖片不裁切,純css實現分格淡出

Q: 還有什麼特別的可以寫嗎?A: 可能... 再回去Loading吧(๑¯∀¯๑) 本篇要來做整張圖分隔淡出的效果!換的方式想 ... 就是上面好幾格白的...

鐵人賽 Modern Web DAY 15

技術 [Day 15 - 小試身手] 用HTML、CSS、JS打造個人網站 (2)

在上一篇:用HTML、CSS、JS打造個人網站 (1),講解了開發網頁的前置作業,以及 Header 跟 Section-Primary 的區塊,接下來就讓我...

鐵人賽 自我挑戰組 DAY 18

技術 Day 18 CSS <Sprite 精靈圖>

1. 為什麼需要精靈圖 一個網頁中會需要很多小的背景作為修飾,若圖像過多服務器頻繁接收&amp;發送會造成服務器壓力過大,將降低頁面加載速度 因此,為了有效減少...

鐵人賽 Modern Web DAY 13

技術 網頁超連結-30天學會HTML+CSS,製作精美網站

超連結是建立網頁與網頁之間的關係,也可以連結到外部網站。a是Anchor的縮寫,中文翻譯為「錨」,點擊後跳到指定位置。連結可以是文字、圖片或檔案,當使用者滑過時...

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

技術 CSS微動畫 - 動起來番外篇!談談Animation的Step

Q: 今天是教師節呢,怎麼沒有放假?A: 認真上課黑!本篇是可能實用,但更可能殺光腦細胞的steps阿! 上一篇在做倒數計時的圓餅圖時,針對animatio...

鐵人賽 Modern Web DAY 16

技術 DAY16-Style Components

前言: 今天我們要來介紹React裡很強大的一個工具!沒錯就是Style Components!廢話不多說,我們直接開始吧! 這是什麼鬼東東: Style C...

鐵人賽 Modern Web DAY 13

技術 Day13 X CSS GPU Acceleration

其實今天的主題應該算是昨天 High Performance CSS 的延伸。 大家應該都有遇過網頁的動畫有點不順暢甚至卡頓的經驗吧?是不是覺得很煩人呢?就算...

鐵人賽 自我挑戰組 DAY 17

技術 Day 17 CSS <用戶介面樣式 & 三角>

什麼是介面樣式? 所謂的介面樣式,就是更改一些用戶操作樣式,以提高用戶體驗。 更改用戶的鼠標樣式 語法 : li { cursor : pointer;...

鐵人賽 Modern Web DAY 12

技術 #11-下滑動態做起來!(JS: scrollTo & scrollBy)

今天來介紹一下往下滑和往上滑的指引動畫和搭配Web API。現在都很流行第一屏設計做好做滿,有時候太美了會讓使用者忘記(/根本不想)往下滑, 適當地指引下滑,就...

鐵人賽 Modern Web DAY 12

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

好的網站除了內容傳達之外,顏色是進入網站的第一印象,可以針對文字大小、框線、背景色...等做變化,是網站中不可或缺的樣式,現在讓我們來看看顏色及背景的使用技巧吧...

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

技術 CSS微動畫 - 倒數計時,繪製圓餅圖!

Q: 這個用Svg做吧?A: 如果你的需求跟我這款一樣,Css就可以畫囉~ 上一篇的時鐘給小編這一篇的靈感!倒數計時的圓餅圖自己做~網路上很多svg的範本,...

鐵人賽 Modern Web DAY 14

技術 [Day 14 - 小試身手] 用HTML、CSS、JS打造個人網站 (1)

所有的網站大概可以分成兩類:靜態網頁、動態網頁,靜態網頁顧名思義就是靜止的網頁,不會去太頻繁的更新內容;動態網頁則是會根據使用者的輸入而有不同的內容更新,包含的...

鐵人賽 Modern Web DAY 27
33歲轉職者的前端筆記 系列 第 27

技術 33歲轉職者的前端筆記 DAY 27 CSS 三角形、三角形折角、轉 45 度漸層色

CSS 三角形作法 語法 HTML &lt;div class=&quot;box&quot;&gt;&lt;/div&gt; CSS .box { wi...

鐵人賽 Modern Web DAY 12

技術 Day12 X Writing High Performance CSS

CSS 是前端開發者不可不學的技術之一,沒有了它就好像你做出來的網頁都沒有穿衣服一樣,有點羞於見人呀!? 但你有想過 CSS 如果亂寫也可能會影響到網頁的效能...

鐵人賽 自我挑戰組 DAY 16

技術 Day 16 CSS <網頁布局-定位布局-2.定位使用>

1. 邊偏移 邊偏移就是定位的盒子移動到最終位置,有top bottom left right 四種 2. 相對定位 絕對定位 使用場景 相對定位 posi...

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

技術 CSS微動畫 - Slot的變化!數字鐘也可以動起來

Q: 動畫影片看起來卡卡的?A: 請各位見諒,跑起來真真是順暢的呢! 上一篇的Slot效果以父層固定寬高後設置overflow: hidden,同時子層設定...

鐵人賽 Modern Web DAY 11

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

網站通常是透過文字的編排,呈現資訊給使用者,標籤用得好,對於SEO排名也會有些幫助,今天要來介紹網頁文字標籤及樣式的使用 網頁標題 &lt;h1&gt;~&lt...

鐵人賽 自我挑戰組 DAY 10

技術 第 10 集:淺談 Container Wrapper 差異

此篇會探討 container 與 wrapper 用法,會著重在 wrapper 的探討。 在開始介紹前,想先說關於 container、wrapper...

鐵人賽 自我挑戰組 DAY 15

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

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

鐵人賽 Modern Web DAY 11

技術 30天打造品牌特色電商網站 Day.11 CSS框架-Bootstrap5

昨天已經初步介紹幾個簡單常用的bootstrap語法,今天來看看幾個也是好用、比較詳細或特殊的情況。 col可以先空幾欄嗎 使用 offset-斷點-欄數,可以...

鐵人賽 Modern Web DAY 10

技術 #番外-讓你的CSS好讀起來!CSS命名方法論筆記

你有以下困擾嗎? 常常不知道要怎麼命名Class嗎?(還一直去 Google 英文字的是你ㄇ ?)還是常常寫了一個Class樣式後就被另一個Class樣式給覆...

鐵人賽 Modern Web DAY 10

技術 網頁命名規則-30天學會HTML+CSS,製作精美網站

在撰寫HTML及CSS時,好的命名要具備可讀性,一眼就能知道這區塊的作用是什麼,也方便日後的維護管理,今天就要來介紹三種CSS的命名規則 OOCSS(Objec...

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

技術 CSS微動畫 - 不知道要吃什麼?Slot幫你選吧

Q: 網路上已經很多可以用的隨機選擇器了耶...A: 拉霸的用途很多,看你怎麼用囉~ 已經連續N篇Loading,本篇跳過Loading篇章,腦袋要來點新東...

鐵人賽 Modern Web DAY 10

技術 30天打造品牌特色電商網站 Day.10 CSS框架-Bootstrap5

除了昨天提到的media query可以做出響應式網頁之外,今天介紹的Bootstrap 5.1版本也能快速上手,更輕鬆的做出排版喔! Containers 容...

鐵人賽 Modern Web DAY 9

技術 #8-選單華麗開起來!超簡單!(animation-delay)

昨天做完了會動的漢堡動畫傳送門今天來開關側邊欄吧!當然只要控制 width0 —&gt; 100% 就可以讓側邊欄從左邊推進來,但今天來多一點點特效,先來看成果...

鐵人賽 Modern Web DAY 9

技術 網頁常用單位-30天學會HTML+CSS,製作精美網站

設置CSS樣式大小時,會使用到各種不同的單位,尤其現在都製作響應式網站,用錯單位,就會針對不同尺寸調整大小相當耗時,以下介紹網頁常用各種網頁單位,讓你使用的更加...

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

技術 CSS微動畫 - Loading來了!小精靈?這個小傢伙吃蛋

Q: 這是小精靈嗎?A: 這是... 吃蛋的小傢伙!(不知道有沒有版權問題呢?) 本篇的靈感來自《小精靈》,但由於不知道有沒有侵犯版權的問題,所以將它變成吃...

鐵人賽 自我挑戰組 DAY 14

技術 Day 14 CSS <網頁布局-浮動布局>

浮動屬性float用於創建浮動 使其移動到另一邊 直到左或右邊緣觸及包含塊或另一個浮動框的邊緣 語法 : 選擇器{float:屬性值;} /*...