一步一步写web之初识web（四）

一、在userbar左边添加剩余部件

这里的组件是可以跳转的，添加的链接为百度贴吧拷贝过来的真实链接，（右边的登录、注册、问题反馈等都是指向百度首页，没有区分链接）。样式主要参考谷歌开发者工具打开后得到的样式。

二、添加百度搜索框样式

打开网页元素发现嵌套了很多层，觉得有点没必要，有点不想写的，后来还是坚持了下来，可能初学者的惰性吧，下面是实现的效果截图。

这里面的搜索功能没有实现，只是展现了样式。高级搜索可以跳转，也是百度贴吧原有的链接。

三、增加分栏效果

这个增加分栏是用的flex布局，与原贴吧内容无关，属于自己的任意扩展，就当是熟悉flex布局了。

这是实现的效果，实际是一个容器被分成两部分，用flex：1进行填充。实际效果只有黄色和蓝色两部分，其他多余的东西是截图截图出来。

四、闲谈

其实今天打了退堂鼓，觉得做得都是重复的。当然不是说重复劳动不好，实际上新手就应该多重复，熟能生巧，我不满的是自己一味按照百度贴吧源代码写，没有静下心思考为什么这样做。有效果不好的时候也是为了实现效果而实现，没有达到学习的目的，这不是一个好的状态，差点就不写了，后来想想，即便是没思考也要把他写完，逼了自己一把。

还有一个不想写的原因是：百度贴吧布局是传统的基于盒子模型，依赖display属性+position属性+float属性。而现在的主流是flex布局。之前接触的react native一直用的也都是flex布局，算是一种心理上的懈怠吧。

明天争取实现一个滚动效果（有同学过来我的城市玩，不一定有时间写代码了，晚上回来尽量写点吧），这个效果写完了就来个总结吧，毕竟是初识web，主要是熟悉页面布局，熟悉css属性，熟悉JavaScript、HTML、CSS之间是怎么协调工作的。与后端交互不多。初识系列结束后再进入react系列，学习一下eract框架，react也算是从头学起吧，争取写的更丰富些，加入一些与后端的交互。又是一个小白的起步，给自己加油！

最后附上今天的代码提交，依然在github上：https://github.com/dwenb/webLearning 需要的可以自行拉下来参考，也可以对照我的每一次提交看看我的改动，推荐大家用一个图形化同步工具sourceTree，可以清晰的查看每次提交等，是一个不错的工具。