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

3 Like 1 留言 5802 瀏覽

鐵人賽 Modern Web DAY 5

用 Nuxt.js 2.0, Vuetify, Storybook, Firebase 建一個 Blog 系列第 5 篇

技術 #5: Boilerplate(pug & stylus & 其他基礎設定)

在簡單介紹完 Nuxt.js 之後，今天會接著將 Day02 的 002-create-nuxt-app branch 接續開發下去，目標是加入: pug s...

HunterLiu ‧ 2018-10-12 ‧團隊武裝狗狗

0 Like 0 留言 3353 瀏覽

技術 [Vue,組件] 如何由父組件傳值（Value）給子組件

以下會用到 Pug 套件，請去安裝 pug套件，可參考：從頭開始用 Laravel 來做CRUD -12- 架設 - npm - pug 重點： pr...

雲橙雨林 ‧ 2018-10-23

0 Like 0 留言 2502 瀏覽

技術 [Vue,組件] 如何由子組件按鈕去執行父組件的方法 (methods)

以下會用到 Pug 套件，請去安裝 pug套件，可參考：從頭開始用 Laravel 來做CRUD -12- 架設 - npm - pug 當你開始使用...

雲橙雨林 ‧ 2018-10-21

0 Like 0 留言 2396 瀏覽

技術從頭開始用 Laravel 來做CRUD -12- 架設 - npm - pug

目前環境 Laravel：5.7 資料庫：MariaDB 說明所謂的CRUD是指新增(Create)、讀取(Read)、更新(Update)、刪除(...

雲橙雨林 ‧ 2018-10-22

0 Like 0 留言 2259 瀏覽

技術 [Vue,組件] 如何由父組件按鈕去執行子組件的方法 (methods)

以下會用到 Pug 套件，請去安裝 pug套件，可參考：從頭開始用 Laravel 來做CRUD -12- 架設 - npm - pug 有時我們必需由...

雲橙雨林 ‧ 2018-10-22

0 Like 0 留言 2104 瀏覽

技術從頭開始用 Laravel 來做CRUD -16- 初始 - pug - pug 測試

目前環境 Laravel：5.7 資料庫：MariaDB 說明所謂的CRUD是指新增(Create)、讀取(Read)、更新(Update)、刪除(...

雲橙雨林 ‧ 2018-10-31

0 Like 0 留言 2010 瀏覽

鐵人賽 Modern Web DAY 18

初階 Rails 工程師的養成系列第 18 篇

技術 Day18. Slim & Pug - 縮排式的 html

由於可能很多人會不習慣縮排的寫法來寫html，然後在Day17以後的章節，漢漢老師會大量的使用縮排式的html，因而有這篇文章的誕生。 Pug 曾經有一段後端轉...

漢漢老師 ‧ 2021-09-18

0 Like 0 留言 1605 瀏覽

技術 pug 基礎介紹(1) DAY99

pug 前身就是 jade (改名而已) 這裡我們來看 pug 的基礎寫法 <!DOCTYPE html> html(lang="en&q...

皮傑先生 ‧ 2020-12-23

0 Like 0 留言 1252 瀏覽

技術 [Vue,組件] 如何由子組件傳值（Value）給父組件

以下會用到 Pug 套件，請去安裝 pug套件，可參考：從頭開始用 Laravel 來做CRUD -12- 架設 - npm - pug 這次來寫如...

雲橙雨林 ‧ 2018-10-25

1 Like 0 留言 1082 瀏覽

鐵人賽自我挑戰組 DAY 17

轉職道上的萌芽人生 − 自學程式開發ing 系列第 17 篇

技術 Day 17- 191003學習筆記 async、Pug、moment

接下來我們將繼續完成 Controller 的內容，賦予其真正的「動作指示」，來完成 request 的任務，並建立一個基本的 Template 告訴其該怎麼把...

杯 ‧ 2019-10-03

2 Like 0 留言 1038 瀏覽

技術 pug 基礎介紹(2) DAY100

Jade 匯入外部 JSON 資料內容這裡我們先自行新增2份 jaon檔 **menu.json** { "list":[{...

皮傑先生 ‧ 2020-12-24

1 Like 0 留言 909 瀏覽

鐵人賽自我挑戰組 DAY 28

CSS甜點烘焙店系列第 28 篇

技術 CSS Animation 你會用了嗎？【貓貓和樹懶】動給你看~

您好，歡迎光臨CSS甜點烘焙店今天要讓2隻吉祥物動起來~ 要使用到CSS Animation，做基礎的動畫的不複雜，只要有影格的觀念，不管過程要有幾格，甚至只...

Isha Wang ‧ 2022-10-13

0 Like 0 留言 832 瀏覽

鐵人賽自我挑戰組 DAY 30

CSS甜點烘焙店系列第 30 篇

技術 skewX來做【抖抖森林】-30天完賽！解放喔耶~

您好，歡迎光臨CSS甜點烘焙店今天終於是第30天了，就讓最後的小動畫來完結這一切吧~ 一、抖抖森林(.forest) 首先看一下原本.forest的設定 po...

Isha Wang ‧ 2022-10-15

1 Like 0 留言 760 瀏覽

鐵人賽自我挑戰組 DAY 1

CSS甜點烘焙店系列第 1 篇

技術 CSS甜點烘焙店-30天內容介紹

Hi，大家好我是Isha 這次藉由iT鐵人賽，想開一間甜點烘焙店，讓CSS不只是程式碼，而是可以帶著你發揮創意、實現夢想的藍圖。 30天的內容大致分為以下幾個...

Isha Wang ‧ 2022-09-16

0 Like 1 留言 729 瀏覽

鐵人賽自我挑戰組 DAY 3

CSS甜點烘焙店系列第 3 篇

技術【貝果】這是...?!好啦~這次最滿意的應該是芝麻的部份惹

您好，歡迎光臨CSS甜點烘焙店今天上架的是貝果主要分成2部份，麵包體和上方的黑白芝麻Html架構如下： .bagel .black-sesame .wh...

Isha Wang ‧ 2022-09-18

0 Like 0 留言 703 瀏覽

鐵人賽自我挑戰組 DAY 24

CSS甜點烘焙店系列第 24 篇

技術你的店面想開在哪裡？【冰棒森林】用perspective + rotateX就可以做到

您好，歡迎光臨CSS甜點烘焙店今天已經是挑戰第 24 天，話說從原本生一篇文章出來，就像便祕一樣的困難，到現在連續24天，天天都要擠一樣成果，雖然自己知道有些...

Isha Wang ‧ 2022-10-09

0 Like 0 留言 678 瀏覽

鐵人賽自我挑戰組 DAY 23

CSS甜點烘焙店系列第 23 篇

技術 skew()這樣用！左傾右傾來做【活動招牌架】

您好，歡迎光臨CSS甜點烘焙店有了店面和飲料攤，我們要再來做一個活動招牌架 Html架構如下 .signboardStand .front .back...

Isha Wang ‧ 2022-10-08

0 Like 0 留言 676 瀏覽

鐵人賽自我挑戰組 DAY 7

CSS甜點烘焙店系列第 7 篇

技術【蜂蜜奶油鬆餅】猜猜看奶油的3面透視如何做的？

您好，歡迎光臨CSS甜點烘焙店今天上架的是蜂蜜奶油鬆餅蛋糕主要分成4個部份，上層奶油、蛋糕體、蜂蜜，以及盤子Html結構如下： .pancake .but...

Isha Wang ‧ 2022-09-22

0 Like 1 留言 640 瀏覽

鐵人賽自我挑戰組 DAY 18

CSS甜點烘焙店系列第 18 篇

技術可愛的【馬卡龍小招牌】，善用偽元素::before與::after

您好，歡迎光臨CSS甜點烘焙店是的！就在昨日我確診了，自己發燒、喉嚨痛、全身酸痛之外，還要顧2隻小屁孩外加打理3餐，只能找空檔來完成文章，還好前幾日就有預先畫...

Isha Wang ‧ 2022-10-03

0 Like 0 留言 639 瀏覽

鐵人賽自我挑戰組 DAY 27

CSS甜點烘焙店系列第 27 篇

技術超萌【樹懶先生】，什麼都懶懶der~

您好，歡迎光臨CSS甜點烘焙店店裡已經有鎮店貓貓，今天要再邀請一位神祕嘉賓沒錯！就是樹懶先生 Html如下 .sloth .limbs.right.fr...

Isha Wang ‧ 2022-10-12

0 Like 0 留言 627 瀏覽

鐵人賽自我挑戰組 DAY 14

CSS甜點烘焙店系列第 14 篇

技術【甜甜圈】如何活用border-radius + box-shadow，做出繽紛巧克力米~

您好，歡迎光臨CSS甜點烘焙店今天上架的是甜甜圈甜甜圈主要分成3個部份，上層彩色糖霜、甜甜圈主體及中間洞孔Html結構如下： .donut .mid ....

Isha Wang ‧ 2022-09-29

1 Like 0 留言 622 瀏覽

鐵人賽自我挑戰組 DAY 16

CSS甜點烘焙店系列第 16 篇

技術終於要開店了~打造【外牆及大門】，box-shadow的inset與outset

您好，歡迎光臨CSS甜點烘焙店終於要開始打造我的甜點烘焙店了，前14天每日畫一甜點，都是上網搜尋各式點心，直接看著圖，用CSS把它畫出來。視覺上當然比不上手繪...

Isha Wang ‧ 2022-10-01

0 Like 0 留言 621 瀏覽

鐵人賽自我挑戰組 DAY 29

CSS甜點烘焙店系列第 29 篇

技術【甜點烘焙店】動起來！animation-delay幫你定好動畫出場順序

您好，歡迎光臨CSS甜點烘焙店一、店面出場(.store) 先設定好@keyframes，預設的效果是從天而降，以及有點彈跳的感覺，所以在rotateX做角度...

Isha Wang ‧ 2022-10-14

1 Like 0 留言 599 瀏覽

鐵人賽自我挑戰組 DAY 8

CSS甜點烘焙店系列第 8 篇

技術【芒果瑞士捲】製作透視好物！perspective + rotate真的很好用耶

您好，歡迎光臨CSS甜點烘焙店今天上架的是芒果瑞士捲瑞士捲主要分成3個部份，蛋糕體、蛋糕表皮，以及芒果鮮奶油內餡Html結構如下： .rollCake ....

Isha Wang ‧ 2022-09-23

0 Like 0 留言 538 瀏覽

鐵人賽自我挑戰組 DAY 20

CSS甜點烘焙店系列第 20 篇

技術新鮮出爐的甜點來囉~利用scale()快速將【櫥窗佈置】到位

您好，歡迎光臨CSS甜點烘焙店第2-15天畫的甜點們，終於要把它們擺上架了不過一次放進來的架構有點龐大，以下就以品項帶過，最後完成會釋出codepen讓大家參...

Isha Wang ‧ 2022-10-05

0 Like 0 留言 538 瀏覽

鐵人賽自我挑戰組 DAY 22

CSS甜點烘焙店系列第 22 篇

技術三角旗幟怎麼做？來看看【珍珠鮮奶茶】攤位擺設吧~

您好，歡迎光臨CSS甜點烘焙店今天繼續完成飲料攤的旗幟續上一集的架構 .beverageStore //略 .flag .arrow 我們要利用b...

Isha Wang ‧ 2022-10-07

0 Like 0 留言 520 瀏覽

鐵人賽自我挑戰組 DAY 19

CSS甜點烘焙店系列第 19 篇

技術店面的靈魂之【窗】，框、板、反光，2層搞定！

您好，歡迎光臨CSS甜點烘焙店今天體力恢復的還不錯，除了還是有劇咳，沒力氣吼小孩之外，其它還算安好我們就來開始店面的展示櫥窗吧~ Html部份，繼續在.al...

Isha Wang ‧ 2022-10-04

0 Like 0 留言 519 瀏覽

鐵人賽自我挑戰組 DAY 2

CSS甜點烘焙店系列第 2 篇

技術【巧克力切片蛋糕】簡單好用的clip-path，直接畫出你想要的形狀

您好，歡迎光臨CSS甜點烘焙店今天上架的是巧克力切片蛋糕蛋糕主要分成3個部份，上層巧克力、下層蛋糕體，以及巧克力上方的奶油Html結構如下： .chocol...

Isha Wang ‧ 2022-09-17

1 Like 0 留言 508 瀏覽

鐵人賽自我挑戰組 DAY 6

CSS甜點烘焙店系列第 6 篇

技術【千層年輪蛋糕】哇嗚，原來box-shadow還可以這樣用~

您好，歡迎光臨CSS甜點烘焙店今天上架的是千層年輪蛋糕蛋糕主要分成3個部份，上層年輪、中間空洞，以及蛋糕表皮Html結構如下： .baumkuchen ....

Isha Wang ‧ 2022-09-21

0 Like 0 留言 469 瀏覽

鐵人賽自我挑戰組 DAY 9

CSS甜點烘焙店系列第 9 篇

技術【馬卡龍】什麼！3層架構就做出馬卡龍，還有flex排的簡單九宮格喔

您好，歡迎光臨CSS甜點烘焙店今天上架的是馬卡龍馬卡龍主要分成3個部份，上層外殼、下層外殼，以及中層夾餡Html結構如下： .macaron .to...

Isha Wang ‧ 2022-09-24

技術 #5: Boilerplate(pug & stylus & 其他基礎設定)

技術 [Vue,組件] 如何由父組件傳值（Value）給子組件

技術 [Vue,組件] 如何由子組件按鈕去執行父組件的方法 (methods)

技術 從頭開始用 Laravel 來做CRUD -12- 架設 - npm - pug

技術 [Vue,組件] 如何由父組件按鈕去執行子組件的方法 (methods)

技術 從頭開始用 Laravel 來做CRUD -16- 初始 - pug - pug 測試

技術 Day18. Slim & Pug - 縮排式的 html

技術 pug 基礎介紹(1) DAY99

技術 [Vue,組件] 如何由子組件傳值（Value）給父組件

技術 Day 17- 191003學習筆記 async、Pug、moment

技術 pug 基礎介紹(2) DAY100

技術 CSS Animation 你會用了嗎？【貓貓和樹懶】動給你看~

技術 skewX來做【抖抖森林】-30天完賽！解放喔耶~

技術 CSS甜點烘焙店-30天內容介紹

技術 【貝果】這是...?!好啦~這次最滿意的應該是芝麻的部份惹

技術 你的店面想開在哪裡？【冰棒森林】用perspective + rotateX就可以做到

技術 skew()這樣用！左傾右傾來做【活動招牌架】

技術 【蜂蜜奶油鬆餅】猜猜看奶油的3面透視如何做的？

技術 可愛的【馬卡龍小招牌】，善用偽元素::before與::after

技術 超萌【樹懶先生】，什麼都懶懶der~

技術 【甜甜圈】如何活用border-radius + box-shadow，做出繽紛巧克力米~

技術 終於要開店了~打造【外牆及大門】，box-shadow的inset與outset

技術 【甜點烘焙店】動起來！animation-delay幫你定好動畫出場順序

技術 【芒果瑞士捲】製作透視好物！perspective + rotate真的很好用耶

技術 新鮮出爐的甜點來囉~利用scale()快速將【櫥窗佈置】到位

技術 三角旗幟怎麼做？來看看【珍珠鮮奶茶】攤位擺設吧~

技術 店面的靈魂之【窗】，框、板、反光，2層搞定！

技術 【巧克力切片蛋糕】簡單好用的clip-path，直接畫出你想要的形狀

技術 【千層年輪蛋糕】哇嗚，原來box-shadow還可以這樣用~

技術 【馬卡龍】什麼！3層架構就做出馬卡龍，還有flex排的簡單九宮格喔

標記使用者