iT邦幫忙

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

技術 Day 13 Side Project : Drink Water 沒事多喝水

今天要來做的主題還蠻有趣滴~ 如圖中所示,我們的目標水量是要把整個大杯子填滿(2L),點選下方的小杯子(250ml),可以把水加入大杯子中,並且顯示目前水量以...

鐵人賽 Modern Web DAY 4

技術 Day4 - 色彩 (color,gradient)

CSS顏色標示器 顏色(color) 關於色彩,讓我想起電視機收播時的畫面,在昏暗的客廳之中,唯一的光源僅來自於厚重的映像管螢幕,紅黃藍綠的色塊打在爺爺的臉上...

鐵人賽 自我挑戰組 DAY 12

技術 [Day 12] Walking Boots: 行走的紅鞋子~咯噔咯噔

說時遲,那時快,身後傳來咯噔咯噔的腳步聲,我一回頭不見人影,暗自低喃:「奇也怪哉!」,瞥向一旁卻見一雙紅靴子一起一落,從我身邊走過...那是何人? 今天我們來實...

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

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

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

鐵人賽 自我挑戰組 DAY 5

技術 Day 05:寫作帶給我的人生意義

一、前言 從不會寫文章,到開始經營 Blog 這個過程,經歷了一些波折,從最早「無名小站」(時代的眼淚)開始經營第一個 Blog 到租借虛擬主機架設 Word...

鐵人賽 Modern Web DAY 5

技術 Day 05:Slideshow 組件實作

組件實作 : Demo 一、前言 slideshow 幻燈片組件可以為網頁帶來動態的效果,與使用者產生互動,我們用 6 張圖片組成一個輪播視窗。你除了可以...

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

技術 小白網頁設計練成記-DAY19-選取器-符號

今天我們來認識六個符號,可以讓你的選取器有更多變化,以下是,/空格/ + / * / ~的說明: 逗號 想成[或]的意思 換言之是可以有多個元素選取器一起編輯,...

鐵人賽 Modern Web DAY 4

技術 透過 BEM、SMACSS、OOCSS、Atomic CSS 簡化樣式開發流程、減少維護成本 (4)

本篇文章將提到怎麼透過 BEM、SMACSS、OOCSS、Atomic CSS 的特性來: 縮短開發時間 減少需維護的程式碼 結構與樣式 CSS 選擇器和規...

鐵人賽 Modern Web DAY 5

技術 【Day05】內容長度 - 類別標籤

情境 如下圖,網站中有這樣一塊又一塊的圖形設計,稱之為「卡片」。近年來 卡片式設計 在網站上越來越常見。 矩形的卡片設計能夠順利的與不同視窗大小做搭配,因此無論...

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

技術 初探CSS

CSS的全名是 Cascading Style Sheets 階層式樣式表CSS屬性非常非常多,我們目前只需去認識一些常用與實用的有遇到想用其他特殊的風格,再去...

鐵人賽 自我挑戰組 DAY 12

技術 Day 12 Side Project : Dad Jokes 爸爸的冷笑話

今天要來做的賽project叫「爸爸的冷笑話」,需要對API有基本的認識,因為這篇要串接外部API來取得冷笑話集,並使用postman來進行測試,若要下載po...

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

技術 小白網頁設計練成記-DAY18-CSS選取器-屬性/值

我們先來看一張圖,了解一下css的基本寫法: 在大括號左邊的selector是指在頁面上,找到符合選取器的元素,這邊是h1標籤,找到後就套用大括號裡所寫的cs...

鐵人賽 Modern Web DAY 3

技術 Day3 - 點餐 (font,盒模型)

咖啡店菜單 樣式 (style) 階層樣式表 (Cascading Stylesheets;CSS)可以讓你在HTML文件中的元素上套用不同的頁面樣式(sty...

鐵人賽 自我挑戰組 DAY 11

技術 [Day 11] Watch: Watch me (Whip/Nae Nae)

Watch me whip(whip), watch me Nae Nae ~ 早上起來洗臉刷牙,戴上手錶錢包鑰匙手機,出門去玩囉~今天我們來實作Day #10...

鐵人賽 自我挑戰組 DAY 4

技術 Day 04:論如何學習

一、前言 你是不是曾經有過一種經驗,就是當你努力的讀書,努力的學習,網路上查了一堆資料,也寫了一堆筆記,記在腦袋裡面的東西過了幾天之後就全部遺忘,彷彿不存在過...

鐵人賽 Modern Web DAY 4

技術 Day 04:多媒體資源匯入

一、前言 在製作網頁時,我們會需要一些文字或是圖片來裝飾我們的頁面,這些資料可能來自設計師或是後端工程師。但是我們在前端製作頁面時,沒有這些文字與圖片資源時該...

鐵人賽 Modern Web DAY 4

技術 【Day04】間距 - 元件間的間距

間距、間距、間距! 情境 在討論今天的主題之前,我們先來看看下面這張圖: 第一張圖的情境,有可能是在介面上我們試圖要做一些不可逆的操作,例如你要去刪除某篇文章...

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

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

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

鐵人賽 Modern Web DAY 3

技術 CSS 易容術入門 (3)

CSS 層疊樣式表 CSS (Cascading Style Sheets) 層疊樣式表,不像 HTML 一樣是標記語言,也不是標準的程式語言,但在 SCSS、...

鐵人賽 自我挑戰組 DAY 11

技術 Day 11 Side Project : Event KeyCodes 鍵盤輸入代碼

今天要做的是鍵盤代碼轉換器,隨著鍵盤的輸入值不一樣,會動態顯示它的code、key、keyCode這些資訊,相信大家可能在學javaScript的過程中也會用過...

鐵人賽 自我挑戰組 DAY 10

技術 [Day 10] Rainy Night: 一個人度過多少寂寞的雨夜?

Hello, Gang! It's Thibe! 雖然今天天氣很好,但在寂寞雨夜的時候,還是有Thibe的文章陪著你的,我們就來實作Day #9吧~ Rainy...

鐵人賽 自我挑戰組 DAY 3

技術 Day 03:提高 2 倍工作效率的方法

一、 前言 有時候覺得自己明明很努力做事,可是總是覺得好像事情一直都無法在規劃的時間內完成。發現自己在訂定目標時,除了會加入一堆多餘的步驟,以及使用了錯誤的方...

鐵人賽 Modern Web DAY 3

技術 Day 03:Navbar 組件實作

組件實作 : Demo 一、前言 Navbar 導覽列是每個網站幾乎都會有的組件之一,就是網頁最上面的那一條橫幅,Navbar 的實作上,我們專注在兩個重...

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

技術 小白網頁設計練成記-DAY17-CSS的優先權

在寫CSS的時候,我們有不同的撰寫方式比如行內套用以及嵌入套用(更多套用的說明請看這:https://ithelp.ithome.com.tw/articles...

鐵人賽 Modern Web DAY 3

技術 [擊敗前端面試大作戰] HTML 和 CSS

今天是擊敗前端面試大作戰正文的第一篇!我們就先來點輕鬆的吧,今天會討論文章的寫作方式會是以面試問答為主,歡迎讀者先把回答遮住試著答看看,再看回答!。 這一篇文...

鐵人賽 Modern Web DAY 2

技術 第 2 幅 - 圖形入門:心裡有坐標,幾何自然來

相信每個人的童年都有一個幾何積木玩具,今天我們就是要重返童年,一起用 Canvas 完成一些常用的幾何圖形! 準備好畫布 剛開始就先不用框架,以 Vanilla...

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

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

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

鐵人賽 Modern Web DAY 3

技術 【Day03】間距 - 標題與圖示

情境 今天我們來討論一個常見的設計,標題與圖示。下面這是一張很常見的卡片式設計,看起來很正常不是嗎? 我們在生活當中很常遇到類似這樣的設計,就是在一個卡片式的...

鐵人賽 自我挑戰組 DAY 10

技術 Day 10 Side Project : Sound Board 聲音操控版

今天要來做聲音操控版,點按圖中的每個按鈕,就會播放音檔,而當我同時又點了別的按鈕,就會暫停原本的音檔,播放別的音檔,蠻有趣的 ヽ(✿゚▽゚)ノ 程式碼其實不...

技術 2022 鐵人賽|Day1 報名失敗,還是要開賽吧!

背景脈絡 在社群看到好多前輩於iT參加鐵人賽的通知,來到鐵人賽首頁上面寫著「9/16最後開賽日,別忘了開賽喔!」,於是在今天決定要開賽後發現...要先報名,可報...