隨著現代UI設計的發展，您可能已經聽過“扁平化”的概念。扁平化設計是指通過捕捉本質的美感和簡化設計來創建現代美學。這個概念流行很長一段時間，它已經成為設計師和前端開發者的必備技能之一。HTML和CSS都是扁平化設計的重要元素。

body{
background-color:#ECECEC;
}
header nav ul{
background-color:#1ABC9C;
}
header nav ul li{
display:inline-block;
margin:10px;
}
header nav ul li a{
color:white;
}

使用`pre`標簽，我們可以看到扁平化設計如何影響代碼的外觀。在這個例子中，我們使用了一個簡單的HTML文件和CSS樣式表，以實現扁平化設計。首先，我們通過將body標簽背景設置為灰色實現了簡單的背景。然后我們引入一個頭部和導航菜單。這個導航菜單的背景色是清爽的綠色。我們使用CSS設置導航菜單的樣式，包括將每個菜單項都在同一行內顯示，并設置間距。最后，我們使用CSS將文字顏色設置為白色，以便更好地看到導航菜單中的文字。

通過這個例子，我們可以看到使用HTML和CSS編寫具有扁平化設計的網頁是多么容易。扁平化設計不僅可以增強網頁的美感，還可以提高網站執行效率。因此，了解如何在HTML和CSS中使用扁平化設計是每一個前端開發人員應該具備的技能之一。