技術 【HTML】【CSS】<table>裡面時常無效的margin和padding

【前言】本系列為個人前端學習之路的學習筆記，在過往的學習過程中累積了很多筆記，如今想藉著IT邦幫忙這個平台做整理+再複習。本系列標題一律以【】標示該篇文章主要涉...

技術 【HTML】為何用<p>包<div>會出錯？

【前言】本系列為個人前端學習之路的學習筆記，在過往的學習過程中累積了很多筆記，如今想藉著IT邦幫忙這個平台做整理+再複習。本系列標題一律以【】標示該篇文章主要涉...

技術 【HTML】【CSS】關於空白壓縮

【前言】本系列為個人前端學習之路的學習筆記，在過往的學習過程中累積了很多筆記，如今想藉著IT邦幫忙這個平台做整理+再複習。本系列標題一律以【】標示該篇文章主要涉...

技術 【HTML】【CSS】圖片下方的空白

【前言】本系列為個人前端學習之路的學習筆記，在過往的學習過程中累積了很多筆記，如今想藉著IT邦幫忙這個平台做整理+再複習。本系列標題一律以【】標示該篇文章主要涉...

技術 【HTML】【CSS】如何處理inline-block 元素之間的空白

【前言】本系列為個人前端學習之路的學習筆記，在過往的學習過程中累積了很多筆記，如今想藉著IT邦幫忙這個平台做整理+再複習。本系列標題一律以【】標示該篇文章主要涉...

技術 【HTML】標記？標籤？HTML元素？

【前言】本系列為個人前端學習之路的學習筆記，在過往的學習過程中累積了很多筆記，如今想藉著IT邦幫忙這個平台做整理+再複習。本系列標題一律以【】標示該篇文章主要涉...

技術 HTML筆記(05)-HTML基本語法

前面說了一堆廢話(但我覺得應該是頗需要釐清的架構吧~)，現在就把HTML的內容物列出來真正踏進去撰寫程式碼的世界。 &lt;!DOCTYPE html&gt;:...

技術 學習javascript前...HTML3

學習html就是在學習如何使用標籤，所以我現在要來了解各個標籤的意思以及如何使用。1.&lt; title &gt;通常放在 &lt; head &gt; 內部...

技術 學習javascript前...HTML2

有些功能性的標籤不需要內文，寫法如下：&lt; b &gt;粗體字&lt; /b &gt;b 標籤能將文字變粗體，通常會加上內部文字&lt; hr &gt;&l...

技術 學會網頁製作除了javascript還要會....HTML1

從基本的 HTML、CSS 網頁設計開始入門，先學習靜態版面設計技巧，再帶入動態的 JavaScript 程式撰寫。所以我決定先去了解HTML與CSS，首先來學...

技術 HTML筆記(04)-HTML裡的formatting

在html裡面有分成區塊層級(block level)及行內層級(inlinelevel)，前者在瀏覽器會是新的一行且是整個區塊呈現；後者不會有新的一行，呈現是...

技術 第二隻狗勾-秋田

技術 選擇動物頁面

可以先去https://www.ifreesite.com/upload/ 這裡上傳圖片取得網址點進去就可以看動物的品種介紹，明天再開始做狗勾頁面

技術 HTML筆記(03)-什麼是HTML?

HTML(Hyper Text Markup Language):→就是有一堆Elements(元素)的文件→瀏覽器上該呈現什麼內容、網站的架構→網站開發 El...

技術 HTML筆記(02)-HTML、CSS、Javascript?

HTML:負責網頁的內容及架構CSS:網頁呈現的外觀Javascript:與使用者互動、程式語言以雲科大官網為例:下方為三者皆有開啟(HTML.CSS.Java...

技術 HTML筆記(01)-前端、後端和全端

那天跟朋友聊天，我跟他說我的同學是打程式的所以薪水很高。他很不解，什麼叫做打程式的?我就說就資料探勘那類的，他就說所以是做後端嗎?我說我不知道，他很生氣，他說你...

技術 HTML筆記(00)-為什麼我會想學網頁開發?

我是今年剛畢業的新鮮人，選擇了離家229公里遠的工作，連我自己都感到很意外，畢竟我是一個非常以家人為重的人。就在我遠赴他鄉，薪水也不高的情況下，房租加上返鄉的來...

技術 版本控制與結語-30天學會HTML＋CSS，製作精美網站

終於來到了最後一章節，也算是蠻重要的「版本控制」 版本控制的好處是讓你可以知道自己修改了什麼東西，方便管理自己的code，在多人一起開發一個專案時，更是不可或缺...

原來可以這樣做 | Sunny ‧ 2021-10-15

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

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

原來可以這樣做 | Sunny ‧ 2021-10-13

技術 製作響應式網站-30天學會HTML＋CSS，製作精美網站

響應式網頁設計是什麼 響應式網頁設計(Responsive Web Design)簡稱RWD，是開發網頁設計中的一種方法，在不改變網站結構，隨著顯示螢幕的大小調...

原來可以這樣做 | Sunny ‧ 2021-10-12

技術 DAY30-參賽心得

這個暑假就像開頭第一篇說的，應該是大部分人度過最長的一個暑假，我原本也沒什麼目標，打算好好休養生息，但還好我的朋友們找我做了這麼一個Project，讓我學到了很...

Cooksuhr ‧ 2021-10-12 ‧團隊Obit0 Studio

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

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

原來可以這樣做 | Sunny ‧ 2021-10-11

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

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

原來可以這樣做 | Sunny ‧ 2021-10-09

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

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

原來可以這樣做 | Sunny ‧ 2021-10-07

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

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

原來可以這樣做 | Sunny ‧ 2021-10-06

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

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

原來可以這樣做 | Sunny ‧ 2021-10-05

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

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

原來可以這樣做 | Sunny ‧ 2021-10-03

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

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

原來可以這樣做 | Sunny ‧ 2021-10-02

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

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

原來可以這樣做 | Sunny ‧ 2021-10-01

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

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

原來可以這樣做 | Sunny ‧ 2021-09-30