css+html5仿写淘宝首页

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_28300493/article/details/52252587

问题定义

为了锻炼自己原生的能力,我决定仿写一下淘宝的首页。一下记录,仿写的全部步骤。按照软件工程的方法来实现。(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:因为图片大小限制,有一部分被切了。连我帅鲸鱼都被缩的好丑)

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页