Please enable JavaScript.
Coggle requires JavaScript to display documents.
實作個人網站思考脈絡 (活用 HTML / CSS (container (內容置中且左右留白, 整體排版), 過場效果 (在變換時的時間差,…
實作個人網站思考脈絡
活用 HTML / CSS
container
內容置中且左右留白
整體排版
overlay
半透明的區塊
clearfix
設定元素浮動之後跑版
兩欄 / 三欄式切版
平均分配成多欄式
parallax
滾動視差的技巧
過場效果
在變換時的時間差
內容呈現更自然
nth-child
特定的 HTML 元素設定樣式
內容
導覽列
到達某區塊
列出每個區塊
首頁橫幅
留下第一印象
展現風格
自我介紹
照片
個人簡介
技巧
服務內容
座右銘
作品集
展現作品
可放課程作業
凸顯技巧
聯絡表單
可聯繫你
可加入line FB EMAIL等
線上資源
Emmet 套件
DevTools
透過遊覽器來調整 適合CSS
Font Awesome
小圖示
Google Font
W3C、MDN
查詢語法
開發流程
設計稿階段
網頁的模樣畫成一個設計稿
再使用 HTML 和 CSS 建立
過程也常被稱為「切版」
Wireframe 階段
先思考網站佈局
不會馬上寫code
撰寫 HTML 階段
根據wireframe佈局，使用html標籤
用html完成骨架與內容
套入 CSS 階段
用 CSS 將排版