這篇筆記聊聊新手學完HTML、CSS定位、Flex、選擇器等等基礎知識以后，可以做什么項目來做練習 這個問題群里很多朋友問過我：“我要做什么項目才能練習到相關的知識點？”

其實這個問題比較難回答，因為我不知道你現在會什么，如果推薦的項目太難，那你肯定寫不下去；如果推薦的項目太簡單，也沒啥意思。

所以大家在選擇項目練習的時候，最好是結合自己當前的能力和學習的知識點來，而且最好是基于你學習的知識點并且還可以鍛煉到其他方面的能力，并且這些其他方面的能力可以讓你不至于太痛苦的去學習，這種項目就是突破你舒適區并還不會讓你到達痛苦區的，非常適合拿來做練習。

百度首頁

不吹不黑，我覺得百度首頁就是一個非常適合拿來練習的項目，它會涉及到以下知識點：CSS選擇器、HTML結構劃分、盒子模型、Flex、CSS定位，然后下面我分析分析這些知識點都用到哪里了。

劃分HTML結構

拿到一個頁面的時候，很多新手可能覺得無從下手，其實我們要做的第一件事情就是劃分HTML的結構，并且選擇合適的HTML元素，比如百度首頁這個頁面，我們該如何去劃分呢，如下圖：

一個合理的HTML結構劃分，可以讓我們的代碼更加好寫。

運用Flex

Flex布局在工作中使用頻率非常高，而且也是目前官方最好用的一維布局方案，比如在下面這些模塊都會用到：

這部分可以使用到flex布局的flex-direction、flex-grow和flex-shrink屬性，需要你去判斷如何設置flex布局的主軸、伸展和縮短。

這部分可以使用到flex的居中布局，flex-grow伸展，flex-basis等等屬性。

盒子模型

盒子模型是CSS中很基礎的一個概念，之前我給學員講的時候，ta感覺到很枯燥，但是在實戰百度首頁的時候，在輸入框和按鈕對齊高度的時候，就會使用到盒子模型。

CSS定位

在實現百度首頁的時候，我們也可以使用CSS的定位position屬性來寫，比如說下面這部分位于導航條的最右邊，就可以使用定位來做：

? ?