以inside 網路趨勢網站導覽列為例：
＃還有搜尋框元件：
將網頁拆分成一個個最小元件(原子Atoms)
＃最小元件(原子Atoms)：label | input|search btn
＃最小元件組成一個小功能元件，如：搜尋框
＃組成導覽列元件：logo元件＋搜尋框＋a：link
＃組成模板：
＃組成頁面：
＃還有搜尋框元件：
＃最小元件(原子Atoms)：label | input|search btn
＃最小元件組成一個小功能元件，如：搜尋框
＃組成導覽列元件：logo元件＋搜尋框＋a：link
＃組成模板：
＃組成頁面：
![[BE201] Express & Sequelize part 3](https://yymarlerr.coderbridge.io/2021/08/24/be201-express-&-sequelize-part-3/?utm_source=coderbridge-com&utm_medium=indie_related_post_img&utm_campaign=Day01-網頁介面基本認識_[BE201] Express & Sequelize part 3_@yymarlerr_https://static.coderbridge.com/images/covers/default-post-cover-2.jpg)
