0701
===

(三)OnePageWebsite一頁式網站專題(術)蕭偉廷

---

## 表單美化
[bootstrap - 表單 (Forms)](https://bootstrap.hexschool.com/docs/4.0/components/forms/)

* 去掉箭頭
[How TO - Hide Arrows From Input Number](https://www.w3schools.com/howto/howto_css_hide_arrow_number.asp)

* 換自己喜歡的箭頭
[How TO - Custom Select Box](https://www.w3schools.com/howto/howto_custom_select.asp)

## 專案觀摩
用 SCSS 整理 CSS
上傳檔案功能換上傳按鈕
[自訂 Input File 檔案上傳按鈕 CSS 最佳解法﹍實作範例](https://www.wfublog.com/2017/10/input-type-file-upload-css-skill.html)
[Styling & Customizing File Inputs the Smart Way](https://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/)
[File API 客製上傳檔案按鈕(input file)](https://letswrite.tw/file-api-custom-input/)

[CSS Reference](https://cssreference.io/)
參考 CSS 的所有用法

## 專案前準備
* 建立樣版
nav {
...
}
footer {
...
}
main {
要 w 給 100%
與 min-height: cal(100vh - footer-h)

section {
...
}
}
* 開啟 CSS 並且 link

## Image Maps
[HTML Image Maps](https://www.w3schools.com/html/html_images_imagemap.asp)

[如何製作響應式的影像地圖](http://blog.shihshih.com/responsive-image-map/)
RWD 進階作法，修正手機版位置錯誤問題
[Free Online Image Map Generator](https://www.image-map.net/)
製作 Image Maps 線上工具
[jQuery RWD Image Maps](https://github.com/stowball/jQuery-rwdImageMaps)
用 Image Maps 一定要裝，不然不能 RWD

## Modal
[互動視窗 (Modal)](https://bootstrap.hexschool.com/docs/4.0/components/modal/)

###### tags: `跨裝置企業平台與資料庫整合設計班`