iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0 Like 0 留言 762 瀏覽

鐵人賽自我挑戰組

2020 iT邦幫忙鐵人賽網頁前端-刻意練習系列第 32 篇

技術 Day32 網頁前端-持續練習(玩轉同樂)

Day32 玩轉同樂簡單小語最近莫名看到這種特效很炫的就會想要寫來練習，又是為元素的應用，當然還有flex的排版，大致上沒太大問題，不過現在對於Body的...

TerryYu ‧ 2020-10-02

1 Like 0 留言 5483 瀏覽

鐵人賽 Modern Web DAY 16

HTML 與 CSS 學習筆記系列第 16 篇

技術 Day16 - Flex (3) - 軸線、justify-content 與 align-items

軸線主軸 (main axis) 與交錯軸 (cross axis) 的關係如下表二者一定是垂直關係交錯軸只有上至下與左至右 2 種主軸...

hokou ‧ 2020-10-01

0 Like 0 留言 885 瀏覽

鐵人賽自我挑戰組

2020 iT邦幫忙鐵人賽網頁前端-刻意練習系列第 31 篇

技術 Day31 網頁前端-持續練習(來杯咖啡)

Day31 來杯咖啡簡單小語看似簡單卻又充滿挑戰細節的咖啡杯，一開始的躍躍欲試到後面的苦惱煩惱，運用各種偽元素拼拼湊湊，最後的波浪顏色區分，還是想不到方法...

TerryYu ‧ 2020-10-01

1 Like 0 留言 997 瀏覽

鐵人賽 Modern Web DAY 15

HTML 與 CSS 學習筆記系列第 15 篇

技術 Day15 - Flex (2) - 外容器、軸線

外容器 (Container) 參考 CodePen 連結，試著將註解的行數依描述進行調整 try01：要加display才會顯示 Flex 的效果 try0...

hokou ‧ 2020-09-30

1 Like 0 留言 993 瀏覽

鐵人賽自我挑戰組 DAY 30

2020 iT邦幫忙鐵人賽網頁前端-刻意練習系列第 30 篇

技術 Day30 網頁前端-刻意練習(鐵人煉成)

Day30 鐵人煉成中點是中點不是終點，沒想到30天的挑戰成功了，在工作及休息時間找到平衡點，利用自己的時間加緊練習並學習，雖然目前的作品不是非常有競爭力...

TerryYu ‧ 2020-09-30

0 Like 0 留言 972 瀏覽

鐵人賽自我挑戰組 DAY 28

Elementor 教學 - 如何使用 WordPress 建立一頁式銷售網站系列第 28 篇

技術 Elementor 教學 28 | 如何推廣您的一頁式銷售網站

推廣是行銷最重要的部份，這篇文章比較長，可能要分數次來完成，下方有一些有用的參考文章對大家有幫助，容後我再更新更多的內容。 100 個安裝 WordPres...

Mack Chan ‧ 2020-09-29

1 Like 0 留言 1152 瀏覽

鐵人賽 Modern Web DAY 14

HTML 與 CSS 學習筆記系列第 14 篇

技術 Day14 - Flex (1) - 概述

Flex from：https://www.w3.org/TR/css-flexbox-1/#property-index Flex Box：是一個 (Box...

hokou ‧ 2020-09-29

0 Like 0 留言 841 瀏覽

鐵人賽自我挑戰組 DAY 29

2020 iT邦幫忙鐵人賽網頁前端-刻意練習系列第 29 篇

技術 Day29 網頁前端-刻意練習(模仿遊戲#2)

Day29 六角模仿遊戲#2 簡單小語一開始看到這個版就覺得很酷可以記錄信用卡資訊，稍微玩了一下動畫起初覺得有難的感覺，但實際寫下去才發現兩行就可以完成了...

TerryYu ‧ 2020-09-29

1 Like 0 留言 1983 瀏覽

鐵人賽 Modern Web DAY 13

HTML 與 CSS 學習筆記系列第 13 篇

技術 Day13 - HTML 與 CSS (4) - 水平置中、box-sizing

區塊水平置中使用 margin-left: auto和margin-right: auto 參考下例會發現區塊區域置中，然後只有最上層(父層) wrap...

hokou ‧ 2020-09-28

0 Like 0 留言 1355 瀏覽

鐵人賽自我挑戰組 DAY 28

2020 iT邦幫忙鐵人賽網頁前端-刻意練習系列第 28 篇

技術 Day28 網頁前端-刻意練習(模仿遊戲#1)

Day28 六角模仿遊戲#1 簡單小語這個週末偷懶了一下，多花了點時間完成這個模仿遊戲，再次把最近學到的To Do List給放進來刻意練習一遍，Java...

TerryYu ‧ 2020-09-28

1 Like 0 留言 764 瀏覽

鐵人賽 Modern Web DAY 12

HTML 與 CSS 學習筆記系列第 12 篇

技術 Day12 - HTML 與 CSS (3) - Box Model

margin 與 padding 補充昨日的資訊，可以在 chrome 的開發者模式看到一個 Box，其實會隨著各個區塊的設定而有不同，就搭配程式碼與顯示，比較...

hokou ‧ 2020-09-27

1 Like 0 留言 496 瀏覽

鐵人賽自我挑戰組 DAY 12

網頁學習雜記系列第 12 篇

技術 Day 12 | 我的 HTML 筆記

分享一下之前看金魚系列時整理的筆記，附上金魚原本的連結：金魚都能懂的網頁設計入門：再談HTML Html 標籤主標題：h1 副標題：h2 小標題：h3（...

Zombie@Dump ‧ 2020-09-27

0 Like 0 留言 676 瀏覽

鐵人賽自我挑戰組 DAY 27

2020 iT邦幫忙鐵人賽網頁前端-刻意練習系列第 27 篇

技術 Day27 網頁前端-刻意練習(RWD#3)

Day27 六角 RWD#3 簡單小語圖片的版型看到就想要練習，又看到這種斜一邊然後小尺寸變正的圖片縮放樣式，模糊效果及觸及事件，看到就忍不這想趕快學習並實...

TerryYu ‧ 2020-09-27

1 Like 0 留言 1576 瀏覽

鐵人賽 Modern Web DAY 11

HTML 與 CSS 學習筆記系列第 11 篇

技術 Day11 - HTML 與 CSS (2) - 選擇器、margin、padding

選擇器之前有介紹過選擇器，可參考以下連結，今天介紹後代選擇器 type selector (標籤選擇器)：Day07 Pseudo-classes (擬態...

hokou ‧ 2020-09-26

0 Like 0 留言 804 瀏覽

鐵人賽自我挑戰組 DAY 26

2020 iT邦幫忙鐵人賽網頁前端-刻意練習系列第 26 篇

技術 Day26 網頁前端-刻意練習(RWD#2)

Day26 六角 RWD #2 簡單小語這次看到了兩個版型就毫不猶豫合併並且加入最近所學的JS功能(ToDoList及Time Clock)，這個heade...

TerryYu ‧ 2020-09-26

2 Like 0 留言 4365 瀏覽

鐵人賽 Modern Web DAY 10

HTML 與 CSS 學習筆記系列第 10 篇

技術 Day10 - HTML 與 CSS (1) - 區塊元素、行內元素

因為現在發現 HTML 和 CSS 都會交替用到，標題不好區分，就當個綜合應用吧！區塊元素 CSS 設定：display: block 盡可能佔滿版面會...

hokou ‧ 2020-09-25

0 Like 0 留言 1223 瀏覽

鐵人賽自我挑戰組 DAY 25

2020 iT邦幫忙鐵人賽網頁前端-刻意練習系列第 25 篇

技術 Day25 網頁前端-刻意練習(RWD#1)

Day25 六角 RWD #1 簡單小語一開始看到覺得應該不難，結果RWD直接卡住不知道Table該怎麼排，後來發現參考樣板的方式，利用dataset的方式...

TerryYu ‧ 2020-09-25

1 Like 0 留言 3729 瀏覽

鐵人賽 Modern Web DAY 9

HTML 與 CSS 學習筆記系列第 9 篇

技術 Day09 - CSS (4) - 線條、容器、重置 CSS

線條 border：四周的框線，分別定義粗細、樣式、顏色，前後順序沒關係樣式：實心線 (solid)、虛線 (dashed)、點線 (dotted)...

hokou ‧ 2020-09-24

0 Like 0 留言 743 瀏覽

鐵人賽自我挑戰組 DAY 24

2020 iT邦幫忙鐵人賽網頁前端-刻意練習系列第 24 篇

技術 Day24 網頁前端-刻意練習(Off Canvas #3)

Day24 六角 Off Canvas #3 簡單小語沒想到OffCanvas練習了三篇，看到這個版覺得有趣，立馬又想寫一個，雖然有些效果不同但大部分應該是...

TerryYu ‧ 2020-09-24

1 Like 0 留言 1742 瀏覽

鐵人賽 Modern Web DAY 8

For 前端小幼苗的圖解筆記系列第 8 篇

技術 [HTML] 關於 HTML

HTML HTML (是簡稱所以大寫) HTML 是標記語言不是程式語言（標記 Markup、沒有程式邏輯) 超文本標記語言：重點是「標記」－把文件用標記標...

Eudora ‧ 2020-09-23

1 Like 0 留言 3559 瀏覽

鐵人賽 Modern Web DAY 8

HTML 與 CSS 學習筆記系列第 8 篇

技術 Day08 - CSS (3) - 選擇器、文字排版

選擇器補充另外 2 個選擇器 type selector (標籤選擇器)：Day07 Pseudo-classes (擬態選擇器)：Day07 desc...

hokou ‧ 2020-09-23

0 Like 0 留言 808 瀏覽

鐵人賽自我挑戰組 DAY 23

2020 iT邦幫忙鐵人賽網頁前端-刻意練習系列第 23 篇

技術 Day23 網頁前端-刻意練習(Off Canvas #2)

Day23 六角 Off Canvas #2 簡單小語 CodePen看看高手們的OffCanvas的模樣，一看到這個照片的樣板，就決定嘗試做做看了，做完發現...

TerryYu ‧ 2020-09-23

1 Like 0 留言 1433 瀏覽

鐵人賽 Modern Web DAY 7

HTML 與 CSS 學習筆記系列第 7 篇

技術 Day07 - CSS (2) - 選擇器、隨機假文

選擇器 (Selector) 似乎也稱為選取器，介紹幾個常用的選擇器標籤選擇器 type selector：又稱型態選取器，就是之前舉例時修改標籤的樣式...

hokou ‧ 2020-09-22

0 Like 0 留言 836 瀏覽

鐵人賽自我挑戰組 DAY 22

2020 iT邦幫忙鐵人賽網頁前端-刻意練習系列第 22 篇

技術 Day22 網頁前端-刻意練習(Off Canvas #1)

Day22 六角 Off Canvas #1 簡單小語選單選單選單，各式各樣，基礎練習不能少，每次在RWD時的menu轉換都是一種練習，掌握每個物件的位置及...

TerryYu ‧ 2020-09-22

1 Like 0 留言 1747 瀏覽

鐵人賽 Modern Web DAY 6

HTML 與 CSS 學習筆記系列第 6 篇

技術 Day06 - CSS (1) - Element、位置

開始之前先補充一下 Element (元素)的說明 Element (元素) Element：簡單說元素就是一個前後完整的標籤 + 內容的組合，如下會是一個段...

hokou ‧ 2020-09-21

0 Like 1 留言 1030 瀏覽

鐵人賽自我挑戰組 DAY 21

2020 iT邦幫忙鐵人賽網頁前端-刻意練習系列第 21 篇

技術 Day21 網頁前端-刻意練習(名片練習)

Day21 六角名片練習簡單小語一看到名片就想接著昨天的練習做結合，讓每點擊一次名片就會更換，而且職稱還越來越高呢，現在練習的問題在於配色，對於美籍顏色...

TerryYu ‧ 2020-09-21

1 Like 0 留言 2318 瀏覽

鐵人賽 Modern Web DAY 5

HTML 與 CSS 學習筆記系列第 5 篇

技術 Day05 - HTML (3) - 列表、a、img

列表清單 (List) List 標籤：主要分成 2 種，有順序和無順序的，清單內還可以再放其他清單 <ul>：代表無順序 (unordere...

hokou ‧ 2020-09-20

0 Like 0 留言 3349 瀏覽

鐵人賽 Modern Web DAY 7

前端開發 30 個問題系列第 7 篇

技術 CSS Specificity / 權重

前言2020 秋天，我將用 30 天的時間，來嘗試回答和網路前端開發相關的 30 個問題。30 天無法一網打盡浩瀚的前端知識，有些問題可能對有些讀者來說相對簡...

TD ‧ 2020-09-20 ‧團隊Outcome First

0 Like 0 留言 809 瀏覽

鐵人賽自我挑戰組 DAY 20

2020 iT邦幫忙鐵人賽網頁前端-刻意練習系列第 20 篇

技術 Day20 網頁前端-刻意練習(Flex時光屋#2)

Day20 六角 Flex時光屋#2 簡單小語自己切了這個版，才發現原來Bootstrap真的很好用，觸發的事件自己寫過才知道，要如何去撰寫，要如何設計架構...

TerryYu ‧ 2020-09-20

1 Like 0 留言 3253 瀏覽

鐵人賽 Modern Web DAY 4

讓0基礎的你也能製作簡單wordpress主題系列第 4 篇

技術【Day 4】Html基本結構大分析，讓新手的你也能簡單了解（後篇）

昨天我們大致上地說了<!DOCTYPE html>，<html></html>，<head></head&...

thewayeasy ‧ 2020-09-19