iT邦幫忙

css教學相關文章
共有 403 則文章
鐵人賽 Modern Web DAY 9
打造你的第一個網站 系列 第 9

技術 第九天-CSS 留白

我們在style.css 中設定 邊寬的粗細、樣式及顏色,為的是讓我們在等一下的編排看清楚我們的選擇及調整。(*選擇器的意思是選擇所有的元素) * {...

鐵人賽 Modern Web DAY 5

技術 【Day05】前端撰寫(2)CSS選擇器

本篇文章中,將講述CSS的基本的使用方法。在此之前,我們要先了解甚麼是CSS? 什麼是CSS? CSS(層疊樣式表,Cascading Style Sheet...

鐵人賽 Modern Web DAY 5

技術 【DAY05】CSS(2)

上回提到如何與CSS語法,感受到有很多強大的美化功能~ 但其實光有CSS是不夠的,還要和HTML合作才能真正地用出來! 那如何與HTML合作呢?有三種常用的方法...

鐵人賽 Modern Web DAY 8
打造你的第一個網站 系列 第 8

技術 第八天 CSS優先順序

從昨天的文章我們可以知道,CSS的順序是由上往下,所以寫在最後面的會覆蓋過前面寫的。 另外,當我們的css內容越來越多的時候,我們可以透過Chrome檢查工具檢...

鐵人賽 Modern Web DAY 4

技術 【DAY04】CSS(1)

聊完HTML後,接下來是CSS的局啦 講到CSS,他是一種程式語言嗎?不是! 雖說是風格頁面語言(style sheet language),但其實是「階層樣式...

鐵人賽 Modern Web DAY 7
打造你的第一個網站 系列 第 7

技術 第七天 CSS選擇器介紹

什麼是CSS? CSS是Cascading Style Sheets的縮寫。簡單來說,CSS不可以單獨使用,但是,可以幫我們的HTML語法增加更多的花樣變化。...

鐵人賽 Modern Web DAY 6
打造你的第一個網站 系列 第 6

技術 第六天 CSS選擇器語法

從今天開始我們會開始進入的CSS的世界。各位可以先到我的GitHub裡面下載我的第一個網站-2範例,搭配文章一起服用。在我給的範例中,我設計了一個大的<d...

鐵人賽 Modern Web DAY 1

技術 #00 文章目錄 / 參賽前言 | Super Easy CSS

本系列同步發表於我的 Hashnode 部落格:Eva Chen | 網頁設計師下班後 (hashnode.dev) 參賽前言 本系列文章目標是學習 C...

技術 【前端動手玩創意】CSS-3D卡片翻轉效果(3) (今天難度頗高,想挑戰再進來!)

目錄 【前端動手玩創意】等待的轉圈圈效果 (1) 【前端動手玩創意】google五星評分的星星(2) 【前端動手玩創意】CSS-3D卡片翻轉效果(3) (今天難...

鐵人賽 Modern Web DAY 30

技術 [DAY30]網頁切版入門及版面實作_電子名片

電子名片 在這個範例中要練習電子名片的切版 整理幾個小重點如下方: 1.設定名片的寬高為390x240px,並導圓角15px,添加陰影box-shadow2.名...

鐵人賽 Modern Web DAY 29

技術 [DAY29]網頁切版入門及版面實作_聯絡表單

聯絡表單 在這個範例中要練習聯絡表單的切版 整理幾個小重點如下方: 1.將section設為滿版,添加背景色#f3c1c52.添加一個container,做為固...

鐵人賽 Modern Web DAY 28

技術 [DAY28]網頁切版入門及版面實作_導覽列

導覽列 在這個範例中要練習導覽列的切版 整理幾個小重點如下方: 1.將section設為滿版,添加背景色#FFEBF22.nav,做為固定欄寬1280px的區塊...

鐵人賽 Modern Web DAY 27

技術 [DAY27]網頁切版入門及版面實作_ 卡片版面7&漸層

卡片版面 在這個範例中要練習卡片版面的切版 整理幾個小重點如下方: 1.將section_card設為滿版2.添加一個container,做為固定欄寬1200p...

鐵人賽 Modern Web DAY 26

技術 [DAY26]網頁切版入門及版面實作_頁尾

頁尾 在這個範例中要練習頁尾的切版 整理幾個小重點如下方: 1.將footer_content設為滿版,添加背景色#f3c1c52.添加一個container,...

鐵人賽 Modern Web DAY 25

技術 [DAY25]網頁切版入門及版面實作_對話框&三角形

對話框&三角形 在這個範例中要練習對話框的接版,以及如何用css繪製出三角形 整理幾個重點: 1.將對話框dialog_box寬度設為960px,添加背...

鐵人賽 Modern Web DAY 24

技術 [DAY24]網頁切版入門及版面實作_ 序號項目

序號項目 在這個範例中要練習序號項目的切版 整理幾個小重點如下方: 1.font-size調整文字大小,font-weight調整文字厚度,line-heigh...

鐵人賽 Modern Web DAY 23

技術 [DAY23]網頁切版入門及版面實作_ 價格表

價格表 在這個範例中要練習價格表切版 整理幾個重點:1.將section_price設為滿版2.container,做為固定欄寬1200px的區塊,並設定dis...

鐵人賽 Modern Web DAY 22

技術 [DAY22]網頁切版入門及版面實作_ 圖文版面

圖文版面 在這個範例中要練習圖文版面的切版 整理幾個小重點如下方: 1.將section設為滿版2.添加一個container,做為固定欄寬1200px的區塊,...

鐵人賽 Modern Web DAY 21

技術 [DAY21]網頁切版入門及版面實作_ 卡片版面6

卡片版面6 在這個範例中要練習卡片版面的切版 整理幾個小重點如下方: 1.將section設為滿版,添加背景色#ffc6c62.container,做為固定欄寬...

鐵人賽 Modern Web DAY 20

技術 [DAY20]網頁切版入門及版面實作_ 卡片版面5

卡片版面5 在這個範例中要練習卡片版面的切版 整理幾個小重點如下方: 1.將section設為滿版2.添加一個container,做為固定欄寬1200px的區塊...

鐵人賽 Modern Web DAY 19

技術 [DAY19]網頁切版入門及版面實作_ 卡片版面4

卡片版面4 在這個範例中要練習卡片版面的切版 整理幾個小重點如下方: 1.將section設為滿版2.添加一個container,做為固定欄寬1200px的區塊...

鐵人賽 Modern Web DAY 2

技術 【Day02】什麼是防禦性 CSS?

在海賊王這部漫畫當中,有一個高人氣的反派角色,夏洛特·卡塔庫栗,他是 BIG MOM 海賊團「甜點三將星」之首、四皇「BIG MOM」夏洛特·莉莉的次子。 我...

鐵人賽 Modern Web DAY 18

技術 [DAY18]網頁切版入門及版面實作_ 卡片版面3

卡片版面3 在這個範例中要練習卡片版面的切版 整理幾個小重點如下方: 1.將section設為滿版2.在container設定display: flex讓資料橫...

鐵人賽 Modern Web DAY 17

技術 [DAY17]網頁切版入門及版面實作_ 卡片版面2

卡片版面2 在這個範例中要練習卡片版面的切版 整理幾個小重點如下方: 1.將section設為滿版2.添加一個container,做為固定欄寬1200px的區塊...

鐵人賽 Modern Web DAY 16

技術 [DAY16]網頁切版入門及版面實作_ 卡片版面1

卡片版面1 在這個範例中要練習卡片版面的切版 整理幾個小重點如下方: 1.將section設為滿版2.添加一個container,做為固定欄寬1200px的區塊...

鐵人賽 Modern Web DAY 15

技術 [DAY15]網頁切版入門及版面實作_ Font Awesome

如何使用 Font Awesome 在網頁設計的同時,可以看到需要使用大量的icon,當我們網站要放入一些比較複雜的icon設計圖示,但沒有設計師幫我們產出時,...

鐵人賽 Modern Web DAY 1

技術 【Day01】參賽前言 & 精神喊話

參賽前言 大家好!我又來啦~~~在心裡默默下定決心,說好今年絕對死不參加,但是好死不死又因為各種難以啟齒的原因、五味雜陳的心情,所以我又來啦 XD 相信每一位參...

鐵人賽 Modern Web DAY 14

技術 [DAY14]網頁切版入門及版面實作_ 合體

合體版面 今天要將DAY6~DAY13所練習的所有版面合體起來,變成一個完整的頁面結束完這個完整個範例後,接下來的這幾天,每天會提供一個比較常見的範例一起練習...

鐵人賽 Modern Web DAY 13

技術 [DAY13]網頁切版入門及版面實作_ 導覽列

導覽列 在這個範例中要練習導覽列區塊的切版 整理幾個重點:1.將section_kv設為滿版,添加屬性position: fixed (固定定位),將導覽列的區...

鐵人賽 Modern Web DAY 12

技術 [DAY12]網頁切版入門及版面實作_ 頁尾

頁尾 在這個範例中要練習頁尾部分的切版 整理幾個小重點如下方: 1.將footer_content設為滿版,添加背景色#FFEBF22.添加一個containe...