css+html5仿写淘宝首页
来源:互联网 发布:程序员叫美女什么 编辑:程序博客网 时间:2024/04/30 15:48
问题定义
为了锻炼自己原生的能力,我决定仿写一下淘宝的首页。一下记录,仿写的全部步骤。按照软件工程的方法来实现。(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:因为图片大小限制,有一部分被切了。连我帅鲸鱼都被缩的好丑)
1 0
- css+html5仿写淘宝首页
- CSS仿淘宝首页导航条布局效果
- CSS仿淘宝首页导航条布局效果
- CSS仿淘宝首页导航条按钮布局效果
- CSS仿淘宝首页导航条布局效果
- HTML5+CSS+JavaScript仿百度登录之后的静态首页
- 仿淘宝首页轮播
- Android 仿淘宝首页界面
- CSS学习笔记-附加篇( CSS仿淘宝首页导航条按钮布局效果)
- 仿淘宝网首页导航条效果
- 仿淘宝首页商品分类列表效果
- flex布局练习,仿手机淘宝首页
- WEB前端:rem布局仿淘宝首页
- vlayout实战 —— 仿淘宝首页
- 仿百度首页div+css
- div+css写首页
- 仿淘宝首页的淘宝头条View垂直滚动
- 仿淘宝首页的淘宝头条View垂直滚动
- 前端性能优化
- C#调用GDI+1.1中的函数实现高斯模糊、USM锐化等经典效果。
- jdk-logging、log4j、logback日志介绍及原理
- C++ char类型最大值与最小值
- 2016年8月19号
- css+html5仿写淘宝首页
- 自定义view密码框等同于支付宝支付密码框
- 设计模式之单例模式
- HDU1158(dp46)
- Imageloader四种图片显示(圆形,淡入,圆角,修饰)使用
- 滤镜(内部效果)&快速蒙版(边缘效果)——羊皮卷
- android检查权限问题。
- gcc -L参数和-l参数
- Volley学习(五)HttpUrlConnection、Volley 2种方式实现头像上传