以inside 網路趨勢網站導覽列為例：
＃還有搜尋框元件：
將網頁拆分成一個個最小元件(原子Atoms)
＃最小元件(原子Atoms)：label | input|search btn
＃最小元件組成一個小功能元件，如：搜尋框
＃組成導覽列元件：logo元件＋搜尋框＋a：link
＃組成模板：
＃組成頁面：
＃還有搜尋框元件：
＃最小元件(原子Atoms)：label | input|search btn
＃最小元件組成一個小功能元件，如：搜尋框
＃組成導覽列元件：logo元件＋搜尋框＋a：link
＃組成模板：
＃組成頁面：
_@tempura327_https://static.coderbridge.com/images/covers/default-post-cover-1.jpg)
![[坑] It’s MIME type ('text/html') is not a supported stylesheet MIME type](https://david-christian.coderbridge.io/2022/04/11/javascript/?utm_source=coderbridge-com&utm_medium=indie_related_post_img&utm_campaign=Day01-網頁介面基本認識_[坑] It’s MIME type ('text/html') is not a supported stylesheet MIME type_@david-christian_https://static.coderbridge.com/images/covers/default-post-cover-2.jpg)
![[JS] 迴圈: while loop 、 for loop 結構與執行流程](https://osmand-FElab.coderbridge.io/2021/08/31/structure-of-while-loop-and-for-loop/?utm_source=coderbridge-com&utm_medium=indie_related_post_img&utm_campaign=Day01-網頁介面基本認識_[JS] 迴圈: while loop 、 for loop 結構與執行流程_@OsmandLN_https://static.coderbridge.com/images/covers/default-post-cover-3.jpg)
