iT邦幫忙

html教學相關文章
共有 33 則文章
鐵人賽 Modern Web DAY 28

技術 響應式網站注意細節-30天學會HTML+CSS,製作精美網站

現在使用智慧型手機比率最高,手機畫面很小,所以在製作網頁時應注意以下細節 只顯示重要的資訊及減少欄位數量 在手機或平板上,不像電腦可以閱讀大量資訊內容,所以要適...

鐵人賽 Modern Web DAY 26

技術 網頁變形-30天學會HTML+CSS,製作精美網站

transform屬性是變形的意思,可運用在2D及3D變形,可以對網頁元素做旋轉、縮放、平移、傾斜、矩陣變形的效果。但不適用於「行內元素」 transform:...

鐵人賽 Modern Web DAY 24

技術 網頁編排Grid-30天學會HTML+CSS,製作精美網站

Grid是什麼 Grid是磚牆式版面,使用二維的排版方式,與flexbox不同的地方是Grid一次可以控制水平及垂直方向。Grid像是美工軟體,有許多參考線幫助...

鐵人賽 Modern Web DAY 22

技術 網頁定位-30天學會HTML+CSS,製作精美網站

今天要來介紹的是定位(position),可以用來設定元素的擺放位置了 position 定位 static 預設值 正常排序,依照html的code由上往下...

鐵人賽 Modern Web DAY 21

技術 網頁盒子-30天學會HTML+CSS,製作精美網站

Box Model定義 每個html的元素都是一個Box Model,由外而內為外邊距(Margin)、邊框(Border)、內邊距(Padding)、內容盒子...

鐵人賽 Modern Web DAY 20

技術 網頁表單-30天學會HTML+CSS,製作精美網站

表單在網頁上有不同呈現的功能,像是網路投票、註冊、購物、問券、搜尋等,用來收集瀏覽者的資訊,增加與使用者的互動。 <form> 包含表單元素的區域(...

鐵人賽 Modern Web DAY 19

技術 網頁表格-30天學會HTML+CSS,製作精美網站

網頁需要製作時間表、收費表等,都可以使用表格製作。 只要了解表格相關的標籤,就能夠輕鬆做出表格了,這章節會讓你了解到製作表格的多種標籤及樣式設定,還有響應式網站...

鐵人賽 Modern Web DAY 18

技術 剪裁與遮罩-30天學會HTML+CSS,製作精美網站

有時候在製作區塊時,會希望用不規則的形狀呈現,以前會將圖片製作成不規則形狀,在放到html裡面,或是用很多元素堆疊呈現,但每次要修改圖片就要再重新做一次,很麻煩...

鐵人賽 Modern Web DAY 17

技術 濾鏡-30天學會HTML+CSS,製作精美網站

前一章節介紹過混合模式,相信對濾鏡也不會很陌生。「濾鏡」是什麼呢?他可以做出與Photoshop相同的濾鏡,CSS提供了十種濾鏡,可以用在圖片、文字...等地方...

鐵人賽 Modern Web DAY 16

技術 混合模式-30天學會HTML+CSS,製作精美網站

「混合模式」是什麼呢?有用過photoshop的設計師對圖片混合模式肯定不陌生,是元素重疊部分的顏色、飽和度、亮度進行混合變成新的顏色。 混合模式相關屬性:...

鐵人賽 Modern Web DAY 15

技術 網頁圖片-30天學會HTML+CSS,製作精美網站

圖片在網頁裡是不可或缺的元素,可以增加網站的豐富度及美感,但是也可能造成網站花太多時間載入,使用者體驗不佳,甚至影響到網站的排名。因此,圖片的解析度、檔案大小相...

鐵人賽 Modern Web DAY 14

技術 項目清單-30天學會HTML+CSS,製作精美網站

項目清單分為條列式清(ol)單及編號清單(ul),兩者的差別在於是否有自動排序項目的功能,<ul>是黑點符號「●」,在不同的瀏覽器下可能呈現不同的效...

鐵人賽 Modern Web DAY 13

技術 網頁超連結-30天學會HTML+CSS,製作精美網站

超連結是建立網頁與網頁之間的關係,也可以連結到外部網站。a是Anchor的縮寫,中文翻譯為「錨」,點擊後跳到指定位置。連結可以是文字、圖片或檔案,當使用者滑過時...

鐵人賽 Modern Web DAY 11

技術 網頁文字-30天學會HTML+CSS,製作精美網站

網站通常是透過文字的編排,呈現資訊給使用者,標籤用得好,對於SEO排名也會有些幫助,今天要來介紹網頁文字標籤及樣式的使用 網頁標題 <h1>~&lt...

鐵人賽 Modern Web DAY 9

技術 網頁常用單位-30天學會HTML+CSS,製作精美網站

設置CSS樣式大小時,會使用到各種不同的單位,尤其現在都製作響應式網站,用錯單位,就會針對不同尺寸調整大小相當耗時,以下介紹網頁常用各種網頁單位,讓你使用的更加...

鐵人賽 Modern Web DAY 8

技術 偽類與偽元素-30天學會HTML+CSS,製作精美網站

昨天介紹了各種選擇器,今天介紹偽類及偽元素樣式設定,可以讓畫面有更多的樣式變化,也減少html code的撰寫。讓我來為你一一介紹各種屬性使用方式吧~ 偽類選擇...

鐵人賽 Modern Web DAY 6

技術 語意標籤-30天學會HTML+CSS,製作精美網站

在HTML5中新增了語意標籤,取代以前只能用<div>劃分區塊,可以更清楚知道網頁區塊設計目的,也有有利SEO的搜尋。下圖是網站標籤的結構,依序跟大...

鐵人賽 Modern Web DAY 5

技術 認識網頁元素 HTML、CSS

看完了前幾天製作網頁,所需要的素材、使用編輯器及製作網站的流程後後,今天要來介紹HTML、CSS的基本結構,跨出製作網站的第一步了 HTML HTML是什麼?...

鐵人賽 Modern Web DAY 2

技術 第2車廂-砸重金才懂得:HTML標籤

本篇重點在於告訴新手們,必懂得HTML標籤、觀念,並且推薦一些文章,讓各位可以往此方向去了解 想當初的自己在資策會學習網頁的地圖就是.... HTML結構/...

鐵人賽 自我挑戰組 DAY 8

技術 視覺設計(3)

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

鐵人賽 自我挑戰組 DAY 7

技術 視覺設計(2)

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

鐵人賽 自我挑戰組 DAY 6

技術 視覺設計(1)

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

鐵人賽 自我挑戰組 DAY 5

技術 CSS基礎介紹(3)

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

鐵人賽 自我挑戰組 DAY 4

技術 CSS基礎介紹(2)

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

鐵人賽 自我挑戰組 DAY 3

技術 CSS基礎介紹(1)

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

鐵人賽 自我挑戰組 DAY 2

技術 HTML基礎介紹(2)

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

鐵人賽 自我挑戰組 DAY 1

技術 HTML基礎介紹(1)

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

鐵人賽 影片教學 DAY 22

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

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

鐵人賽 Modern Web DAY 16

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

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

鐵人賽 Modern Web DAY 14

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

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