iT邦幫忙

css相關文章
共有 1576 則文章
鐵人賽 自我挑戰組 DAY 23

技術 [Day 23] Pac-Man: パックマン小精靈

相信大家在小時候,應該多少玩過小精靈(Pac-Man)的遊戲,就是走在迷宮中吃豆子逃避幽靈,努力存活下去的遊戲。今天我們就來實作Day #21 Pac-Man...

鐵人賽 自我挑戰組 DAY 16

技術 Day 16:Gulp 學習筆記

一、前言 Gulp 是工作流程自動化的工具,可以幫我們處理一些需要重複執行的指令,像這類繁瑣的工作,可以交給 Gulp 來處理,在初學 Gulp 時,可以直接...

鐵人賽 自我挑戰組 DAY 15
CSS甜點烘焙店 系列 第 15

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

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

鐵人賽 自我挑戰組 DAY 15

技術 Day 15 Position 定位

前言 家裡每個物品都有自己的定位,所以前面講了這麼多設計框架背景等等的,接下來家具等等的要放在哪就很重要了,總不可能鍋子放房間或是枕頭棉被放廚房吧(當然這樣放真...

鐵人賽 自我挑戰組 DAY 28
小白網頁設計練成記 系列 第 30

技術 小白網頁設計練成記-DAY30-淺談box-sizing

我們最常見到要設定一個contaner的padding時,會發現該物件會變大,所以這時候我們就可以使用一個屬性box-sizing:border-box,該物件...

鐵人賽 Modern Web DAY 15

技術 Day 15 - 切版進階技巧(一) : CSS進階、CSS動畫、偽元素

Day 15 - 切版進階技巧(一) : CSS進階、CSS動畫、偽元素 每日一談 嗨,大家好 ! 我是阿蘇今天是Day15 , 不知不覺寫到了15天,不曉得...

鐵人賽 Modern Web DAY 16

技術 【Day16】滾動條 - 避免滾動穿透

情境 有時候我們的畫面會需要用到如下圖的 Modal 彈窗: 這樣的 Modal 彈窗,他的內容有可能是針對某個地方的額外說明,因此這個說明也有可能會需要詳細...

鐵人賽 自我挑戰組 DAY 28
小白網頁設計練成記 系列 第 29

技術 小白網頁設計練成記-DAY29-淺談width及height的特性

width 及 hight 是css裏頭做常出現的屬性,幾乎每個物件都會用到,但是身為小白的我們卻很難把他用好,導致出現跑版的狀況,為了我們小白能夠理解他們的常...

鐵人賽 Modern Web DAY 14

技術 Day14 - 棲位(上) (position)

仿畢卡索畫作 任務開始出現稀奇古怪的設定,連畢卡索的畫都出來了,看的出來上面是三個人在表演樂器嗎!一起努力完成吧! 定位 (position) 在屋子中等待爺...

鐵人賽 自我挑戰組 DAY 23

技術 Day 23 Side Project : Verify Account UI 帳戶驗證介面

今天要來做的是很常見的用戶驗證介面 超白話畫面和功能拆解 當輸入一個數字後,便會自動跳到下一個輸入框 可以按backspace 按鍵去修改前面的數字 運...

鐵人賽 自我挑戰組 DAY 15

技術 Day 15:偽元素與偽類

組件實作 : Demo 一、前言 在寫某些專案或者是練習,時不時會看到::before、::after這類元素的用法,在第一次接觸時,總是會感到困惑,不清...

鐵人賽 自我挑戰組 DAY 22

技術 [Day 22] Send Mail: 您的一封來信

在製作個人網頁時,通常會有一個contactme(與我聯絡)的表格,這時候,我們就可以想想看怎麼美化我們的送信動畫~今天我們來實作Day #20 Send Ma...

鐵人賽 Modern Web DAY 14

技術 真的好想離開 Vue 3 新手村 - Day 14: style scoped 原理與特殊選擇器 :deep()&:slotted()

Outline <style scoped> 的作用方式 突破 <style scoped> 的特殊選擇器a. 深層選擇器 (Dee...

鐵人賽 自我挑戰組 DAY 14
CSS甜點烘焙店 系列 第 14

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

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

鐵人賽 Modern Web DAY 15

技術 Day 15:Animation 組件實作

組件實作 : Demo 一、前言 Animation 動畫是網頁中不可或缺的重要元素,它能夠為網頁帶來生命力,讓整個網頁「活了起來」,在本篇中介紹幾個語法...

鐵人賽 自我挑戰組 DAY 14

技術 Day 14 Box Model

####前言 All html elements are boxes!(with width and height) html版面就像是用一個個盒子組成的,那整...

鐵人賽 Modern Web DAY 18

技術 [DAY18]在React中使用CSS!

React是前端很重要的框架之一,今天就要來介紹我們在React中要如何使用CSS來增加我們網頁的豐富度。 首先,從最簡單的改顏色開始,想必有學過CSS的大家應...

鐵人賽 Modern Web DAY 14

技術 Day14 - 切版排版技巧(二) : Width、格線系統(Bs)

Day 14 - 切版排版技巧(二) : Width、格線系統(Bs) 每日一談 嗨,大家好 ! 我是阿蘇今天是Day14, 今天繼續談切版排版技巧,除了fl...

鐵人賽 Modern Web DAY 15

技術 【Day15】滾動條 - 保留滾動條的空間

情境 當我們內容超出頁面的時候,我們會設置滾動條。上個單元中,我們介紹了使用 auto 來設置,避免不需要的時候還出現滾動條: .card { overfl...

鐵人賽 影片教學 DAY 13
從麻瓜變成前端魔法師 系列 第 13

技術 Day13【從麻瓜變成前端魔法師】CSS flex 排列實作

我們來做下圖的小卡片: 並補充說明 HTML 的 影片 標籤 及 清單 標籤。 清單分兩種:無序清單(unordered list):使用 <ul&gt...

鐵人賽 自我挑戰組 DAY 22

技術 Day 22 Side Project : Hoverboard 面板

今天要來做的是由多個正方形所組成的hover面板 超白話畫面和功能拆解 面板主要由多個小正方形所組成 當滑鼠經過正方形,就會產生不同的顏色,離開正方形顏色...

鐵人賽 Modern Web DAY 13

技術 Day13 - 偽裝(下) (屬性選擇器,偽類選擇器)

資產負債表 養分篇中提到了CSS選擇器包含:通用選擇器 標籤(元素)選擇器 類別選擇器 ID選擇器;偽裝(上)篇介紹虛擬類別中的狀態選擇器(特殊狀態下才被套用)...

鐵人賽 自我挑戰組 DAY 28
小白網頁設計練成記 系列 第 28

技術 小白網頁設計練成記-DAY28-淺談margin及padding的特性

我們在設計版面的時候,客戶常常要求這個圖片要上面一點還是下面一點等等,都是要設置物件margin和padding,margin 與 padding 分別控制物件...

鐵人賽 自我挑戰組 DAY 14

技術 Day 14:JS ES6 學習筆記

組件實作 : Demo 一、前言 關於 JavaScript 的故事其實是這樣的:「JavaScript 誕生於 1995 年的景網通訊(Netscape...

鐵人賽 自我挑戰組 DAY 21

技術 [Day 21] Slider with Radio Button: 三點換頁

在我們瀏覽網站時,可能會看到購物網站、風景網站等等使用slider來切換圖片,最常見的應該就是三個小點~今天我們就來實作Day #19 Slider with...

鐵人賽 自我挑戰組 DAY 13
CSS甜點烘焙店 系列 第 13

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

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

鐵人賽 自我挑戰組 DAY 13

技術 Day 13 background & border

前言 文字樣式設計變化之後那可以試試看更改背景還有框線設計 background color / image 背景顏色 / 圖片 Background-siz...

鐵人賽 Modern Web DAY 14

技術 Day 14:Typing Effect 組件實作

組件實作:Demo 一、前言 Typing Effect 是一種好用的文字效果,看似簡單的語法下,其實藏著一些不太好理解的概念,例如 CSS 的 Anim...

鐵人賽 Modern Web DAY 15
手把手web初學者 系列 第 15

技術 用CSS做出骰子【CSS 3D動畫實作篇】

首先要先把六個正方形放入 "space" 中,並寫上 1~6 點的符號 <body> <div class=&qu...

鐵人賽 Modern Web DAY 14

技術 【Day14】滾動條 - 僅在需要時才顯示滾動條

情境 今天我們來討論一個卡片容器的例子: 當內容在一般裝況下,我們不會需要滾動條,但是當內容長度過多時,我們會需要滾動調,讓我們在不改變卡片容器大小的狀況下,...