【新要闻】学完HTML、CSS定位、Flex、选择器、盒子模型，可以做什么项目练手？
2022-09-29 10:04:12来源：程序员耳东
这篇笔记聊聊新手学完HTML、CSS定位、Flex、选择器等等基础知识以后，可以做什么项目来做练习 这个问题群里很多朋友问过我：“我要做什么项目才能练习到相关的知识点？”
其实这个问题比较难回答，因为我不知道你现在会什么，如果推荐的项目太难，那你肯定写不下去；如果推荐的项目太简单，也没啥意思。
【资料图】
所以大家在选择项目练习的时候，最好是结合自己当前的能力和学习的知识点来，而且最好是基于你学习的知识点并且还可以锻炼到其他方面的能力，并且这些其他方面的能力可以让你不至于太痛苦的去学习，这种项目就是突破你舒适区并还不会让你到达痛苦区的，非常适合拿来做练习。
百度首页不吹不黑，我觉得百度首页就是一个非常适合拿来练习的项目，它会涉及到以下知识点：CSS选择器、HTML结构划分、盒子模型、Flex、CSS定位，然后下面我分析分析这些知识点都用到哪里了。
划分HTML结构拿到一个页面的时候，很多新手可能觉得无从下手，其实我们要做的第一件事情就是划分HTML的结构，并且选择合适的HTML元素，比如百度首页这个页面，我们该如何去划分呢，如下图：
一个合理的HTML结构划分，可以让我们的代码更加好写。
运用FlexFlex布局在工作中使用频率非常高，而且也是目前官方最好用的一维布局方案，比如在下面这些模块都会用到：
这部分可以使用到flex布局的flex-direction、flex-grow和flex-shrink属性，需要你去判断如何设置flex布局的主轴、伸展和缩短。
这部分可以使用到flex的居中布局，flex-grow伸展，flex-basis等等属性。
盒子模型盒子模型是CSS中很基础的一个概念，之前我给学员讲的时候，ta感觉到很枯燥，但是在实战百度首页的时候，在输入框和按钮对齐高度的时候，就会使用到盒子模型。
CSS定位在实现百度首页的时候，我们也可以使用CSS的定位position属性来写，比如说下面这部分位于导航条的最右边，就可以使用定位来做：
