以inside 網路趨勢網站導覽列為例：
＃還有搜尋框元件：
將網頁拆分成一個個最小元件(原子Atoms)
＃最小元件(原子Atoms)：label | input|search btn
＃最小元件組成一個小功能元件，如：搜尋框
＃組成導覽列元件：logo元件＋搜尋框＋a：link
＃組成模板：
＃組成頁面：
＃還有搜尋框元件：
＃最小元件(原子Atoms)：label | input|search btn
＃最小元件組成一個小功能元件，如：搜尋框
＃組成導覽列元件：logo元件＋搜尋框＋a：link
＃組成模板：
＃組成頁面：
![[Week 2] JavaScript - 變數、陣列、物件、== 與 ===](https://mily.coderbridge.io/2020/07/20/week2-Javasciprt-02/?utm_source=coderbridge-com&utm_medium=indie_related_post_img&utm_campaign=Day01-網頁介面基本認識_[Week 2] JavaScript - 變數、陣列、物件、== 與 ===_@milyzoo_https://static.coderbridge.com/images/covers/default-post-cover-1.jpg)
