iT邦幫忙

css相關文章
共有 721 則文章

技術 [Sass]造輪子-用@mixin做一個簡單的loading動畫

話不多說,先上成果! 思考迴路: 撰寫keyframes使每個點上下移動(transform),我們命名這個keyframe為waving 每個點都具備...

技術 CSS - 網頁列印與樣式

今天要來介紹一個比較不常用的東西,那就是 CSS 中的列印,在以前常常會將網頁列印出來,所以經常會使用到這個屬性,時到今日,使用的時機越來越少,只有一些報表有用...

技術 CSS - Grid 介紹與使用

Gird 是一種 CSS 的網格系統,他出來也有一陣子了,直到最近突然想到我還沒認真看過XD,所以想說該來還債拉,這篇就跟大一起來學習一下如何使用 Gird,那...

技術 Sass/Scss 基礎知識 學習筆記

Sass/Scss是一個非常好用的預處理器,所謂預處理器,就是可以在我們轉變成CSS之前, 更有結構性寫、簡潔、清晰且好維護的 CSS 程式碼,在大型專案中可說...

技術 [鼠年全馬鐵人挑戰] Week15 - 超新手學前端 - Bootstrap 4 概念筆記

什麼是 Bootstrap 4 Bootstrap 是一種由 HTML、CSS 和 JavaScript 寫成的前端框架,可以更快更方便的開發網站 Bootst...

技術 [鼠年全馬鐵人挑戰] Week13 - 超新手學習筆記:如何開始撰寫 RWD

又過了一週啦~ 一樣是超忙的一週~~ 下班回家努力練習切版直播的作業,不過這次的版型比較複雜所以卡關了QQ 真的是燒腦燒到一個極點 這次的作業除了 PC 版之外...

技術 JS30 Day 2 - CSS + JS Clock 學習筆記

以下為原始檔 https://github.com/87JoJo/02---JS-and-CSS-Clock 這次的練習,是要做一個小時鐘,而重點在於CSS的撰...

技術 [鼠年全馬鐵人挑戰] Week 7-從別人的部落格(轉職歷程)領悟到學習應不疾不徐

從別人的部落格(轉職歷程)領悟到學習應不疾不徐 今天分享筆記之外的心境,最近因為開始工作,在學習的時間變的比較無法自由掌握。 因此學習有些緩慢下來!! 那為...

技術 CSS-Grid 學習筆記

今天也來分享一下,自己昨天從AMOS大大的直播,所學到的CSS grid知識,有誤的地方,歡迎指證並還請見諒,謝謝! CSS Grid有點線面的概念,可以應用在...

技術 [鼠年全馬鐵人挑戰] Week11 - 超新手學習筆記:CSS-container容器標籤

Hi~大家這周過的好嗎? 上週開始參加六角學院切版直播班,希望讓自已的切版能力越來越好但現在的程度還算是很新~ 所以希望能把在這八週學到的寫成筆記更加深印象~...

技術 [鼠年全馬鐵人挑戰] Week10 - 超新手入門:CSS - 文字的不同變化

Hi~~大家這週的過的好嗎? 現在最好防疫就是待在家別亂跑吧~ 當然我也好好待在家好好寫文啦~雖然好燒腦(大誤XDD 上星期介紹完 CSS 的基本語法後,今天來...

技術 [鼠年全馬鐵人挑戰] Week09 - 超新手入門:CSS 的基本語法

大家好啊~~又見面惹~ 不知道清明連假大家有沒有乖乖待在家防疫還是有出遠門走走呢? 四天連假只待在離家不遠的地方走走運動,其餘時間就是待在家休息 感覺待在家才是...

徵才 【均一平台教育基金會】 徵【軟體工程師】

團隊介紹 均一平台教育基金會(Junyi Academy Foundation,簡稱均一)是一個致力於「讓每一位孩子都有機會成為終身學習者」的非營利組織。 我們...

技術 [紀錄] Day2 切版練習筆記

切版練習日期: 2020/02/14 觀看影片 : CssCoke - "金魚都能懂的網頁切版 : 網頁頁尾版塊 NO006" &&...

技術 [鼠年全馬鐵人挑戰] Week 2-網頁排版筆記: 修練前的寶物

暨上一篇學習遇到低潮期,搜尋網友的#技術文章分享 在iT邦幫忙,發現這篇「金魚都能懂網頁設計入門」 Amos 老師分享的技術文,說到筆記學習方法 「XMind」...

技術 [紀錄] Day1 切版練習筆記

2020/02/12 觀看CssCoke大大的Youtube金魚也懂的網也切版,"金魚都能懂的網頁切版 : 超通用橫式版面 NO005" 跟...

徵才 【台北市】前端工程師(近捷運松江南京站)-APO

我們需要您具備以下能力: 1、從事前端開發2年及以上,精通各種前端技術,包括HTML/CSS/JavaScript/Node.JS等 2、具備跨終端的前端開發能...

技術 CSS線性漸層文字如何寫?

概念: 1.先用linear-gradient 在background 做出漸層效果 background: -webkit-linear-gradien...

技術 WordPress 教學:如何制作【平滑感】的 CSS 輕陰影?

有時要把陰影調整得非常 “Smooth 順滑” 是一件不輕鬆的事情,如果沒有受過正規的學術訓練,尤其容易弄巧成難看的陰影,雖然這非常主觀,但不妨多參考國外的優...

技術 【CSS筆記】實現等高欄位

第一種:border 解說:利用中間欄位的border-left與border-right來實現視覺上的等高效果,但缺點很明顯:「左右兩邊內容超出中間欄位時,會...

技術 要開始使用 Bootstrap 4 前,我們先了解幾個它的通用模式吧

前情提要:讓我們站在巨人的肩膀上,如何在專案中導入 Bootstrap 4 並客製它 ★首先這篇文章適合以下背景的人閱讀: 熟悉 HTML、CSS 知道如何...

技術 淺談BEM CSS

淺談BEM CSS-CSS設計模式與架構 前言 BEM是Block Element Modifier的縮寫, BEM 是一種為了讓CSS Class 更好維...

技術 讓我們站在巨人的肩膀上,如何在專案中導入 Bootstrap 4 並客製它

程式設計的世界有一句俗話叫做,不要重複造輪子,意思就是說,別人已經寫好了的程式,就不要再自己重複寫了,除非是想要練習,想要了解原理,讓自己將來也有機會為別人造...

鐵人賽 Modern Web DAY 30
重新認識 CSS 系列 第 30

技術 重新認識 CSS - 總結 & 系列目錄

前言 「重新認識 CSS」這個系列名稱的由來就如其名,我想要重新認識它。雖然以前就有學過 CSS,但這次想從 CSS Spec 中學到最原始的定義和內容,更加...

鐵人賽 自我挑戰組 DAY 30
從門外漢到前端新手 系列 第 30

技術 Day30 CSS:Transform: translate

Transform是CSS中,用來改變視覺格式化模型(visual formatting model)的各種型態,且它具有三維的概念,可以聲明元素的三維視覺效果...

鐵人賽 Modern Web DAY 30

達標好文 技術 學習路徑懶人包 - CSS 選取器學習地圖

經歷了29天的 CSS 選取器的洗禮,感謝各位的訂閱、支持與觀看,不知道大家對於 CSS 選取器是否有變的更加熟悉了呢?今天就讓我們來快速地回顧一下這 29 天...

鐵人賽 Modern Web DAY 29

技術 :root 根目錄選取器 - 叫你阿爸出來講

這個選取器應該是所有選取器裡面最特別的了,且目前這個選取器使用的地方還滿受限的,先來瞭解一下這個選取器的名字吧,root 顧名思義就是「根」的意思,網頁的「根」...

鐵人賽 影片教學 DAY 29

技術 金魚都能懂的這個網頁畫面怎麼切 : 拼拼版重構

大家好~ 我是 Amos,這次要跟大家分享的是切版的教學,如果您本身對於 HTML & CSS 的基礎還不了解的話,建議您可以先看去年鐵人的基礎教學 本...

鐵人賽 Modern Web DAY 29
重新認識 CSS 系列 第 29

技術 重新認識 CSS - z-index & stacking context

前言 「重新認識 CSS」這個系列名稱的由來就如其名,我想要重新認識它。雖然以前就有學過 CSS,但這次想從 CSS Spec 中學到最原始的定義和內容,更加...

鐵人賽 自我挑戰組 DAY 29
前端新手進化史 系列 第 29

技術 flex 7

文章將陸續整理並更新至個人部落格。 flex 有自己專屬的對齊屬性,vertical-align、text-align 甚至 float 都是叫不動...