iT邦幫忙

css教學相關文章
共有 54 則文章

技術 鼠年全馬鐵人挑戰 WEEK 11: 水平垂直置中、排版黑魔法 CSS-Flex

在還沒認識Flex前我的水平垂直置中招式,永遠都只有這幾招,line-height+margin auto或用postion來設定,但每次遇到的狀況還不一定能用...

技術 鼠年全馬鐵人挑戰 WEEK 10: 這時我看見他的背影,我的淚很快地流下來了。 box-shadow

還記得國中時,老師國文課時上到朱自清-背影, 雖然內容不多,但內容卻十分豐富,國中時我還是位懵懂的少年,不經世事的孩子, 對文章的真情未必有深入的感受及透澈。僅...

技術 鼠年全馬鐵人挑戰 WEEK 09: 月亮圓又圓,用 border-radius 讓你圓又圓

雖然離中秋節還很遠, 已經想烤肉了XD ,但每次抬頭仰望星空,看到月亮一點一滴的變化, 讓我心中掀起小波瀾,心中思考著要如何讓月亮長存,而不是只有黑夜。 如何使...

技術 鼠年全馬鐵人挑戰 WEEK 06:優化SEO- 將 h1 圖片取代文字!

首先我們要先知道什麼是SEO? 沒有SEO,人們只有5.59%的機會找到你 SEO為什麼重要?讓人們看見你 以Google的角度而言 : Google不斷的...

技術 鼠年全馬鐵人挑戰 WEEK 05:CSS為什麼老是吃不到?讓我們來瞭解CSS權重!

以前我在寫css的時候,常常發現沒寫錯但為什麼沒反應?然後開始陷入debug迴圈,後來才發現是權重出了問題,我想這也是大家都經歷過的痛吧! 在剛開始寫CSS的時...

技術 鼠年全馬鐵人挑戰 WEEK 04:人要衣著,佛要金裝!用CSS為網頁穿上衣服

如果說html是人,css就是衣服。 俗話說:人要衣著,佛要金裝。 穿搭得宜,宅男都會變型男無誤。 首先我們先在css資料夾下建立一個style.css, 然後...

技術 鼠年全馬鐵人挑戰 WEEK 03:CSS盒模型-box-model

什麼是box-model? 意思是在 CSS 裡面,html 的每個元素都可被視作為一個盒子,然後可以針對這個盒子去做調整 Margin -負責調整 元素與元...

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

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

技術 淺談BEM CSS

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

鐵人賽 影片教學

達標好文 技術 史上最完整的新手網頁入門學習地圖 - 金魚都懂的網頁學習路徑懶人包

免費的教學資源,但卻絲毫不減教學品質 經歷了兩屆的鐵人賽,總算是把想要做卻積了很久的一些網頁教學,用錄的、寫的給製作出來了,這一些網頁教學基本上不單單是給所有人...

鐵人賽 Modern Web DAY 30

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

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

鐵人賽 Modern Web DAY 29

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

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

鐵人賽 Modern Web DAY 28

技術 :disabled & :enabled 表單用僞類選取器 - 一眼看穿那些不能按的按鈕

介紹了這麼多針對一班網頁標籤的選取器之後,總算我們可以進入到針對表單的選取器了,針對表單的選取器其實還不少,但是目前來說除了 :checked 之外,可能比較有...

鐵人賽 影片教學 DAY 27

技術 金魚都能懂的這個網頁畫面怎麼切 : 文字排版-完結

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

鐵人賽 Modern Web DAY 27

技術 :nth-of-type() & :nth-last-of-type() - 你覺得燒腦但其實根本不燒腦的選取器趴兔

總算...金魚都能懂的 CSS 選取器 講了20幾篇,總算可以講到這個大家都很有興趣的 :nth-of-type 選取器了,看到這邊又要再再再老話一句了 ( 夠...

鐵人賽 Modern Web DAY 26

技術 :nth-child() & :nth-last-child() - 你覺得燒腦但其實根本不燒腦的選取器

總算...金魚都能懂的 CSS 選取器 講了20幾篇,總算可以講到這個大家都很有興趣的 :nth-child 選取器了,看到這邊又要老話一句了 ( 夠了你! )...

鐵人賽 影片教學 DAY 26

技術 金魚都能懂的這個網頁畫面怎麼切 : 文字排版-下集

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

鐵人賽 Modern Web DAY 25

技術 :only-of-type 類型獨子選取器

:only-of-type 跟 :only-child 非常相似,但也如同之前的篇章中有講到的,認清 child 與 of-type 差異的人,就能擁有世界輕鬆...

鐵人賽 影片教學 DAY 25

技術 金魚都能懂的這個網頁畫面怎麼切 : 文字排版-中集

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

鐵人賽 Modern Web DAY 24

技術 :only-child 獨子選取器 - 這是啥媽寶選取器

:only-child 獨子選取器,簡單的說就是選取到那個只有唯一一個子層的子物件,注意! 他是選取倒獨子物件,不是選取父層喔。而這個選取器也很容易跟另外一個...

鐵人賽 Modern Web DAY 23

技術 :first-of-type & :last-of-type 首項分類與尾首分類選取器 - 一個不會讓你看錯男女的選取器

前一篇提到了選取第一個與最後一個物件的 :first-child 與 :last-child 選取器,接下來我們繼續來看看跟他們很像似的 :first-of-t...

鐵人賽 影片教學 DAY 23

技術 金魚都能懂的這個網頁畫面怎麼切 : 不規則邊緣

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

鐵人賽 Modern Web DAY 22

技術 :first-child & :last-child 頭尾選取器 - 有頭有尾有始有終的選取器

:first-child 以及 :last-child 兩個選取器剛好是相對的,一個選第一個 ( :first-child ),一個選最後一個 ( :last-...

鐵人賽 影片教學 DAY 22

技術 金魚都能懂的這個網頁畫面怎麼切 : 6到20切版技巧原理彙整

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

鐵人賽 影片教學 DAY 21

技術 金魚都能懂的這個網頁畫面怎麼切 : 旋轉拼接方塊

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

鐵人賽 Modern Web DAY 21

技術 :not() 否定選取器 - 一個搞排擠的選取器

not 如其字面意義就是否定的意思,而 :not() 選取器,就是一個排擠(不選取)非我族群的選取器,這個選取器在一開始推出的時候,其實 Amos 非常的不習慣...

鐵人賽 Modern Web DAY 20

技術 :empty 空值選取器 - 比谷關的空氣更乾淨的選取器

:empty 空值選取器!這個選取器真是超有趣的!他專門選取那些內容是空的物件,你以為是像谷關的空氣這樣純淨透明的選取器嗎? 不! 它比谷關的空氣更乾淨,它是連...

鐵人賽 影片教學 DAY 19

技術 金魚都能懂的這個網頁畫面怎麼切 : 訊息對話紀錄

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

鐵人賽 Modern Web DAY 19

技術 ::first-line 首行選取器 - 低調到不行的選取器

有了首字之後,當然要來個首行選取器囉,首行選取器故名思義就是選取第一行的意思了,與前個選取器一樣是個被IE耽誤的僞元素選取器,使用方式就是直接讓被設定的物件內容...

鐵人賽 影片教學 DAY 17

技術 金魚都能懂的這個網頁畫面怎麼切 : 訂單進度條

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