這篇筆記聊聊新手學(xué)完HTML、CSS定位、Flex、選擇器等等基礎(chǔ)知識以后，可以做什么項(xiàng)目來做練習(xí) 這個問題群里很多朋友問過我：“我要做什么項(xiàng)目才能練習(xí)到相關(guān)的知識點(diǎn)？”

其實(shí)這個問題比較難回答，因?yàn)槲也恢滥悻F(xiàn)在會什么，如果推薦的項(xiàng)目太難，那你肯定寫不下去；如果推薦的項(xiàng)目太簡單，也沒啥意思。

所以大家在選擇項(xiàng)目練習(xí)的時(shí)候，最好是結(jié)合自己當(dāng)前的能力和學(xué)習(xí)的知識點(diǎn)來，而且最好是基于你學(xué)習(xí)的知識點(diǎn)并且還可以鍛煉到其他方面的能力，并且這些其他方面的能力可以讓你不至于太痛苦的去學(xué)習(xí)，這種項(xiàng)目就是突破你舒適區(qū)并還不會讓你到達(dá)痛苦區(qū)的，非常適合拿來做練習(xí)。

百度首頁

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

劃分HTML結(jié)構(gòu)

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

一個合理的HTML結(jié)構(gòu)劃分，可以讓我們的代碼更加好寫。

運(yùn)用Flex

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

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

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

盒子模型

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

CSS定位

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

? ?