iT邦幫忙

前端入門相關文章
共有 28 則文章
鐵人賽 Modern Web DAY 8

技術 八日目:JavaScript 函式function 関数ノ章

晚安 ✧٩(ˊωˋ*)و✧ 我是 SONYKO上班上課辛苦了。今天要介紹函式~♫ 有沒有每次打函式都會變成韓式的困擾啊( Q : 為什麼函式會被發明?A : 因...

鐵人賽 自我挑戰組 DAY 30
從門外漢到前端新手 系列 第 30

達標好文 技術 Day30 CSS:Transform: translate

Transform是CSS中,用來改變視覺格式化模型(visual formatting model)的各種型態,且它具有三維的概念,可以聲明元素的三維視覺效果...

鐵人賽 自我挑戰組 DAY 29
從門外漢到前端新手 系列 第 29

技術 Day25 CSS:Position

position是用來定位元素的屬性。它是指定top、left、right、bottom的數值,來決定元素的位置。而它的定位是依照基準來位移,基準依positi...

鐵人賽 自我挑戰組 DAY 28
從門外漢到前端新手 系列 第 28

技術 Day28 CSS:Float

Float浮動屬性 float的使用,通常是想在版面上做出文繞圖的效果,但也可以應用在元素的左右對齊。float屬性有下列定位特性: 讓元素脫離normal...

鐵人賽 自我挑戰組 DAY 27
從門外漢到前端新手 系列 第 27

技術 Day27 CSS:Display

在認識了normal flow中BFC與IFC的概念後,我們要來認識以這兩個佈局規則為基準的display屬性。display屬性也有特殊的佈局如flex及gr...

鐵人賽 自我挑戰組 DAY 26
從門外漢到前端新手 系列 第 26

技術 Day22 CSS:IFC(Inline formatting context)

上一篇我們知道了block box會參與BFC的佈局 ; 這篇所說的IFC則是inline box所參與的佈局,而IFC是block contaner box創...

鐵人賽 自我挑戰組 DAY 25
從門外漢到前端新手 系列 第 25

技術 Day25 CSS:BFC(Block formatting context)

在認識BFC之前,首先我們要知道Positioning schemes(定位規則)與Formatting context(格式化上下文)。 Positionin...

鐵人賽 自我挑戰組 DAY 24
從門外漢到前端新手 系列 第 24

技術 Day24 CSS:淺談視覺格式化模型 Visual formatting model

我們前幾篇認識了基本的CSS樣式,了解了文字、邊框、背景怎麼用顏色跟單位數值來設定樣式 ; 接著認識了box model,知道了單一個元素的box結構。 今天,...

鐵人賽 自我挑戰組 DAY 23
從門外漢到前端新手 系列 第 23

技術 Day23 CSS:Collapsing margins

我們曾經在HTML篇章討論block元素與inline元素時,粗淺提到margin重疊。既然已經知道box model,終於可以來認識什麼是Collapsing...

鐵人賽 自我挑戰組 DAY 22
從門外漢到前端新手 系列 第 22

技術 Day22 CSS:Box-sizing

box-sizing屬性是用來聲明元素的width跟height包含box model的哪些部位。 適用元素: 所有可設定width跟height的元素。 va...

鐵人賽 自我挑戰組 DAY 21
從門外漢到前端新手 系列 第 21

技術 Day21 CSS:Box-model

Box model box-model是CSS的基礎概念。我們在HTML檔中寫入很多元素,在瀏覽器渲染時,我們可以在畫面上看到一個個區域,個別裝著不同的內容,這...

鐵人賽 自我挑戰組 DAY 20
從門外漢到前端新手 系列 第 20

技術 Day20 CSS基本樣式-Border&Outline

Border樣式 所有元素都可以設邊框(border)。今天要介紹的border屬性有:border-style | border-color | border...

鐵人賽 自我挑戰組 DAY 19
從門外漢到前端新手 系列 第 19

技術 Day19 CSS基本樣式-Background(下)

background-position background-position是用來定位背景的位置,可以以方位名稱(top、left、center、right、...

鐵人賽 自我挑戰組 DAY 18
從門外漢到前端新手 系列 第 18

技術 Day18 CSS基本樣式-Background(上)

background屬性是用來聲明元素的背景,它可以大到網頁整個背景,也可以設定一個一個區塊的背景,或是小到像<button>、<a>都...

鐵人賽 自我挑戰組 DAY 17
從門外漢到前端新手 系列 第 17

技術 Day17 CSS基本樣式-文字樣式

我們知道了怎麼在CSS裡表示color屬性值、單位與數值,這篇,我們要來認識常用到的文字樣式。 font-size 字的大小,我們在前一篇有示範過,字體的大小可...

鐵人賽 自我挑戰組 DAY 16
從門外漢到前端新手 系列 第 16

技術 Day16 CSS基本樣式-單位與數值

單位 單位可以用在width(寬)、height(高)屬性上,也可以用在font-size(字體大小)上,我們在切版的時候,用什麼樣的單位來指定畫面上區塊、字體...

鐵人賽 自我挑戰組 DAY 15
從門外漢到前端新手 系列 第 15

技術 Day15 CSS基本樣式-color

我們已經會用選擇器來指定我們要的元素,選擇器框內放入樣式聲明,才能夠幫元素套樣式,還記得我們說到CSS語法時,樣式聲明是屬性(property)跟屬性值(val...

鐵人賽 自我挑戰組 DAY 14
從門外漢到前端新手 系列 第 14

技術 Day14 CSS:權重

在學選擇器時,不免會一直提到權重,權重是css的樣式聲明的套用比較級,當很多樣式被寫在同一個css檔時,它們的權重值會決定誰最後勝出,元素最終會以權重值最高的樣...

鐵人賽 自我挑戰組 DAY 13
從門外漢到前端新手 系列 第 13

技術 Day13 CSS selector (3)

介紹了基礎的選擇器,以及進階用組合子的方式選擇。今天我們要來介紹更近一步的選擇器應用,偽類與偽元素。 偽類 Pseuedo-classes 偽類之所以叫作偽,簡...

鐵人賽 自我挑戰組 DAY 12
從門外漢到前端新手 系列 第 12

技術 Day12 CSS selector (2)

上一篇介紹了基礎的選擇器用法,今天來介紹進階的用法吧~ 群組選擇器 複選元素一起套樣式,中間用逗號隔開。要注意的是,如果這個選擇器群組其中一個無效,則整個群組都...

鐵人賽 自我挑戰組 DAY 11
從門外漢到前端新手 系列 第 11

技術 Day11 CSS selector (1)

上一篇介紹套用CSS的方法,最常用的是另外建立css檔並引入html檔。那麼我們要怎麼在css檔內寫入我們想要的樣式呢? 首先我們會介紹css的語法,接著本篇的...

鐵人賽 自我挑戰組 DAY 10
從門外漢到前端新手 系列 第 10

技術 Day10 如何套用CSS

會寫HTML了,可是放在瀏覽器看起來卻很單調,接下來就可以用CSS幫它做樣式,之前從CSS zen garden可以看出,CSS的功能是很強大的,可以做出各式各...

鐵人賽 自我挑戰組 DAY 9
從門外漢到前端新手 系列 第 9

技術 Day9 動手寫HTML(4)

語意化標籤 我們學到,標籤的語意是撰寫html文檔時,很重要的概念。而HTML5版本,有所謂的語意化標籤,這類元素並不像<input>、<a&...

鐵人賽 自我挑戰組 DAY 8
從門外漢到前端新手 系列 第 8

技術 Day8 動手寫HTML(3)

上篇介紹了很多結構文字內容的元素,今天就來介紹些引入外部資源的常用元素吧。 <img> 在HTML裡,我們用<img>來嵌入圖片,它不需...

鐵人賽 自我挑戰組 DAY 4

技術 Day4 盒子的大小?

讓我們來打開神祕小盒子,一探究竟。 在排版時,我們習慣將每一個區塊看成一個盒子來進行排版,排版結果由盒子性質及大小決定,而盒子大小受盒子相關屬性及計算方式影響,...

鐵人賽 自我挑戰組 DAY 3

技術 Day3 工具都準備好了,到底怎麽開始切版呢?

古人有云:「先謀定而後動,則無往而不勝」動手前,先想一想,你要切的版是什麼樣子的? 好,那麼,假設你看了一些文件,也試著打開記事本(我一開始真的是用記事本,之後...

鐵人賽 自我挑戰組 DAY 2

技術 Day2 開始了,那麼工具呢?

工欲善其事,必先利其器,來準備一下你的工具吧 剛開始學習的時候,除了需要瞭解最重要的程式語法外,還必須知道一些工具,讓你啓程。 首先最最最重要的就是編輯器了!!...

鐵人賽 自我挑戰組 DAY 1

達標好文 技術 Day1 如何開始前端之路

抉擇從來不難,難在下定決心執行 開始之前,說說自己 踏入前端可能從來不在以前的自己想像中,也不會是長期規劃後的結果。大約兩個半月前,我還在前公司擔任 IE 工程...