iT邦幫忙

網頁教學相關文章
共有 239 則文章
鐵人賽 Modern Web DAY 16

達標好文 技術 Background-image 之一 - 金魚都能懂的CSS必學屬性

Background-image 的規則 background-image作用是設定背景圖片,其撰寫方式像是這樣 background-image: url(&...

鐵人賽 Modern Web DAY 11

達標好文 技術 第11車廂-table界的神器!DataTables介紹篇(1)

延續上篇的table介紹,原本功能都要自己寫,那有沒有工具可以直接套用呢?有的!那就是神器DataTables拉! 簡介 DataTables 是 jQue...

鐵人賽 影片教學

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

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

鐵人賽 Modern Web DAY 30

達標好文 技術 position - 金魚都能懂的CSS必學屬性

position 這個屬與 display 一樣,實在是一個太重要的屬性了,同樣的要在一個篇幅中講完其實是不可能的事情,它可以說是目前金魚都能懂的 CSS 必學...

鐵人賽 Modern Web DAY 28

達標好文 技術 Box-sizing - 金魚都能懂的CSS必學屬性

Box-sizing 這個屬性是一個新時代的屬性,也是目前這時代網頁入門必備的一項常識,box-sizing 的作用是控制 width 與 height 作用的...

鐵人賽 Modern Web DAY 2

達標好文 技術 Font-family - 金魚都能懂的CSS必學屬性

關於網頁中最常見的CSS屬性設定,不外乎就是font-family字型的設定了,字型對一個網頁的重要性可說是左右了一個頁面的視覺感受,不僅僅是美觀與否的問題,更...

鐵人賽 Modern Web DAY 10

達標好文 技術 Text-align - 金魚都能懂的CSS必學屬性

text-align 的規則 text-align主要的用途用於文字的水平對齊,基本上僅需指定一個值,其作用的對象是物件內的文字,例如我對p設定text-ali...

鐵人賽 Modern Web DAY 14

達標好文 技術 ::before & ::after 無中生有的僞元素選取器 - 傑克這真是太神奇啦

本系列文章已集結成書,並於書中添加一些新篇章及細節補充,有興趣的朋友可至天瓏書局選購,感謝各位支持購書連結 https://www.tenlong.com.t...

鐵人賽 Modern Web DAY 20

達標好文 技術 Background-size- 金魚都能懂的CSS必學屬性

background-size如字面所示,主要用途是設定背景圖片的尺寸,background-size可以使用數值或關鍵字設定,並可以設定一至兩個值,倘若是需要...

鐵人賽 Modern Web DAY 24

技術 使用 table 來做垂直置中區塊

簡言 這個方式...沒甚麼好講的,就是一個很單純的用表格來做垂直置中,應該算是初初初初初級垂直置中技巧啦。 原理說明 去看這篇 使用 Display: tabl...

鐵人賽 Modern Web DAY 26

技術 min-width & max-width - 金魚都能懂的CSS必學屬性

min-width 與 max-width 這兩個屬性跟 min-height 與 max-height 其實就跟 width 還有 height 差不多,唯獨...

鐵人賽 Modern Web DAY 11

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

letter-spacing 是一個控制字元間距的屬性,許多視覺設計師很喜歡做加大字距的視覺設計,這時就是letter-spacing上場發揮的時候了。 let...

鐵人賽 Modern Web DAY 26

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

本系列文章已集結成書,並於書中添加一些新篇章及細節補充,有興趣的朋友可至天瓏書局選購,感謝各位支持購書連結 https://www.tenlong.com.t...

鐵人賽 Modern Web DAY 6

達標好文 技術 Text-decoration - 金魚都能懂的CSS必學屬性

Text-decoration是一個網頁開發者必學的CSS屬性了,因為用到的機會太多了,尤其是超連結的底線去除,Amos不知道被問到多少次了,此外對於有些需要強...

鐵人賽 Modern Web DAY 9

達標好文 技術 Text-indent - 金魚都能懂的CSS必學屬性

Text-indent 的規則 text-indent基本上僅需指定一個值,其撰寫方式像是這樣 text-indent: 1em; text-indent的作...

鐵人賽 Modern Web DAY 20

技術 第20車廂-你知道slick.js輪播套件可以這樣用?

本篇介紹使用slick.js輪播套件應用在兩列以上的輪播功能以及介紹slickGoTo()方法 線上輪播套件有很多,自己常用的除了有slick,還有Owl...

鐵人賽 Modern Web

達標好文 技術 Top、Right、Bottom、Left - 金魚都能懂的CSS必學屬性

Top 、Right 、Bottom 、Left 4個 CSS 屬性是搭配 position 一起使用的,倘若沒有 position 的話,這4個屬性是不會有...

鐵人賽 Modern Web DAY 3

達標好文 技術 Font-size - 金魚都能懂的CSS必學屬性

Font-size,這麼簡單的一個CSS屬性,有必要特別開一篇文章來談嗎?這根本就是騙稿費騙篇數的啊!說實在話,font-size這屬性還真的是不困難,但卻也是...

鐵人賽 Modern Web DAY 7

技術 CSS 層疊式宣告 - 讓你快速選到特定元素內的物件的選取器

本系列文章已集結成書,並於書中添加一些新篇章及細節補充,有興趣的朋友可至天瓏書局選購,感謝各位支持購書連結 https://www.tenlong.com.t...

鐵人賽 Modern Web DAY 19

達標好文 技術 Background-repeat- 金魚都能懂的CSS必學屬性

background-repeat主要用途是讓背景圖片可以重複拼接,好能夠在背景圖片小於容器尺寸時,利用拼接的方式鋪滿整個容器範圍,background-rep...

鐵人賽 Modern Web DAY 9

達標好文 技術 CSS 屬性選取器 - 一個選取自由度超高的選取器

本系列文章已集結成書,並於書中添加一些新篇章及細節補充,有興趣的朋友可至天瓏書局選購,感謝各位支持購書連結 https://www.tenlong.com.t...

鐵人賽 Modern Web DAY 17

達標好文 技術 Background-image 之二- 金魚都能懂的CSS必學屬性

前情提要,從上一篇我們了解到背景圖片的多個設定,以及可以設定多重背景之後,這一篇我們要來了解的是背景的漸層,如果還沒看過上一篇的朋友,建議先去看一下「backg...

鐵人賽 影片教學 DAY 2

達標好文 技術 金魚都能懂 網頁設計入門 : 網頁入門第一步 (第二天)

教學影片 不要錯過 CSS coke 的影片快按此訂閱CSS coke的頻道 重點回顧 網頁是甚麼? 網頁其實就是一個純文字檔案,我們利用『標記』的方式來賦予資...

鐵人賽 Modern Web DAY 22

達標好文 技術 Background - 金魚都能懂的CSS必學屬性

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

鐵人賽 Modern Web DAY 5

達標好文 技術 CSS 群組式宣告 - 每個開發者都該學會的選取方式

本系列文章已集結成書,並於書中添加一些新篇章及細節補充,有興趣的朋友可至天瓏書局選購,感謝各位支持購書連結 https://www.tenlong.com.t...

鐵人賽 Modern Web DAY 18

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

background-position 背景位置指的是背景圖片的位置而非色彩位置,所以切記!使用這個屬性時,請記得搭配 background-image 使用,...

鐵人賽 Modern Web DAY 30

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

本系列文章已集結成書,並於書中添加一些新篇章及細節補充,有興趣的朋友可至天瓏書局選購,感謝各位支持購書連結 https://www.tenlong.com.t...

鐵人賽 Modern Web DAY 3

達標好文 技術 CSS class 選取器 - 切版與前端框架最常使用的CSS選取器 - 金魚都能懂了你還怕學不會嗎

本系列文章已集結成書,並於書中添加一些新篇章及細節補充,有興趣的朋友可至天瓏書局選購,感謝各位支持購書連結 https://www.tenlong.com.t...

鐵人賽 Modern Web DAY 24

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

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

鐵人賽 影片教學 DAY 3

技術 金魚都能懂 網頁設計入門 : 用甚麼工具寫網頁? - 鐵人賽第三天

教學影片 不要錯過 CSS coke 的影片快按此訂閱CSS coke的頻道 重點回顧 目前撰寫網頁常見的工具有哪幾個 Brackets 免費軟體,跟Adobe...