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

css+html5仿写淘宝首页相关推荐

仿写淘宝首页(静态)
历时半年整理出了十多万字的学习笔记,目前依旧在更新欢迎点赞和支持-
HTML5期末大作业：淘宝网站设计——仿2018淘宝首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码
HTML5期末大作业:淘宝网站设计--仿2018淘宝首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码常见网页设计作 ...
HTML5期末大作业：淘宝网站设计——仿2021淘宝首页(1页) 大学生网页制作教程表格布局网页模板学生HTML静态水网页设计作业成品简单网页制作代码学生商城网页作品免费设计
HTML5期末大作业:淘宝网站设计--仿2021淘宝首页(1页) 大学生网页制作教程表格布局网页模板学生HTML静态水网页设计作业成品简单网页制作代码学生商城网页作品免费设计常见网页设计作业 ...
静态HTML网页设计作品——仿2018淘宝首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码
HTML5期末大作业文章目录 HTML5期末大作业一.作品展示二.文件目录三.代码实现四.学习资料五.完整源码一.作品展示二.文件目录三.代码实现 <!DOCTYPE html ...
HTML+CSS大作业——仿2021淘宝首页(1页) 大学生网页制作教程表格布局网页模板学生HTML静态水网页设计作业成品简单网页制作代码学生商城网页作品免费设计
HTML5期末大作业文章目录 HTML5期末大作业一.作品展示二.文件目录三.代码实现一.作品展示二.文件目录三.代码实现 <!doctype html> <html ...
flex布局练习，仿手机淘宝首页
看了大神的flex教程,决定写个假手淘开心一下!我肯定三下五除二就能写完的!对!没错!~~~ .................................... ................ ...
div+css+jquery仿写HTML京东首页的练习及一些关于oo css的总结
整个工程: https://download.csdn.net/download/weixin_43388844/10864383 前言前几天看b站上极客学院的web前端开发第二部分时了解到OO C ...
仿京东淘宝等首页广告弹窗广告 dialog
记录贴防止以后忘记. 上图 1.dialog布局图片随便找的 <?xml version="1.0" encoding="utf-8"?> &l ...
JQuery仿最新淘宝网首页带箭头幻灯片,JQuery轮播图
JQuery代码 <script type="text/javascript"> $(function() { var $banner = $('.banner'); ...