技術 視覺設計(3)

浮動與清除浮動 float為浮動屬性，用來調整元素的布局。常用left、right兩個值來使元素靠左或靠右，元素會如同position: absolute的...

技術 視覺設計(2)

來輕鬆聊聊 今天將接續前篇的內容，分享許多排版時常用的效果。 不透明度 opacity屬性可以決定元素的不透明程度，值的範圍是從0~1之間含小數點任一數字...

技術 視覺設計(1)

來輕鬆聊聊 本單元可以視為CSS基礎介紹的進階內容，相對於基礎篇會提供更多實用的且更接近實際網頁開發的範例。接下來就讓我們開始吧! 文字對齊 text-a...

技術 CSS基礎介紹(3)

來輕鬆聊聊 終於來到基礎CSS的最後一篇，這次要分享的是CSS的變量。想像一個情境，你正在負責一個網頁的視覺設計，而你需要在許多地方用上同樣的顏色(如:暗紅色D...

技術 CSS基礎介紹(2)

來輕鬆聊聊 今天的內容將著重在版面配置，利用這些屬性，可以讓一個網頁，從完全空白到能清楚的區分網頁中各種功能的區塊。 背景 背景設定如同border(邊框)...

技術 CSS基礎介紹(1)

來輕鬆聊聊 學會如何利用HTML編輯網頁架構後，再來要進入讓網頁美化的CSS了。還不知道什麼是HTML的人，沒關係，只要花兩天就可以學到基礎概念囉! 學HTML...

技術 HTML基礎介紹(2)

來輕鬆聊聊 學習完第一天的內容後，接著要進入到時常用到，而且重要的標籤了。藉由標籤可以做到表格、列表、表單等樣式，完整的HTML網頁架構又是如何呢?就讓我們一起...

技術 HTML基礎介紹(1)

來輕鬆聊聊 嗨 我是Jacky，今天要來談談HTML。舉凡網頁開發、設計，不管聽過、看過甚至接觸過的朋友，可能知道藉由HTML與CSS這兩個程式語言，能夠組成我...

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

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

技術 :checked 表單狀態選取器 - 讓你可以開開關關好開勳

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

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

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

技術 常用於超連結的動態僞類選取器 - 讓你網頁互動變豐富

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

技術 金魚都能懂的這個網頁畫面怎麼切 : 破格式設計

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

技術 金魚都能懂的這個網頁畫面怎麼切 : 方塊酥版面

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