前端小学生李不白又来了,最近比较忙,就没怎么发头条。不是学习忙,有其它事在忙。
emmmmm,在说天猫官网之前呢,先说一下自己的课程。
html5,css3 我的第一阶段课程已经结束,中间又报了个layUI的课,大概半个月的时间课程。然后月底开JS课,学了JS就可以做动态网页交互的方面了。
结课之前的实战内容,小米官网。现在刚写了一半,准备写天猫官网之前,先把小米官网做完。并说一说新手容易翻车的地方,如何解决。因为我也是新手嘛,写的过程中难免会翻车,不过问题不大,解决就好了。哈哈......
接下来说一说天猫官网,先上图。
![ae07dd683e140d99086a3d955227093f.png](https://i-blog.csdnimg.cn/blog_migrate/f6a30bf25cb51b413beeef961d606bb7.jpeg)
每个网站的话也就网页头部需要处理的代码比较多一些,包括导航栏啊,购物列表,轮播图什么的。需要注意的部分,就是每一部分的层级怎么弄,写小米的时候就因为层级的问题翻了车,哈哈,不过问题不大问题不大,解决了。
还有就是标签属性问题,也翻车了。因为h5新标签我还没有完全了解其属性,结果翻车在nav标签上。呵呵。也问题不大。到时候小米写完再跟大家聊这个问题。
![ea3905a54f7abe8640a28bea59e6f644.png](https://i-blog.csdnimg.cn/blog_migrate/f68e282abbbef2a8760b54bba18b2f23.jpeg)
接下来说一下天猫侧边导航栏的问题,不得不说这个侧边栏特别漂亮,hover之后的状态特别舒服,还需要注意的就是这个侧边栏有一个响应式,当我们的浏览器窗口变小,它这个侧边栏的状态也会发生改变这个值得研究下。和小米的侧边栏不一样,小米的是浏览器窗口变小,侧边栏整体变小,这个天猫就是只剩下了一个购物车的选项。
继续往下看,上图。
![09ed7323e869453536ba56874ae95f9b.png](https://i-blog.csdnimg.cn/blog_migrate/15c3bc17aefaa7033328fc85da47274d.jpeg)
这一部分就很简单没什么好了解的,一个无序列表搞定,继续下一张图。
![c0bcbd1f9569507c00dd3113240417c2.png](https://i-blog.csdnimg.cn/blog_migrate/5add3aef7031661f346c6c4d44b1237c.jpeg)
这一部分呢就是分两个板块,一个左边的大商品部分,一个盒子搞定。另一边呢就用弹性盒模型去解决。
继续上图。
![c00ef292b31c38e193529e489576231e.png](https://i-blog.csdnimg.cn/blog_migrate/669c6b4a1d58956195b11e4eb07c11f0.jpeg)
接下来就是底部部分,底部也没有什么好说的,都是比较简单的操作。
然后之后的岁月里呢,就是不断的实战不断的发现问题,分享给大家,解决问题的办法也分享给大家。虽然现在很菜了,可能代码不够精简,但是我会努力的。
也希望评论区的各位前端大神多多指点。
然后刚入行的小伙伴也可以关注一波,大家共同发现问题解决问题,一起进步,争取早日成为这个行业的大牛,嘿嘿。
这期就先拜拜啦,下期小米商城实战见!!!