html5导航栏跟随界面_html5与css3结课,准备实战一下天猫官网。

前端小学生李不白又来了,最近比较忙,就没怎么发头条。不是学习忙,有其它事在忙。

emmmmm,在说天猫官网之前呢,先说一下自己的课程。

html5,css3 我的第一阶段课程已经结束,中间又报了个layUI的课,大概半个月的时间课程。然后月底开JS课,学了JS就可以做动态网页交互的方面了。

结课之前的实战内容,小米官网。现在刚写了一半,准备写天猫官网之前,先把小米官网做完。并说一说新手容易翻车的地方,如何解决。因为我也是新手嘛,写的过程中难免会翻车,不过问题不大,解决就好了。哈哈......

接下来说一说天猫官网,先上图。

ae07dd683e140d99086a3d955227093f.png

每个网站的话也就网页头部需要处理的代码比较多一些,包括导航栏啊,购物列表,轮播图什么的。需要注意的部分,就是每一部分的层级怎么弄,写小米的时候就因为层级的问题翻了车,哈哈,不过问题不大问题不大,解决了。

还有就是标签属性问题,也翻车了。因为h5新标签我还没有完全了解其属性,结果翻车在nav标签上。呵呵。也问题不大。到时候小米写完再跟大家聊这个问题。

ea3905a54f7abe8640a28bea59e6f644.png

接下来说一下天猫侧边导航栏的问题,不得不说这个侧边栏特别漂亮,hover之后的状态特别舒服,还需要注意的就是这个侧边栏有一个响应式,当我们的浏览器窗口变小,它这个侧边栏的状态也会发生改变这个值得研究下。和小米的侧边栏不一样,小米的是浏览器窗口变小,侧边栏整体变小,这个天猫就是只剩下了一个购物车的选项。

继续往下看,上图。

09ed7323e869453536ba56874ae95f9b.png

这一部分就很简单没什么好了解的,一个无序列表搞定,继续下一张图。

c0bcbd1f9569507c00dd3113240417c2.png

这一部分呢就是分两个板块,一个左边的大商品部分,一个盒子搞定。另一边呢就用弹性盒模型去解决。

继续上图。

c00ef292b31c38e193529e489576231e.png

接下来就是底部部分,底部也没有什么好说的,都是比较简单的操作。

然后之后的岁月里呢,就是不断的实战不断的发现问题,分享给大家,解决问题的办法也分享给大家。虽然现在很菜了,可能代码不够精简,但是我会努力的。

也希望评论区的各位前端大神多多指点。

然后刚入行的小伙伴也可以关注一波,大家共同发现问题解决问题,一起进步,争取早日成为这个行业的大牛,嘿嘿。

这期就先拜拜啦,下期小米商城实战见!!!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值