主要記錄金魚都能懂網頁設計入門的學習筆記
VS code
-
Ctrl + / 註解
-
html lorem 可自動產生假文
-
Alt + Ctrl 會產生 | 移標，選擇多處可以一次輸入
-
Alt +上下 可以整列移動
-
reference =>user =>Format on save checked
vs code extension
- live server
- chinese lorem
第三天：用甚麼工具寫網頁?
Html Resource
Editor
- install vscode
- install package Live Server (右下go live-->即時編輯存檔即可視)
- Live share package (可同時兩人編輯，適合教學)
第四天：再談HTML
Html tag
- ul unorder list
- ol order list
- li list item
- p paragraph
- em emphsis
- strong
- b bold
- i italic
- a anchor href
- img image 沒有頭尾標籤 src=來源 alt=替代文字
- figure html5 <figcaption>此圖片不見了</figcaption><!--可用css 隱藏目的給SEO-->
- table
- tr table row
- td table standard cell
SEO搜尋引擎最佳化
絕對路徑/相對路徑
第五天：網頁裝潢師CSS
CSS (Cascading Style Sheets階層式樣式表)
- inline style 維護不便(css寫在tag中)
- 在html中使用<style></style>
- 引入檔案style.css
- css place in head tag
空行僅會空一格
CSS Selector選取器
- tag
- class：use dot as prefix
- id：use # as prefix
第六天：CSS撰寫位置
CSS配置
一般style 配置按專案需求，例如single page 可能放置head中
DOCTYPE
當所有瀏覽器看到這行 DTD (Document Type Definition)宣告，就會去依照此規範去解讀 HTML 標籤。
HTML lang Attribute
The lang attribute specifies the language of the element's content.
The lang attribute is part of the Global Attributes, and can be used on any HTML element.
HTML <meta> Tag
The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable.
第七天：怎麼學CSS ?
1.CSS大全
2.心智圖 xmind、zen mind
CSS 文字
文字首行縮排text-indent
文字色彩color
字級font-size
文字裝飾text-decoration
尺寸
寬度
行高
高度
背景
背景圖片
背景色彩
動畫
animation
animation-name
animation-duration
定位
選取器
nth-child(i)
說明
相關網站
待處理
文字縮排怎麼作
定位不懂
子問題3
第八天：區塊尺寸計算
Box Model
- content
- padding
- border
- margin
區塊尺寸計算
-
區塊尺寸=width + padding + border + margin
-
可見尺寸=width border padding
尺規
第九天：Float浮動
fake image
float
The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it.
- left - The element floats to the left of its container
- right - The element floats to the right of its container
- none - The element does not float (will be displayed just where it occurs in the text). This is default
- inherit - The element inherits the float value of its parent
子物件設為浮動，父物件會抓不到，父本來是由子層撐開 ex. .col float
解決抓不到的問題<div class="clear-block">常見<div class="clear-fix">
.clear-fix{clear:both;}
clear 閃開浮動物件，會在浮動物件下方
clear
The clear property specifies what elements can float beside the cleared element and on which side.
- none - Allows floating elements on both sides. This is default
- left - No floating elements allowed on the left side
- right- No floating elements allowed on the right side
- both - No floating elements allowed on either the left or the right side
- inherit - The element inherits the clear value of its parent
960 Grid System
透過網格可將圖片、文字做有條理的編排，只要有了網格做支撐，就算是複雜的圖文都會有規矩的排列。
第十天：網頁兩大主角
block
不管多寬佔一整列 可以設定寬跟高
inline
跟大家排一起 不能設定寬跟高
inline-block
跟大家排一起 可以設定寬跟高
Compared to display: inline, the major difference is that display: inline-block allows to set a width and height on the element.
Also, with display: inline-block, the top and bottom margins/paddings are respected, but with display: inline they are not.
Compared to display: block, the major difference is that display: inline-block does not add a line-break after the element, so the element can sit next to other elements.
Note
在12-1.html中，在將a標籤設定寬度及背景顏色時，會發現a標籤與a標籤中有空隙，其來自於標籤與標籤並未連在一起，故有一空白字元在中間。
為了去除空白間隙，先在div中將font-size設為0，但此步驟會將a標籤中的文自一併設為0，原因在於文自相關的設定會繼承父物件的設定，故需在將a的font-size設回來。
第十一天：換個新盒子
box-sizing
The box-sizing property defines how the width and height of an element are calculated: should they include padding and borders, or not.
box-sizing 盒模型的計算方式，也可以說控制寬度值給誰，border-box margin還是需要計算
-
border-box The width and height properties (and min/max properties) includes content, padding and border -
content-box Default. The width and height properties (and min/max properties) includes only the content. Border and padding are not included
第十二天：CSS Reset
1.為什麼自不會靠邊，標題離內文有距離，因為瀏覽器有內建的css
2.Reset CSS 是將default的CSS歸零，完全由開發者自行設定
2.Reset CSS 原因在各家瀏覽器依照w3c標準default css支援程度不一，所以同一份文件再不同瀏覽器外觀會長的不一樣
3.詳細說明Reset CSS 與 CSS normalize如下link
4. Eric Meyer reset css
https://meyerweb.com/eric/tools/css/reset/
5.normalize 處理流覽器間的差異
https://necolas.github.io/normalize.css/
6.em：相對單位，每個子元素透過「倍數」乘以父元素的 px 值。
https://www.oxxostudio.tw/articles/201809/css-font-size.html
第十三天：排版聖品
CSS Flexbox
1.Felx 支援度問題：ie8、ie9、ie10、ie11、edge
2.設為flex後，裡面物件為flex item 物件會橫排，且不會有空白字元的問題
3.再增加item也不會折行，會自動調整
4.flex-wrap: wrap 則會折行
5.amos 第一次直播 介紹CSS flex
第十四天：Fixed定位
Fixed
The element is positioned relative to the browser window
W3C position
An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.
All CSS Positioning Properties
上課筆記
1.position有五種，較不重要的static、sticky
3.fixed：控制物件在畫面當中要依據誰來對齊，或依據誰來作位置排列，或定在某的位置上面。
4.fixed特性
- 從資料當中抽離自己獨立一層
- 未設上右下左時，會定在原來物件距離視窗頂端及左邊預設的位置
- 永遠故定在視窗範圍
5.蓋版廣告：垂直置中top:0 buttom:0 margin:auto left:0 right:0，若要家一個X關掉，透過程式。
第十五天：Relative定位
Relative
The element is positioned relative to its normal position, so "left:20px" adds 20 pixels to the element's LEFT position.
上課筆記
1. relative：在資料中的位置作偏移
2. 定位之後 left top 才會有作用
3. z-index 先後順序，default z-index 為0
4. 有設定定位時zindex會在前方，當都有定位設定時後面蓋住前面
5.實作19 20對調19後與20號在程式碼位置不變
6.產生50的帶有數字編號的li ：ul>li.item${$}*50
第十六天：Absolute定位
The element is positioned relative to its first positioned(not static) ancestor.
上課筆記
設定left 0 top 0 會往上一層找父層定位的，若上層無定位，最後會找到window(可將css html,body區塊測試)，只會定一次
第十七天：排個稀飯版
第十八天：Transition
Transition：MDN、W3C
A change from one form or type to another, or the process by which this happens.
Transitions 讓你可以定義元件在兩個狀態之間切換的轉場效果。兩個不同狀態可以使用虛擬類別 定義，像是:hover 或 :active 亦或是 使用JavaScript設定的狀態變化。
transition: 屬性property name | 轉換時間duration | 延遲執行時間delay | 速度time function;
第十九天：Animation
Animation：W3C、MDN
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
關鍵影格(@keyframe)：可以設定各個狀態間轉換的時點，形成一些動畫上快慢的差別
第二十天：媒體查詢
Media
The @media rule is used in media queries to apply different styles for different media types/devices.
Media queries can be used to check many things, such as:
- width and height of the viewport
- width and height of the device
- orientation (is the tablet/phone in landscape or portrait mode?)
- resolution
Viewport：裝置的螢幕尺寸、裝置解析度
轉換成手機 shift + 滑鼠 模擬手指放大縮小，ratio 為螢目解析度
chrome到9像素後就不會再更小
第二十一天：RWD入門
RWD起手式：設定meta viewport
滿版不一定式好閱讀的，因為寬螢幕越來越普及，所以設置一個最大寬度
第二十二天：RWD排版試做
第二十三天：RWD選單
第二十四天：Bootstrap入門
1.bootstrap : ui framework
2.起手式 copy starter template
3.min.css壓縮過的檔案
4.滿版寬container-fulid 固定寬container
5.多欄版面row
6.
手機 直 .col-佔欄數(總欄12)
手機 橫 .col-sm-佔欄數
平板 直 .col-md-佔欄數
平板 橫 .col-lg-佔欄數
桌機 .col-xl-佔欄數
7.check圖片沒有滿版
check 圖片沒有滿版
圖片200X200
容器400X400
使用max-width=>則最大不要超過圖片本身
第二十五天：Bootstrap組件入門
bootstrap web site =>component=>navbar
=>Jumbotron
=>breadcrumb
=>List group =>Links and buttons
=>Pagination =>Working with icons
=>Carousel
=>Modal
第二十六天：JQuery入門
1.jQuery is a fast, small, and feature-rich JavaScript library
2.DOM： When a web page is loaded, the browser creates a Document Object Model of the page.The HTML DOM model is constructed as a tree of Objects.
https://www.w3schools.com/js/js_htmldom.asp
3.attribute vs. property
4.link jquery / download
https://developers.google.com/speed/libraries
5.cdn 放在/body前，效能考量
6.jquery 起手式 document.ready
第二十七天：JQuery事件
Mouse Events click
https://api.jquery.com/category/events/mouse-events/
蓋板廣告實作
第二十八天：JQuery CSS控制
addClass
removeClass
toggleClass
同時擁有兩個class
.full-screen.x{}
第二十九天：JQuery 動畫
slidetoggle
fadeToggle