一、在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,可以清晰的查看每次提交等,是一个不错的工具。