仿淘宝首页笔记

两天的时间撸完淘宝首页(静态),据说这是最复杂的网页布局之一。一开始做完后还觉得不错,看了视频讲解后,感觉自己运用知识能力还是不足。

首先,展示一下界面。因为图片是打印转pdf然后截图的,所以右边的导航栏向右了,其实靠近左边栏目的。

 过程中主要使用div盒子和ul li标签和span标签,图片使用的img标签。定位主要是float浮动和position:relation。

总结:看了视频后发现主要有以下不足之处:

1.细节不到位:颜色没有使用渐变色,看了视频后才学会方法为background:linear-gradient(to right,#xxxxxx 0,#xxxxxx 100%).

2.便签不够语义化,一开始以为只做静态页面其中用了大量的span标签,实际一些可点击的部分应使用<a>b标签。

3.背景图片应放到css中设置,这样比较好维护网站。

4.li标签水平还可以使用float实现。

5.代码结构不够语义化,起名或是结构都不完美。

6.没有整体设计概念,写一步是一步这样比较乱,没有考虑到完整页面。