iT邦幫忙

前端新手村相關文章
共有 275 則文章

技術 鼠年全馬鐵人挑戰 WEEK 04:人要衣著,佛要金裝!用CSS為網頁穿上衣服

如果說html是人,css就是衣服。俗話說:人要衣著,佛要金裝。穿搭得宜,宅男都會變型男無誤。 首先我們先在css資料夾下建立一個style.css,然後在ht...

鐵人賽 自我挑戰組 DAY 15

技術 Day 15 CSS <網頁布局-定位布局-1.定位模式>

為什麼需要定位元素? 定位元素可以實現 : 某個元素可以自由地在一個盒子內移動位置,並且壓住其他盒子 當滾動窗口的時候,盒子是固定屏幕某個位置的 所以 :...

技術 [快速入門前端 21] CSS 常見屬性(1) 字體樣式和顏色

字體 font 系列 屬性 說明 語法 font-size 設定文字大小 font-size: 20px; font-weight 設定文字粗...

鐵人賽 自我挑戰組 DAY 27

技術 Day 27 CSS3 < 動畫 animation>

動畫 (animation) 可通過設置多個節點來精確控制一個或一組動畫,常用來實現複雜的動畫效果。 相比較過渡,動畫可以實現更多變化、更多控制,連續自動播放等...

鐵人賽 自我挑戰組 DAY 2

技術 Day 02 HTML<表格標籤>

表格標籤主要用來顯示以及展示數據,可用表格標籤排版後讓數據更容易閱讀 1. 表格基礎標籤簡易介紹 ( 以code表示 ) : &lt;table&gt; 表示表...

技術 [快速入門前端 10] CSS 選擇器 (1) 基本選擇器 — 通配符、元素、類別 Class、id、屬性

CSS 選擇器 選則器的功能在於讓瀏覽器知道樣式要套用在哪個或哪些元素中,主要依據選擇器的複雜程度分為基本選擇器和複合選擇器。本篇我們會介紹常用的基本選擇器,主...

技術 [快速入門前端 2] HTML 架構和組成關係

HTML 頁面框架 上篇文章說到前端網頁的結構是由 HTML 所構建而成的,主要用 HTML 檔案和裡面的 HTML 標籤組成我們平常所瀏覽的網頁畫面,包含各種...

鐵人賽 自我挑戰組 DAY 9

技術 Day 09 CSS <背景屬性>

CSS背景屬性 可以給頁面元素添加背景樣式背景屬性可設置背景顏色、背景圖片、背景平舖、背景圖片位置、圖像固定等等 1.背景顏色background-color屬...

鐵人賽 自我挑戰組 DAY 12

技術 Day 12 CSS <圓角邊框、盒子陰影>

圓角邊框 使用border-radius圓角邊框樣式,可以修改盒子邊框變成圓角 語法: border-radius:length; //四邊屬性設置同樣 bo...

技術 新手學前端-JavaScript:資訊如何帶進去的語法

Html語法: &lt; p &gt;這一顆紅豆餅是&lt; em id=&quot;price&quot;&gt;&lt; /em &gt;元 &lt; /...

技術 [快速入門前端 23] CSS 常見屬性(3) 邊框、表格及列表屬性

border 邊框 border,指的是邊框,擁有三個必要屬性 border-width、border-color、border-style,分別指定邊框的寬度...

技術 [快速入門前端 8] CSS 引入方式和撰寫規則

什麼是 CSS? CSS (Cascading Style Sheets)是一種用來為結構化檔案 (例如 HTML 和 CSS)加入樣式設定的語言,又被稱作階層...

技術 鼠年全馬鐵人挑戰 WEEK 09: 月亮圓又圓,用 border-radius 讓你圓又圓

雖然離中秋節還很遠, 已經想烤肉了XD ,但每次抬頭仰望星空,看到月亮一點一滴的變化,讓我心中掀起小波瀾,心中思考著要如何讓月亮長存,而不是只有黑夜。 如何使用...

鐵人賽 Modern Web DAY 25
鉄人28号FX 系列 第 25

技術 鉄人28号FX 鉄人25号「圖形鹿」SVG <text> <tspan>

★ 地圖雷奧鎮市中心 ↓↓↓ 真不可思議~明明普通不過的街景,為何隱藏這麼多無法理解的事情。 顯示雷奧鎮街上位置圖 雷奧鎮小巷 [???]: 小子。果然村長擔心...

鐵人賽 自我挑戰組 DAY 29

技術 新手村29 - Countdown Timer

29 - Countdown Timer 俗話說的好,一天一蘋果,醫生遠離我 一天一 JS,What the f*ck JavaScript? small st...

技術 [鼠年全馬鐵人挑戰] Week18 - 超新手學前端 - HTML table 小概念

又過了一周啦~最近開始學習如何用 table 排版,在學習的過程中順手記下筆記讓自已更有概念:) 何謂table table 是在 HTML 排版的一種方式,主...

技術 [快速入門前端 36] 初探 JavaScript

JavaScript 是什麼? 在「快速入門前端」這個系列中,我們已經介紹過組成網頁的 Structure (HTML) 和 Presentation (CSS...

技術 [快速入門前端 29] Position 定位:絕對定位、相對定位、固定定位、黏性定位

Position 定位 Position (定位) 是指元素在頁面上的位置。在一般情況下,我們寫好的元素會由左至右、由上至下依序在瀏覽器中排列,不過當網頁變的愈...

鐵人賽 Modern Web DAY 7
實作經典 JavaScript 30 系列 第 7

技術 Day07: Flexbox + JavaScript 製作手風琴版面

WES BOS系列影片Alex快速導讀系列影片 作者可能怕我們忘記flex怎麼用,在中間穿插了這個課程, 練習JS之餘,也能夠再複習一下flexbox所以在一開...

技術 [鼠年全馬鐵人挑戰] Week27 - JavaScript 練習題- 比較運算子

這周來練習比較運算子,也是我不太熟練的一個章節要好好努力練習了~ 題目 請觀看以下文章後,解答以下題目: [JS] 判斷筆記 比較運算子 重新認識 JavaSc...

技術 [快速入門前端 35] Flex Box 彈性盒子

Flex Box flex box,又稱彈性盒子,是一種為了讓網頁適應不同尺寸的設備所衍伸出來的 display 方式。在 flex 出現之前,我們大多利用元素...

技術 [快速入門前端 25] HTML 元素的 Display 方式

HTML 元素的顯示方式 在之前學習 HTML 的內容中,我們會發現每個元素預設的特定都不太一樣,有些會獨佔一整行的空間,例如 &lt;p&gt;、&lt;di...

鐵人賽 自我挑戰組 DAY 10

技術 Day 10 CSS <元素顯示模式>

1. 什麼是元素顯示模式 元素顯示模式就是元素(標籤)以什麼方式進行顯示 作用 : 網頁的標籤非常多,了解他們的特點可以更方便的布局網頁 ex : &lt;di...

技術 鼠年全馬鐵人挑戰 WEEK 17: CSS transform

transform:(動作的函數),通常會配合animation或:hover來做些動畫效果 範例 transform-origin:x y; 指定動作的參考點...

技術 [鼠年全馬鐵人挑戰] Week22 - 超新手學前端 - JavaScript 使用時機

學了一陣子的JavaScript遇到了不少問題其中遇到一個最大的問題是學了那麼多語法要怎麼運用?我知道函式、物件、陣列但我不知道什麼時候該用哪個?不知道新手在學...

技術 鼠年全馬鐵人挑戰 WEEK 14: 我想亮白、我想復古、我想___?CSS filter

CSS filter簡單來說就是濾鏡功能,以下整理幾個常用的功能。 1.blur模糊(px) 越大越模糊,如果想要朦朧美就參考這個吧! filter:blur(...

技術 [快速入門前端 31] 進階樣式屬性 (1):Shadow 陰影和 Opacity 不透明度

陰影 Shadow 盒子元素陰影 Box Shadow 屬性名:box-shadow屬性值:複合屬性,屬性值分別有 offset-x (水平偏移)、offset...

鐵人賽 Modern Web DAY 12
實作經典 JavaScript 30 系列 第 12

技術 Day12: 在Canvas畫布上,用滑鼠畫畫(二)

今天可以再來玩一些Canvas的功能 1.更改畫筆的顏色,讓畫筆畫出彩虹的顏色這邊是使用HSL色彩概念,HSL即色相、飽和度、亮度(hue,Saturation...

鐵人賽 Modern Web DAY 6

技術 33歲轉職者的前端筆記-DAY 6 CSS button 套件

最近的工作專案很常用到 button 按鈕 因為小公司的關係沒有設計 所以通常要自已想 button 按鈕樣式 但沒有設計腦真的很難想要怎麼呈現顏色跟效果 今天...

技術 [快速入門前端 6] 區塊元素和超連結

DIV (區塊元素) &lt;div&gt;元素(HTML 文件區塊元素)是無標籤語意的容器元素,雖然它不代表任何意義,卻是使用最多的標籤之一,主要用來把相似或...