iT邦幫忙

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

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

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

鐵人賽 Modern Web DAY 15

技術 Day 15:Animation 組件實作

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

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

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

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

鐵人賽 自我挑戰組 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 15

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

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

鐵人賽 自我挑戰組 DAY 22

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

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

鐵人賽 自我挑戰組 DAY 23

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

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

鐵人賽 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
從麻瓜變成前端魔法師 系列 第 13

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

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

鐵人賽 Modern Web DAY 18

技術 Day 18 - 開發小知識(二) : 切版學習之路、實作精進切版

Day 18 - 開發小知識(二) : 切版學習之路、實作精進切版 每日一談 嗨,大家好 ! 我是阿蘇今天是 Day17 , 前面的切版實作技巧分享差不多了,...

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

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

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

鐵人賽 Modern Web DAY 14

技術 Day 14:Typing Effect 組件實作

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

鐵人賽 自我挑戰組 DAY 13

技術 Day 13 background & border

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

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

技術 正式進入網頁前的起步走【Flexbox】

Flexbox翻成中文又叫做彈性盒子可以想像它是一個橡膠盒子能屈能伸非常有彈性,在之後會介紹到RWD它可是佔了一席之地呢~ Flexbox 的架構 Flexbo...

鐵人賽 自我挑戰組 DAY 22

技術 Day 22 Side Project : Hoverboard 面板

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

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

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

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

鐵人賽 Modern Web DAY 14

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

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

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

技術 Day12【從麻瓜變成前端魔法師】display: flex;

設定 display: flex; 以後,其下的 子元素 會 橫向排列 。 實作並介紹 justify-content 屬性(flex 元素與主軸對齊),值包...

鐵人賽 自我挑戰組 DAY 20

技術 [Day 20] Elastic: 彈跳球今天彈性放假

人與人之間都是具有彈性的,好人就會被凹一下(='X'=),同事:「诶你用完囉,今天進度幫我一下好不好~」今天我們來實作Day #18 Elastic Code...

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

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

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

鐵人賽 自我挑戰組 DAY 13

技術 Day 13:Vim 學習筆記

一、前言 其實,我也不知道自己怎麼會想加入這個主題,只是有點想要學習 Vim 的基本操作,順便紀錄一下學過的操作方法,現階段我也沒有想要背任何的指令或是快捷鍵...

鐵人賽 自我挑戰組 DAY 12

技術 Day 12 CSS text styling

前言 進入CSS講了這麼多選擇器,終於來到文字的設計啦! 之前在學校做報告時候,常常會使用文件裡面編輯文字,可能這個字體要更改成微軟正黑體,又或是字體的大小需要...

鐵人賽 Modern Web DAY 13

技術 【Day13】圖片 - 圖片的最大寬度

情境 我們先前也提到一些圖片處理的相關防禦性 CSS,例如關於圖片比例的 object-fit 等等。這些屬性能夠幫助我們在圖片容器改變的時候,防止圖片的比例變...

技術 多筆資料列印如何印在不同頁?

情況: 實作列印功能時,資料有多筆,右鍵列印要把每一筆都印在不同頁 解法: 在每一筆想要獨立列印的部份加上 css page-break-after: alwa...

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

技術 小白網頁設計練成記-DAY27-float浮動

float浮動屬性,通常會用在文繞圖的場景上,而常見值有:none / left / right 宣告的方式: wrapper{ float:left;...

鐵人賽 Modern Web DAY 12

技術 Day12 - 偽裝(上) (table,虛擬類別;偽類)

資產負債表 表格元素 <table> HTML自帶製作表格或報表專用的標籤,這裡簡單介紹table中標籤代表的意思: <table>...