诗与远方

生活~诗~远方

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:因为图片大小限制,有一部分被切了。连我帅鲸鱼都被缩的好丑)

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_28300493/article/details/52252587
想对作者说点什么? 我来说一句

仿淘宝商品浏览界面

2014年08月18日 1.47MB 下载

仿淘宝网html网页模板

2018年05月01日 1.32MB 下载

淘宝首页html模板

2018年04月06日 1.2MB 下载

淘宝首页HTML源码

2015年12月16日 1.34MB 下载

仿淘宝等网站html代码

2015年06月08日 3.21MB 下载

仿淘宝html源码 web源码

2017年10月18日 1.34MB 下载

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

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭