iT邦幫忙

pug相關文章
共有 42 則文章
0 Like 0 留言 382 瀏覽
鐵人賽 SideProject30 DAY 21
用 Web Serial/Bluetooth 來控制 ChameleonUltra 硬體 系列 第 21 篇

技術 Day 21 透過 pug 建立開發測試用網頁

Day 21 透過 pug 建立開發測試用網頁 pug 這個 HTML 樣板引擎是 Express.js 預設的樣板引擎，但它也可以單獨使用，由於筆者很習慣使用...

戴均民 ‧ 2023-10-05
0 Like 0 留言 1037 瀏覽
鐵人賽 自我挑戰組 DAY 30
CSS甜點烘焙店 系列 第 30 篇

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

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

Isha Wang ‧ 2022-10-15
0 Like 0 留言 772 瀏覽
鐵人賽 自我挑戰組 DAY 29
CSS甜點烘焙店 系列 第 29 篇

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

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

Isha Wang ‧ 2022-10-14
1 Like 0 留言 1158 瀏覽
鐵人賽 自我挑戰組 DAY 28
CSS甜點烘焙店 系列 第 28 篇

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

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

Isha Wang ‧ 2022-10-13
0 Like 0 留言 776 瀏覽
鐵人賽 自我挑戰組 DAY 27
CSS甜點烘焙店 系列 第 27 篇

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

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

Isha Wang ‧ 2022-10-12
0 Like 0 留言 497 瀏覽
鐵人賽 自我挑戰組 DAY 26
CSS甜點烘焙店 系列 第 26 篇

技術 喵喵~鎮店【店貓】來了

您好，歡迎光臨CSS甜點烘焙店 今天邀請了一位貓咪，來當鎮店店貓 Html架構如下 .cat .ear .eye .mouth .body .tail...

Isha Wang ‧ 2022-10-11
0 Like 0 留言 584 瀏覽
鐵人賽 自我挑戰組 DAY 25
CSS甜點烘焙店 系列 第 25 篇

技術 box-shadow用途廣，【雲朵】繪製多變化

您好，歡迎光臨CSS甜點烘焙店 今天我們來加上幾朵飄飄雲 Html架構如下 .all .sky .cloud.left .cloud.right...

Isha Wang ‧ 2022-10-10
0 Like 0 留言 856 瀏覽
鐵人賽 自我挑戰組 DAY 24
CSS甜點烘焙店 系列 第 24 篇

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

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

Isha Wang ‧ 2022-10-09
0 Like 0 留言 976 瀏覽
鐵人賽 自我挑戰組 DAY 23
CSS甜點烘焙店 系列 第 23 篇

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

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

Isha Wang ‧ 2022-10-08
0 Like 0 留言 760 瀏覽
鐵人賽 自我挑戰組 DAY 22
CSS甜點烘焙店 系列 第 22 篇

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

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

Isha Wang ‧ 2022-10-07
0 Like 0 留言 614 瀏覽
鐵人賽 自我挑戰組 DAY 21
CSS甜點烘焙店 系列 第 21 篇

技術 是時候該擺一攤珍珠奶茶了，box-shadow用好用滿、簡單複製物件

您好，歡迎光臨CSS甜點烘焙店 店面在昨天已經大致完成，旁邊不如再來一個飲料攤位吧~ Html如下 .beverageStore .mid Bubble Te...

Isha Wang ‧ 2022-10-06
0 Like 0 留言 679 瀏覽
鐵人賽 自我挑戰組 DAY 20
CSS甜點烘焙店 系列 第 20 篇

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

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

Isha Wang ‧ 2022-10-05
0 Like 0 留言 625 瀏覽
鐵人賽 自我挑戰組 DAY 19
CSS甜點烘焙店 系列 第 19 篇

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

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

Isha Wang ‧ 2022-10-04
0 Like 1 留言 802 瀏覽
鐵人賽 自我挑戰組 DAY 18
CSS甜點烘焙店 系列 第 18 篇

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

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

Isha Wang ‧ 2022-10-03
0 Like 0 留言 510 瀏覽
鐵人賽 自我挑戰組 DAY 17
CSS甜點烘焙店 系列 第 17 篇

技術 可以遮風擋雨囉~【屋頂招牌及遮陽棚】，善用background來複製圓形

您好，歡迎光臨CSS甜點烘焙店 今天要施作屋頂招牌及遮陽棚的部份 續上一集的架構再往下新增 .all .store .awning .s...

Isha Wang ‧ 2022-10-02
1 Like 0 留言 782 瀏覽
鐵人賽 自我挑戰組 DAY 16
CSS甜點烘焙店 系列 第 16 篇

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

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

Isha Wang ‧ 2022-10-01
0 Like 0 留言 686 瀏覽
鐵人賽 自我挑戰組 DAY 15
CSS甜點烘焙店 系列 第 15 篇

技術 【珍珠鮮奶茶】不可不知的perspective透視技巧，畫完好想喝一口

您好，歡迎光臨CSS甜點烘焙店 今天上架的是珍珠鮮奶茶 珍珠鮮奶茶主要分成杯子、圓形標籤、珍珠及吸管Html結構如下： .bubbleTea .cup ....

Isha Wang ‧ 2022-09-30
0 Like 0 留言 816 瀏覽
鐵人賽 自我挑戰組 DAY 14
CSS甜點烘焙店 系列 第 14 篇

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

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

Isha Wang ‧ 2022-09-29
0 Like 0 留言 626 瀏覽
鐵人賽 自我挑戰組 DAY 13
CSS甜點烘焙店 系列 第 13 篇

技術 【草莓塔】你知道background就可以做塔杯嗎？

您好，歡迎光臨CSS甜點烘焙店 今天上架的是草莓塔 餅乾主要分成3個部份，塔、乳酪餡及草莓Html結構如下： .cream .main .berry...

Isha Wang ‧ 2022-09-28
1 Like 1 留言 489 瀏覽
鐵人賽 自我挑戰組 DAY 12
CSS甜點烘焙店 系列 第 12 篇

技術 【雙莓閃電泡芙】如何用2個圓做出藍莓？

您好，歡迎光臨CSS甜點烘焙店 今天上架的是雙莓閃電泡芙 這次的元素比較複雜，架構也相對多一些，Html結構如下： .eclair .main/*泡芙*/...

Isha Wang ‧ 2022-09-27
0 Like 0 留言 608 瀏覽
鐵人賽 自我挑戰組 DAY 11
CSS甜點烘焙店 系列 第 11 篇

技術 【草莓餡愛心餅乾】一次就上手的愛心，其實很簡單喔~

您好，歡迎光臨CSS甜點烘焙店 今天上架的是草莓餡愛心餅乾 餅乾主要分成3個部份，餅乾體、愛心果醬及果醬厚度Html結構如下： .cookie .mai...

Isha Wang ‧ 2022-09-26
0 Like 0 留言 505 瀏覽
鐵人賽 自我挑戰組 DAY 10
CSS甜點烘焙店 系列 第 10 篇

技術 【焦糖布丁】這不是兔子耳朵啦~流動糖漿的眉眉角角

您好，歡迎光臨CSS甜點烘焙店 今天上架的是焦糖布丁 焦糖布丁分成以下幾個架構，頂層光暈、中層糖漿、布丁、下層糖漿，以及盤子Html結構如下： .pudding...

Isha Wang ‧ 2022-09-25
0 Like 0 留言 567 瀏覽
鐵人賽 自我挑戰組 DAY 9
CSS甜點烘焙店 系列 第 9 篇

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

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

Isha Wang ‧ 2022-09-24
1 Like 0 留言 773 瀏覽
鐵人賽 自我挑戰組 DAY 8
CSS甜點烘焙店 系列 第 8 篇

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

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

Isha Wang ‧ 2022-09-23
0 Like 0 留言 819 瀏覽
鐵人賽 自我挑戰組 DAY 7
CSS甜點烘焙店 系列 第 7 篇

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

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

Isha Wang ‧ 2022-09-22
1 Like 0 留言 628 瀏覽
鐵人賽 自我挑戰組 DAY 6
CSS甜點烘焙店 系列 第 6 篇

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

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

Isha Wang ‧ 2022-09-21
1 Like 1 留言 517 瀏覽
鐵人賽 自我挑戰組 DAY 5
CSS甜點烘焙店 系列 第 5 篇

技術 【草莓奶油小蛋糕】不得不說box-shadow真的好用無極限

您好，歡迎光臨CSS甜點烘焙店 今天上架的是草莓奶油小蛋糕 蛋糕主要分成3個部份，上層草莓、中層蛋糕體，以及下層餅乾Html結構如下： .strawberryC...

Isha Wang ‧ 2022-09-20
0 Like 0 留言 570 瀏覽
鐵人賽 自我挑戰組 DAY 4
CSS甜點烘焙店 系列 第 4 篇

技術 【銅鑼燒】多啦A夢最愛的甜點，只用了3層架構就做完

您好，歡迎光臨CSS甜點烘焙店 今天上架的是銅鑼燒 銅鑼燒主要分成3個部份，上層麵皮、中層紅豆餡、下層麵皮，看似這麼多層的層次，其實只要2層架構就可以完成喔～不...

Isha Wang ‧ 2022-09-19
0 Like 1 留言 878 瀏覽
鐵人賽 自我挑戰組 DAY 3
CSS甜點烘焙店 系列 第 3 篇

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

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

Isha Wang ‧ 2022-09-18
0 Like 0 留言 630 瀏覽
鐵人賽 自我挑戰組 DAY 2
CSS甜點烘焙店 系列 第 2 篇

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

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

Isha Wang ‧ 2022-09-17
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22195 篇
完賽人數
600 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙