這次挑戰會在 30 天內,分別學習三個前端基礎語言。
首先是 HTML,負責網頁的骨架和內容,像是文字、圖片、段落怎麼排版。
接著是 CSS,讓網頁變漂亮,透過顏色、字體、版面設計,做出更好的使用體驗。
最後是 JavaScript,讓網頁有互動性,像是按鈕點擊、表單檢查,以及一些常用的功能。
這 30 天的探索,希望能打下前端的基礎,也累積出一個完整的小專案。
繼續說明昨天沒說到的部分 Box Model (盒模型) 一個 box model 包含,margin、border、padding、content。![!...
Flex Box:是一個 (Box model),是指一個彈性的盒子 ( Flexible Box ),可以適應不同尺寸和設備,因為響應式網頁的興起,愈來愈普...
外容器 (Container) 參考 CodePen 連結,試著將註解的行數依描述進行調整 try01:要加display才會顯示 Flex 的效果 try0...
justify-content 與 align-items justify-content:是依照主軸的狀況來進行對齊,因此要確認 flex-direction...
內元件 從前面介紹會發現,調整外容器時內元件都是一起變更的,若想單獨針對內元件進行調整,需要另外進行設定 內元件 (items) flex:下面 3 個屬性的...
position 是指定一个元素在定位方式,也就是元素放置的位置 相對定位與絕對定位 可以用來應用在元素重疊 static:預設值,代表不會被定位,依照網頁預...
固定定位 不隨網頁滑動(滾動)而改變位置,例如購物車按鈕、置頂按鈕、聊天服務等固定區域的fixed:類似絕對座標固定位置,但參考的是瀏覽器視窗,也就是我們看得到...
Table 表格 <table><tr>:代表 (table row),橫的 row<td>:代表 (table data)...
JavaScript 概述 一般來說,完整的 JavaScript 包括以下幾個部分: ECMAScript,描述了該語言的語法和基本物件 文件物件模型(DO...
什麼是函式 funciton 簡單來說「函式」指的是將一或多段程式指令包裝起來,可以重複使用,也方便維護。 函式的寫法 function name(params...