iT邦幫忙

css相關文章
共有 1841 則文章

技術 CSS 使用 float:left & float:right 畫面會閃爍

參考css清除浮動各種方法設定完 float 後 .box { float: left; width: 200px; height: 100px...

鐵人賽 Modern Web DAY 30
挑戰 CSS 30 天 系列 第 30

技術 day30_review

在 day2 中有提到,我的發文內容可能比較偏向基本,因是第一次參賽,目的希望在挑戰連續發文的 30 天中,更重要的是能從中學習並累積自己的前端技術。終於來到最...

鐵人賽 Modern Web DAY 15

技術 [十分鐘學習] Ace - 全球最大的程式語言編輯器上線了

Ace是透過JavaScript所開發的線上程式語言編輯器套件,無論功能和性能都類似一般編輯器(Sublime、Vim和TextMate等),導入進任何網頁或...

鐵人賽 Modern Web DAY 14

技術 [十分鐘學習] Animate.css - 無料!純 ‧ CSS 動畫特效

純CSS,不需JavaScript,支援多瀏覽器的動畫特效;隨插即用,舞動你的網頁人生 GitHub Star: 47,800Javascripting O...

鐵人賽 Modern Web DAY 29
挑戰 CSS 30 天 系列 第 29

技術 day29_hover

按鈕動畫->鼠標移動到按鈕上後添加箭頭標記 範例: <!DOCTYPE html> <html> <head> &...

鐵人賽 Modern Web DAY 13

技術 [十分鐘學習] Moment.js - 時間停(ㄓㄨㄢˇ)止(ㄏㄨㄢˋ)器

輕量級專門解析、驗證、操作、格式化日期的JavaScript函式庫,Moment是為瀏覽器和Node.js而設計,所有元件都可以在這兩個環境下運作 GitHu...

鐵人賽 Modern Web DAY 22
前端新手村 系列 第 22

技術 前端新手村 Transition

「當你迷惘的時候,就回到原點想一想」-中華一番 蘭飛鴻 前言 網頁前端新手村系列文章,宗旨並不在技術本身的教導,重點放在技術與技術之間的脈胳關係。讓零碎的網...

鐵人賽 Modern Web DAY 12
菜鳥前端奮鬥史(欸? 系列 第 12

技術 Day12 「版面用 float 怎麼不如預期?」 ─ 孩子,記得清除浮動呀

很可惜昨天太早睡了,沒觀看團隊進度,結果缺一團隊挑戰失敗了 XD..團隊組的部分明年再接再厲!個人賽還是要繼續還債跑下去 今天是 float 主題的第三篇讓我...

鐵人賽 自我挑戰組 DAY 15
專案學習的30天 系列 第 15

技術 Day15-ListView套BootStrap3.3.7

原始ListView aspx <LayoutTemplate> <table runat="server">...

鐵人賽 Modern Web DAY 12

技術 [十分鐘學習] jQuery Validation - 表單驗證工具

jQuery Validation套件讓用戶端檢查表單變得更容易,並提供大量的客製化設定,無論導入新開發或是現有的專案都是很好的選擇 GitHub Star...

鐵人賽 Modern Web DAY 21
前端新手村 系列 第 21

技術 前端新手村 Media Query

「當你迷惘的時候,就回到原點想一想」-中華一番 蘭飛鴻 前言 網頁前端新手村系列文章,宗旨並不在技術本身的教導,重點放在技術與技術之間的脈胳關係。讓零碎的網...

鐵人賽 Modern Web DAY 11
菜鳥前端奮鬥史(欸? 系列 第 11

技術 Day11 「所以 float 能幹嘛」 ─ 簡單的文字繞圖排版

明天再來補內文結果一個跨年卡了三篇文章還沒有內容,開始欠債真的好恐怖啊啊啊 今天要來接續昨天上一次的主題 ─ float來看看實務上哪些常看到的 float...

鐵人賽 Modern Web DAY 27
挑戰 CSS 30 天 系列 第 27

技術 day27_css3 box-shadow

CSS3 中的 box-shadow 屬性適用於盒子陰影,也可用來創建卡片。 範例: <!DOCTYPE html> <html>...

鐵人賽 Modern Web DAY 11

技術 [十分鐘學習] jquery-loading - 讀取中提示

起源於為了在讀取或運作中,鎖住特定物件,並同時保持讓瀏覽者可以操作頁面其他部分 GitHub Star: 131Javascripting Overall:...

鐵人賽 Modern Web DAY 26
挑戰 CSS 30 天 系列 第 26

技術 day26_css3 border-radius

border-radius 屬性中如果只指定一個值,那麼將生成 4 個圓角。但是,如果想在四個角上一一指定,可以使用以下規則: 四個值:第一個值為左上角,第...

鐵人賽 Modern Web DAY 16
學會Elm寫前端 系列 第 16

技術 16 用elm寫css

elm-css 既然html,js都可以用elm compile出來,那css可以嗎? 當然是可以的,雖然大多數的人還是把css另外寫,不過如果你要吃elm全餐...

鐵人賽 Modern Web DAY 10

技術 [十分鐘學習] highlight.js - 程式碼上色外掛

針對Web程式碼所做的高亮顯示上色 GitHub Star: 11,300Javascripting Overall: 90%瀏覽器: Chrome、Fir...

鐵人賽 Modern Web DAY 10
菜鳥前端奮鬥史(欸? 系列 第 10

技術 Day10 「浮動?我也會漂浮?」 ─ 淺談 float 浮動效果

float ,一種 CSS 屬性 (廢話 在 CSS 的各種排版中經常使用,不過由於更為自由的 flex 的出現,現在出沒的次數有所減少 float(浮動)顧名...

鐵人賽 Modern Web DAY 9
菜鳥前端奮鬥史(欸? 系列 第 9

技術 Day09 「都去整形從零開始」 ─ Reset CSS 的重要?

已經有開始自己動手寫 HTML 、 CSS 的小夥伴們可能會發現同樣一段的 <h1>Hola World</h1> 在不同的瀏覽器上,...

鐵人賽 Modern Web DAY 9

技術 [十分鐘學習] Chart.js - 圖表繪製

對設計師或開發人員,淺顯易懂的的JavaScript圖表應用 GitHub Star: 34,100Javascripting Overall: 97%瀏覽...

鐵人賽 Modern Web DAY 25
挑戰 CSS 30 天 系列 第 25

技術 day25_css3 border

使用 CSS3 的border-radius 屬性可為元素添加圓角邊框以及box-shadow 屬性可為元素添加陰影 範例: <!DOCTYPE html...

鐵人賽 Modern Web DAY 18
前端新手村 系列 第 18

技術 前端新手村 flex (上)

「當你迷惘的時候,就回到原點想一想」-中華一番 蘭飛鴻 前言 網頁前端新手村系列文章,宗旨並不在技術本身的教導,重點放在技術與技術之間的脈胳關係。讓零碎的網...

鐵人賽 Modern Web DAY 24
挑戰 CSS 30 天 系列 第 24

技術 day24_vertical-align

vertical-align 屬性可用來調整圖片與文字的對齊效果。 如以下範例: <!DOCTYPE html> <html> <...

鐵人賽 Modern Web DAY 12
從零開始的網頁設計 系列 第 13

技術 Day12 : 切版(2) _ 基礎樣式 2 :滑鼠滑過變更顏色

那今天要來寫的是關於選單的部分 那我們要讓他變成這樣這邊沒有什麼新的屬性 .menu ul li { font-size: 1.3em; fo...

鐵人賽 Modern Web DAY 17
前端新手村 系列 第 17

達標好文 技術 前端新手村 Position 定位

「當你迷惘的時候,就回到原點想一想」-中華一番 蘭飛鴻 前言 網頁前端新手村系列文章,宗旨並不在技術本身的教導,重點放在技術與技術之間的脈胳關係。讓零碎的網...

鐵人賽 Modern Web DAY 8

技術 [十分鐘學習] Textillate.js - 絢麗文字動畫特效

Textillate.js結合很多很棒的函式庫,簡單應用CSS3動畫特效 GitHub Star: 3,100Javascripting Overall:...

鐵人賽 Modern Web DAY 8
新手也能懂的JS30 系列 第 8

技術 JS30-Day8-Fun with HTML5 Canvas

JS30-Day8-Fun with HTML5 Canvas Day8-課題內容 進入JS30的第八天,今天我們要透過HTML的<canvas>元...

鐵人賽 Modern Web DAY 23
挑戰 CSS 30 天 系列 第 23

技術 day23_div&span

div 與 span 類似的地方是:兩個標籤的目的都是將內容分為不同的區域。 而不同的地方是: span 可以涵蓋更細層的元素,因此可以用 span 來...

鐵人賽 Modern Web DAY 6
Happy CSSer 報報 系列 第 8

技術 Happy CSSer - 07) CSS Logo Animation

FB event: https://www.facebook.com/events/695238003988710/ GitHub repo: https://...