iT邦幫忙

css相關文章
共有 1091 則文章

技術 Day40 網頁前端-持續練習(終極試煉)

Day40 終極試煉 簡單小語 終極試煉拖了好久啊啊啊,工作忙,家裡忙,又有連假,一切都是藉口,小魯是不會多說的,寫這篇心得當下可是在花蓮民宿裡苦苦地寫,為...

鐵人賽 Modern Web DAY 24

技術 [CSS] Animation 動畫

基本的 樣式設定 / 排版定位 都已經難不倒你了嗎?那就接著要來玩玩動態的部分啦!一開始覺得寫 CSS 能讓醜醜的網頁變漂亮很療癒,而接觸了 CSS 的動畫控制...

鐵人賽 Modern Web DAY 24

技術 list-style - 金魚都能懂的CSS必學屬性

list-style 的作用是設定清單前方的圖示,網頁中清單類型的資料可說是固定項目了,每個頁面中都或多或少的可以看到一些清單類型的資料,只是在這些清單的視覺外...

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

技術 Day24 - CSS (5) - 圓弧、陰影

圓弧 border-radius:圓弧屬性,可設定 4 組,可以為 px 或是 % ,從左上開始,順時鐘為左上、右上、右下、左下 設定 1 個:代表全部通...

鐵人賽 Modern Web DAY 24

技術 【Day 24】成為網頁設計師後,我再也不畫表格了! - Word to HTML 線上工具

不知道各位網頁設計師,在製作設計稿的時候,有沒有遇過需要設計的表格內容超級多! 類似部門人員介紹或人事績效考核的超長表格XD By 攝圖網 - 人事行政主管绩...

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

技術 [Day24] grid gap相關屬性

知道如何操縱網格後,如果希望網格區域之間是可以有間隙( gutter )的,除了對所有網格做 margin 之外,也可以使用 grid 的 gap 相關屬性...

鐵人賽 自我挑戰組 DAY 24
網頁學習雜記 系列 第 24

技術 Day 24 | 來做個搖擺的球吧

今天就來講一下 transform-origin 的應用吧! 來做一個搖擺的球, 會長這樣 HTML 簡單的一行 span <span></...

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

技術 Day 24 | 遙想那個用表格排版的年代

今天要講的是金魚都能懂的網頁切版 : 表格怎麼切 NO012, 聽說以前切版都是用表格切呢! 我是沒有經歷過那個年代啦~(裝嫩) 雖然現在切版不用表格切了, 但...

鐵人賽 Modern Web DAY 24
前端常見問題攻略 系列 第 24

技術 怎樣也不會失手的 Bootstrap 格線運用技巧

Bootstrap 令人稱羨的其中之一就是它的格線系統,不僅易用且符合網頁視覺設計概念。雖說如此,在官網文件 落落長的文件還是令許多開發者不知如何快速上手,本篇...

技術 Day39 網頁前端-持續練習(刻不容緩)

Day39 刻不容緩 簡單小語 這個樣板算是目前最大挑戰,看似簡單但細節超級多,中間又卡了一個出遊因此進度落後,趕快補起來,許多地方並沒有樣板這樣如此細膩及...

鐵人賽 Modern Web DAY 23

技術 [CSS] Transform 變形 & Transition 轉場

CSS 的各種 transxxx (transition / transform / translate ),不熟時候常常寫到茫掉,來篇筆記分類/整理一下好方便...

鐵人賽 Modern Web DAY 23

技術 Border & outline- 金魚都能懂的CSS必學屬性

border 主要用途是設定物件的邊框線, outline 是設定物件的外框線,這兩個很類似,但卻有一些細節有所差異,若是不清楚的話就可能會誤用,兩者的原始碼中...

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

技術 Day23 - HTML 與 CSS (7) - Form 表單

Form 表單 <input>:說明 type 的單選與多選 radio:單選 同一群要定義 name,value 回傳值 描述可用 la...

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

技術 [Day23] grid 縮寫

grid 縮寫 grid 提供了一個最簡單的縮寫,讓許多屬性可以寫在一起。 .container { grid: none | <grid-tem...

鐵人賽 自我挑戰組 DAY 23
網頁學習雜記 系列 第 23

技術 Day 23 | 吸睛的滑鼠

今天想要分享另一個我在 Youtube 上面看到的教學, 是個眼球會隨著你的滑鼠移動的小練習, 影片連結在此。 覺得 JS 有好多種 X、Y, 常常記不起來各是...

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

技術 Day 23 | 是最後,但不是結束 - 頁尾

今天要講的是金魚都能懂的網頁切版 : 網頁頁尾版塊 NO006, 應該很少網頁沒有頁尾吧! 所以就把他學起來吧! 本篇關鍵字 :focus、outline...

技術 Day38 網頁前端-持續練習(隨點隨到)

Day38 隨點隨到 簡單小語 看到這個menu的效果可以fixed在想要的位置上,覺得超酷,立刻查資料看看要如何做,才發現原來可以用JQuery去尋找滑鼠...

鐵人賽 Modern Web DAY 22

技術 Background - 金魚都能懂的CSS必學屬性

background 如字面所示,主要用途是設定網頁中元素的背景,實際上 background 是一個CSS 縮寫,它的值是由多個 CSS 屬性所組成,原始碼撰...

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

技術 Day22 - HTML 與 CSS (6) - Form 表單

Form 表單 <form>:有 action 來確定要送出的地方,method 則是送出的方法 <input>:用來輸入資料...

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

技術 [Day22] grid-auto 屬性之 rows/columns

如果沒有給予明確指定網格項目位置,網格項目會自動加入網格內,前面已經了解到很多網格線的操控方式,但那些沒有被操控的、自動生成的、預設的網格線段和區域,要怎麼去操...

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

技術 Day 22 | 煩欸!我又忘記密碼了啦 - 登入表單

今天要講的是金魚都能懂的網頁切版 : 登入表單 NO017, 有沒有人跟我一樣超常忘記密碼的? 有些密碼重設還不能跟之前一樣, 然後我就每次都會忘記我新設定的密...

技術 Day37 網頁前端-持續練習(電光一閃)

Day37 電光一閃 簡單小語 為什麼叫電光一閃呢?因為每個在hover後都是快速閃一下,一時興起就來的電光一閃吧(衝吧皮卡丘,宅ing),看到好多樣式,於...

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

技術 Day21 - HTML 與 CSS (5) - Table 表格

Table 表格 <table> <tr>:代表 (table row),橫的 row <td>:代表 (tabl...

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

技術 [Day21] grid-auto 屬性之 flow

如果沒有給予明確指定網格項目位置,網格項目會自動加入網格內,前面已經了解到很多網格線的操控方式,但那些沒有被操控的、自動生成的、預設的網格線段和區域,要怎麼去操...

鐵人賽 自我挑戰組 DAY 21
網頁學習雜記 系列 第 21

技術 Day 21 | 變形的源頭 - transform-origin

昨天講了 transform, 今天來講跟他配合的 transform-origin。 先來講一下 transform-origin 的 keyword, x-...

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

技術 Day 21 | 這些人都是我的小弟...是員工 - 人員介紹卡片

今天要講的是金魚都能懂的網頁切版 : 人員介紹卡片 NO003。 本篇關鍵字 clip-path animation transform: tran...

鐵人賽 Modern Web DAY 21

技術 Background-attchment- 金魚都能懂的CSS必學屬性

background-attachment 主要用途是設定背景圖片位置的捲動或固定,看起來很像是 background-position 對吧?但他實際上是設定...

技術 Day36 網頁前端-持續練習(風琴萬種)

Day36 風琴萬種 簡單小語 原來做了這麼久的收合選單,這種樣式叫做手風琴選單啊!果然風琴萬種(什麼爛梗……)無知如小魯的我,看了下樣板覺得可以更改樣式,...

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

技術 Day20 - Position (2) - 固定定位

固定定位 不隨網頁滑動(滾動)而改變位置,例如購物車按鈕、置頂按鈕、聊天服務等固定區域的 fixed:類似絕對座標固定位置,但參考的是瀏覽器視窗,也就是我們...

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

技術 [Day20] grid-template 屬性之 areas

雖然說網格線會隨著網格項目自動生成,但既然要使用網格系統,就要了解怎麼操控網格線,才能劃出各種多變的網格區域,然而畫網格線有很多種做法,且每種做法的語法也不同,...