css+html5仿写淘宝首页

问题定义

为了锻炼自己原生的能力，我决定仿写一下淘宝的首页。一下记录，仿写的全部步骤。按照软件工程的方法来实现。（ps,纯为学习，没有什么不良居心~~）

可行性研究

技术采用原生js+html5+css3实现。完全可行

时间可行性

两天时间

需求分析

完全按照https://www.tmall.com网站实现。不需要交互。

总体设计

页面布局设计

草图如下

详细设计

从上图可以看出，主要内容包括：

1，首先对整个页面进行分析。如下草图。footer,header,nav,aside,section等部分。

2，引入rest.css。防止浏览器兼容问题的不一致（但是对seo有影响）。将页面字体字色字号等设置在rest.css中，为默认字体

3，对每个部分的布局分析。position:absolute/relative/fixed（具体如何分析，请查看我的博客:http://blog.csdn.net/qq_28300493/article/details/52327449）

4，对每个部分设置一个class.当制作复杂页面是，会设计各种css样式。很多重合很多不一样。对每个部分设置class，既可以保证css文件定义可复用，还可以在引用是使用元素之间的父子等关系，定位到每一个元素，而不需要为每个元素定义id

5，之后便具体到每一部分。头部和底部很容易。主要就是格式对齐。

6，中间部分。

6.1，中间轮播

6.2，菜单（：hover时display:block。）

6.3，图片浮动效果（css3 transform等）

6.4，图片栅格布局(使用到的布局：百分比布局，float,position,盒布局，流式布局，栅格布局…)

6.5，背景颜色的半透膜background-color(rgba(0,0,0,0.5);颜色不会被继承)

6.6，图片格式。需要高清的图片jpeg，webp(兼容有问题),小图片base64,gif,png等

7，兼容问题

源码

请看我的git帐号：https://github.com/zyd317/demo-funny/tree/master/tmal

测试

与原网站有一定的差距。基本需要使用到的都已经表现出了。达到了练手的目的。对于建立复杂页面的技巧增加了很多。

效果图：

差距

1，section主页面部分的几层楼图片是动态的。
2，菜单的展示做的并不美观
3，没有交互功能
4，动态生成内容的优化。
5，给我爱豆p的图细看有些毛糙。。。

（ps:不要问我这个用的图片上的帅哥是谁。我不会告诉你，那是我爱豆鲸鱼~~）
（pps:因为图片大小限制，有一部分被切了。连我帅鲸鱼都被缩的好丑）