---
# System prepended metadata

title: 1126_htmlcss_day10
tags: [5xruby, html/css]

---

# 1126_htmlcss_day10

[![hackmd-github-sync-badge](https://hackmd.io/VX1hMo8BTf-ncsbasXbxpA/badge)](https://hackmd.io/VX1hMo8BTf-ncsbasXbxpA)

---
#### 上課日期：1126
###### tags: `html/css`
###### tags: `5xruby`


---
# 相關連結:
- [AstroCamp課程影片](https://campus.5xruby.tw/courses/1136422/lectures/25361517)
- 還沒看的，趕快去看啦!!! [AMOS老師 - 金魚都能懂的網頁教學(清單)](https://www.youtube.com/playlist?list=PLqivELodHt3iL9PgGHg0_EF86FwdiqCre)
	- 建議看：[金魚都能懂網頁設計入門:怎麼學CSS](https://youtu.be/h7wJ2YZarFc)，並整理出心智圖！
- 建議看：[金魚都能懂的CSS必學屬性](https://ithelp.ithome.com.tw/users/20112550/ironman/3803?sc=iThelpR)
- [金魚都能懂的網頁切版(清單)](https://www.youtube.com/playlist?list=PLqivELodHt3hxeuLX8PYaI8u1GcDaBoJo)
- [金魚都能懂的Bootstrap5網頁框架開發(清單)](https://www.youtube.com/playlist?list=PLqivELodHt3jq3oWBZfdhMu0GE7774HBW)
- [position-金魚都能懂的CSS必學屬性](https://ithelp.ithome.com.tw/articles/10253500)




---
# 0. 綱要/目錄
- [ ] 案例說明：絕對定位
- [ ] bootstrap
- [ ] 專案模擬workshop



---
# 1. 案例說明：絕對定位


---
# 2. bootstrap
#### 幻燈片
* [**Carousel**](https://getbootstrap.com/docs/4.5/components/carousel/)：內建，不好用 
* [**Swiper**](https://swiperjs.com/)：推薦使用
* [**Owl Carousel 2**](https://owlcarousel2.github.io/OwlCarousel2/)：聽說有安全疑慮
##### 可能遇到的需求：有些人可能覺得套件的原始碼太多，只要取用有需要的就好

#### 導覽列 Navbar

#### [Navs and tabs](https://v5.getbootstrap.com/docs/5.0/components/navs-tabs/)

##### 上課範例檔
- [連結](https://discord.com/channels/748042598983401482/748046752870826045/781395796884586497)
---

# 3. 專案模擬workshop
項目：
> 所以項目都需要考量**時程**的問題
* 創意發想
	> X-mind輔助
* 功能
* 畫面
* 分工


#### 網站草圖 wireframe
##### 繪製工具
- [萬能的手～](https://zh.wikipedia.org/wiki/%E6%89%8B)
- [balsamiq](https://balsamiq.com/wireframes/)
- [AdobeXD](https://www.adobe.com/tw/products/xd.html)




