# 金魚都能懂 網頁設計入門
###### tags: `從零開始學CSS, HTML5, RWD網站`
https://medium.com/chloelo925/%E9%87%91%E9%AD%9A%E9%83%BD%E8%83%BD%E6%87%82%E7%9A%84%E7%B6%B2%E9%A0%81%E8%A8%AD%E8%A8%88-%E9%9B%9C%E8%A8%98-1e6068054e4a
[金魚都能懂 網頁設計入門 : 網頁入門第一步 - 鐵人賽第二天 | HTML教學 | 網頁教學](https://www.youtube.com/watch?v=ZavL9y4Adrk&list=PLqivELodHt3iF_Spzdz_6LsOSPOyfDx-R&index=5)
超文件標記語言(HyperText Markup標記 Language:HTML)
<p></p>

[金魚都能懂網頁設計入門 : 用甚麼工具寫網頁? 鐵人賽第三天 | 網頁教學 | HTML教學](https://www.youtube.com/watch?v=0XhNnLOJO_0&list=PLqivELodHt3iF_Spzdz_6LsOSPOyfDx-R&index=6)
[Brackets](http://brackets.io/)
[ATOM](https://atom.io/)基於瀏覽器的編輯器
[Sublime Text](https://www.sublimetext.com/)要錢
[Visual Studio Code] (https://code.visualstudio.com/)基於瀏覽器的編輯器更新速度很快
lorem假文產生器按tab鍵
Sublime 免費教學影片
tools->command palette(ctrl+shift+p)
install package control
package control:install package安裝外掛
emmet安裝外掛
Visual Studio Code 免費教學影片
live server可以即時看到畫面
vs live share同時編輯
vscode 文字放大縮小 control + = 或是' control + - 退格旁邊那兩個鍵
vscode 自動換行 快捷键 : alt + Z
vscode 按住 alt 並點選你想輸入的位置後，就能有多個輸入位置

[金魚都能懂網頁設計入門 : 再談HTML - 鐵人賽第四天 | HTML教學 | 網頁教學](https://www.youtube.com/watch?v=88qmvi4snuo&list=PLqivELodHt3iF_Spzdz_6LsOSPOyfDx-R&index=7)
連續編輯tab
強調語意strong粗體;b描述外觀
斜體em強調語意;i描述外觀
figure讓搜尋引擎更明確知道這是圖片
figcaption描述
src是附加的東西所以叫屬性
註解ctrl+/
table
tr列td格td格
tr列td格td格
table

[金魚都能懂網頁設計入門 : 網頁裝潢師CSS - 鐵人賽第五天 | CSS教學 | 網頁教學](https://www.youtube.com/watch?v=PN6pV_ZLHqc&list=PLqivELodHt3iF_Spzdz_6LsOSPOyfDx-R&index=8)
階層樣式表Cascading Style Sheets
#ccc淺灰#eee更淺

[金魚都能懂網頁設計入門 : CSS撰寫位置 - 鐵人賽第六天 | CSS教學 | 網頁教學](https://www.youtube.com/watch?v=z3A_3LmgC6Q&list=PLqivELodHt3iF_Spzdz_6LsOSPOyfDx-R&index=9)
*{
margin:0;
padding:0;
}
nav a 空白指的是下一層
nav a {
color: #fff;
text-decoration: none;
/* 不要底線 */
display: inline-block;
padding: 6px 20px;
font-size: 16px;
background-color: #000;
transition: 0.5s;
}
[金魚都能懂網頁設計入門 : 怎麼學CSS - 鐵人賽第七天 | 網頁教學 | CSS教學](https://www.youtube.com/watch?v=h7wJ2YZarFc&list=PLqivELodHt3iF_Spzdz_6LsOSPOyfDx-R&index=10)
心智圖Hackmd 作筆記
[金魚都能懂網頁設計入門 : 區塊尺寸計算 - 鐵人賽第八天 | CSS教學 | CSS盒模型 | 網頁教學](https://www.youtube.com/watch?v=MV9_P6klL-Q&list=PLqivELodHt3iF_Spzdz_6LsOSPOyfDx-R&index=11)
盒模型
區塊會變大
看得到的尺寸是width+border+padding
看不到的尺寸是width+border+padding+marging
w960
[金魚都能懂網頁設計入門 : Float浮動 - 鐵人賽第九天 | CSS教學 | 網頁教學](https://www.youtube.com/watch?v=-AO1IdBTY5c&list=PLqivELodHt3iF_Spzdz_6LsOSPOyfDx-R&index=12)
[fakeing 假圖產生器Fake Image Placeholder](https://fakeimg.pl/)

wrap
container
col*3
width: 960px;
浮起來父層就抓不到高度所以背景不見了
在最後一個元素加上clearfix父層就可以抓到clearfix高度(背景是被clearfix撐開的)

[金魚都能懂網頁設計入門 : 網頁兩大主角 - 鐵人賽第十天 | CSS教學 | 網頁教學](https://www.youtube.com/watch?v=TtvQsVjt9t8&list=PLqivELodHt3iF_Spzdz_6LsOSPOyfDx-R&index=13)
black可以設寬高不能排在一起.inline排在一起不能設寬高.inline-black可以設寬高排在一起
a=>inline=>paddong高度不會被撐開

[金魚都能懂網頁設計入門 : 換個新盒子 - 鐵人賽第十一天 | 網頁教學 | CSS教學](https://www.youtube.com/watch?v=O8EOgg-hhvI&list=PLqivELodHt3iF_Spzdz_6LsOSPOyfDx-R&index=14)
content-box寬度指定給內容物padding.border會往外加
border-box寬度指定給邊框padding.border會往內推

[金魚都能懂網頁設計入門 : CSS Reset - 鐵人賽第十二天 | CSS教學 | 網頁教學](https://www.youtube.com/watch?v=WtjXBIyxhw8&list=PLqivELodHt3iF_Spzdz_6LsOSPOyfDx-R&index=15)
reset.css
[meyerweb](https://meyerweb.com/eric/tools/css/reset/)
[Normalize.css](https://necolas.github.io/normalize.css/)

[金魚都能懂網頁設計入門 : 排版的聖品 - 鐵人賽第十三天 | 網頁教學 | CSS教學 | Flex教學](https://www.youtube.com/watch?v=fqSHx7pRqLk&list=PLqivELodHt3iF_Spzdz_6LsOSPOyfDx-R&index=16)
[假圖](https://picsum.photos/)
https://picsum.photos/id/1/300/200
關於Flex
預設子項目不換行
預設子項目寬度自動縮減
換行使用的屬性flex-wrap: wrap;
啟用Flex的方式

[金魚都能懂網頁設計入門 : Fixed 定位 - 鐵人賽第十四天 | CSS定位 | 網頁教學 | CSS教學](https://www.youtube.com/watch?v=6jwl-XEpXLk&list=PLqivELodHt3iF_Spzdz_6LsOSPOyfDx-R&index=17)
關於Fixed
設定Fixed之後會有的特性有哪些
從資料中抽離資料會往上排
定位在原來的位置
上下左右依據視窗來訂為
如何水平垂直置中

[金魚都能懂網頁設計入門 : Relative 定位 - 鐵人賽第十五天 | CSS定位 | CSS教學 | 網頁教學](https://www.youtube.com/watch?v=Rukgrh1HlZg&list=PLqivELodHt3iF_Spzdz_6LsOSPOyfDx-R&index=18)
關於Fixed
設定Relative之後會有的特性有哪些
偏移顯示
後面蓋住前面z-index:1預設0
設定Relative之後層級的變化

[金魚都能懂網頁設計入門 : Absolute 絕對定位教學 - 鐵人賽第十六天 | CSS教學 | 網頁教學](https://www.youtube.com/watch?v=JOdZdHnuGmM&list=PLqivELodHt3iF_Spzdz_6LsOSPOyfDx-R&index=19)


==[金魚都能懂網頁設計入門 : 排個稀飯版 - 鐵人賽第十七天 | CSS教學 | 網頁教學 | 網頁設計](https://www.youtube.com/watch?v=bxnZArACzuU&list=PLqivELodHt3iF_Spzdz_6LsOSPOyfDx-R&index=20)==
flex特性
垂直置中的寫法
圖片下方的微幅距離怎麼處理掉
banner滿版內容區
path麵包穴

[金魚都能懂網頁設計入門 : Transition 網頁動畫- 鐵人賽第十八天 | 網頁動畫 | CSS教學 | 網頁教學](https://www.youtube.com/watch?v=kR6JpIGJDBQ&list=PLqivELodHt3iF_Spzdz_6LsOSPOyfDx-R&index=21)
transition: 屬性 轉換時間 延遲時間 速度;
transition: all 0.3s 0s ease;
a:hover

[金魚都能懂網頁設計入門 : Animation 網頁動畫 - 鐵人賽第十九天 | 網頁動畫 | 網頁教學 | CSS教學 | animation](https://www.youtube.com/watch?v=H9xZ9mExrZk&list=PLqivELodHt3iF_Spzdz_6LsOSPOyfDx-R&index=22)
[Animation 網頁動畫]()
infinite重複播放
![](https://i.imgur.com/a112Ars.png)

[金魚都能懂網頁設計入門 : 媒體查詢 - 鐵人賽第二十天 【新手網頁教學系列】](https://www.youtube.com/watch?v=czkmXTkjCDM&list=PLqivELodHt3iF_Spzdz_6LsOSPOyfDx-R&index=23)
@media用於媒體查詢讓不同媒體類型有不同的樣式
視口(裝置螢幕尺寸)設備方向解析度
[螢幕解析度查詢](http://csscoke.com/webq/)
@media screen(螢幕) and (條件) and (條件){}
手機->桌機@media screen and (min-width最小寬度:768px以上) and (條件){}
桌機->手機@media screen and (max-width最大寬度:768px以下) and (條件){}
<meta name="viewport視窗大小" content="width=device-width寬度等於裝置寬度, initial-scale=1.0縮放比例" />

[金魚都能懂網頁設計入門 : RWD入門 - 鐵人賽第二十一天 | RWD教學 | 網頁教學 | RWD網頁 | CSS教學](https://www.youtube.com/watch?v=0FayRAu1du0&list=PLqivELodHt3iF_Spzdz_6LsOSPOyfDx-R&index=24)
撰寫方式
條件設定方式
有甚麼作用



金魚都能懂[網頁設計入門 : RWD試排版 - 鐵人賽第二十二天 | RWD網頁 | RWD教學 | 網頁教學](https://www.youtube.com/watch?v=tEavVrEPBlA&list=PLqivELodHt3iF_Spzdz_6LsOSPOyfDx-R&index=25)
ctlorem60
sublime 中文假字套件 — ChineseLoremIpsum
快捷鍵： clorem 再 alt+c (簡體)、ctlorem 再 alt+c (繁體)
vscode 目前只看到有簡體中文的，外掛名稱是 「Chinese Lorem Ipsum」
https://ithelp.ithome.com.tw/articles/10219779
img {
        vertical-align: bottom;
        /* 圖片對齊是對齊基線所以會有白白的 */
      }


==[金魚都能懂網頁設計入門 : RWD選單製作 - 鐵人賽第二十三天 | 網頁教學 | 網頁設計| RWD教學](https://www.youtube.com/watch?v=E9SosNZkX7Y&list=PLqivELodHt3iF_Spzdz_6LsOSPOyfDx-R&index=26)==


[金魚都能懂網頁設計入門 : Bootstrap 入門 - 鐵人賽第二十四天 【新手網頁教學系列】| Bootstrap 教學 | 網頁教學](https://www.youtube.com/watch?v=cxCD6Ntjl94&list=PLqivELodHt3iF_Spzdz_6LsOSPOyfDx-R&index=27)
ui類型的框架framework
.item .img-fluid {
        width: 100%;
      }
定寬容器與滿版容器
container 固定寬度
container-fluid 滿版
row 一個橫排
col 表 column欄

裝置尺寸代號有哪些
手機 直 .col-佔欄數(預設)
手機 橫 .col-sm-佔欄數
平板 直 .col-md-佔欄數
平板 橫 .col-lg-佔欄數
桌機.col-xl-佔欄數

預設欄數是多少
預設佔欄數怎麼設定

圖片怎麼做到RWD
img-fluid

[金魚都能懂網頁設計入門 : Bootstrap 組件入門 - 鐵人賽第二十五天 【新手網頁教學系列】| Bootstrap 教學 | 網頁教學](https://www.youtube.com/watch?v=p3CK74T9GHQ&list=PLqivELodHt3iF_Spzdz_6LsOSPOyfDx-R&index=28)
Navbar 導覽列
Jumbotron 大的 banner
Breadcrumb 麵包屑
Listgroup 一些ol ul列表(有的有包含連結)
Pagination 分頁
Card 卡片式版面
Carousel 幻燈片
Modal e.g. 按鈕(可以改成連結樣式)點下，alert登入的頁面

[金魚都能懂網頁設計入門 : JQuery入門 - 鐵人賽第二十六天 【新手網頁教學系列】](https://www.youtube.com/watch?v=AnmFcj_sEHQ&list=PLqivELodHt3iF_Spzdz_6LsOSPOyfDx-R&index=29)
jquery快速清亮功能豐富的js圖書館函式庫，統一瀏覽器，
什麼是DOM文件物件模型:可以更改html元素屬性class=""樣式創建html事件根據事件做出反應

JQuery的好處
使用JQ的起手式
cdn寫在後面效能會比較好

<!-- google cdn -->
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> -->

<!-- 檔案抓到本機 -->
<script src="js/jquery.min.js"></script>
<script>
$(document).ready(function () { // jquery起手式
do something...........
});
</script>

[金魚都能懂網頁設計入門 : JQuery事件 - 鐵人賽第二十七天 【新手網頁教學系列】](https://www.youtube.com/watch?v=CDO8AkK2HnE&list=PLqivELodHt3iF_Spzdz_6LsOSPOyfDx-R&index=30)
事件是甚麼
為何我們需要知道事件
JQuery中有多少種事件
選取物件的方式
何時要寫function
function有分幾種? Amos使用的是那種?
發生錯誤時該怎麼抓錯
新手常發生的錯誤有哪些
mouse events
.click()滑鼠點一下
.dblclick()滑鼠點兩下
.hover()
.mousedown()
.mouseenter()
.mouseleave()

[金魚都能懂網頁設計入門 : CSS控制 - 鐵人賽第二十八天 【新手網頁教學系列】](https://www.youtube.com/watch?v=YEu5qmoOy6s&list=PLqivELodHt3iF_Spzdz_6LsOSPOyfDx-R&index=31)

[金魚都能懂網頁設計入門 : JQuery動畫 - 鐵人賽第二十九天 【新手網頁教學系列】](https://www.youtube.com/watch?v=LoiC46NMOrw&list=PLqivELodHt3iF_Spzdz_6LsOSPOyfDx-R&index=32)
.fadeIn()不能關淡入已隐藏的元素
.fadeOut()改變透明度到不見淡出可见元素
.fadeTo()
.fadeToggle()漸出
上下伸展
.sideDown()不能開
.sideToggle()
.sideUp()

[金魚的意義由你訂 - 鐵人賽第三十天 : 金魚都能懂網頁設計入門 【新手網頁教學系列】](https://www.youtube.com/watch?v=tlPMSbtyUHI&list=PLqivELodHt3iF_Spzdz_6LsOSPOyfDx-R&index=33)