个人简记为css3,H5+css3春节贺卡之个人收获

麻雀虽小，五脏俱全

虽然课程只是一个小小的移动端项目开发，但麻雀虽小，五脏俱全。

课程涉及到需求分析，切图，重构，优化等等知识！

一个好的项目，如果想要快速开发完成，知识储备肯定要充足！

html，html5，css，css3，javascript那肯定得会的！

都不会那得了解一番了！

代码会写了，编程工具得有一个好的哪！这能大大提高您的开发速度。当然，你十分厉害，用着记事本也能快乐的玩耍，这种大神，我只想说：“师傅，你收徒不？我能介绍个女同学您！”

开发工具很多，但最适合自己的才是最好的工具！

下面我们来进入项目开发过程！

项目分析

由于项目面对的是移动端用户，并且主题是新春主题，所以表现形式得欢快活泼！

项目涉及的特殊字体因为考虑到移动端并且有一定大小影响加载，所以采取图片代替

图片方面尽可能压缩到无损最小值

项目过小，用原生javascript代替其他框架.

为了便于测试，使用WampServer为本地服务器测试环境切图

切图的软件有Photoshop，Fireworks

重构涉及知识

前辈们分享的技巧我们得学习学习！避免进坑！

文章分享的包括！诸如：禁止缩放！宽度设置为设备宽度！禁止ios识别数字为电话号码等等！课程中的视口控制中的内容差不多都有一一讲到！并且也分享了很多老师没讲到的知识！

还有一本书里面的技巧也非常不错(推荐)！

项目由于是三屏全屏结构！所以得设置html，body元素的高度为100%；

html，body{height:100%}

css3方面用到的是

audio标签详细解析

js方面

项目涉及的知识都了解了一番，那学习起来就不会一头雾水，云里云雾的了！跟着老师的脚步开发完成后，测试就是必不可少的了！这WampServer就发挥它的作用了！测试了一番后，bug方面解决了后，可以尝试把第三屏的对联动起来！这里有类似教程！

总体来说，课程兼顾知识很多！也用了很多新特性！是一个非常棒的课程！

好了！这就是我看完整个课程所收获的东西！您的收获又是多少呢？欢迎大家一起探讨！

个人简记为css3,H5+css3春节贺卡之个人收获相关推荐

HTML5+CSS3实现春节贺卡
HTML5+CSS3实现春节贺卡切图-->重构-->前端-->优化知道原生的JS代码,了解Html5API,了解WampServer. 结构层为index.html 1 < ...
登录页面html5 css3 js代码,H5+css3+js搭建带验证码的登录页面
本文实例为大家分享了H5+css3+js搭建带验证码的登录页面,供大家参考,具体内容如下 login.html EasyBuy后台管理系统 .main_bar{ width:1350px; heigh ...
h5+css3简单实现网页端五子棋游戏1.0版
H5+css3简单实现五子棋游戏原理主要使用H5的拖拽接口功能,通过拖拽移动棋子,目标位置通过接收拖拽棋子的拷贝元素,实现棋子摆放. 效果图如下步骤第一步:简单排版五子棋游戏页面,设定好棋盘排 ...
android窗帘拉开动画,H5+CSS3窗帘拉开收起动画特效源码
效果图今天给大家带来了一个简单的特效源码 H5+CSS3窗帘拉开收起动画特效源码废话不多说,上源码! html { box-sizing: border-box; } *, *::after, * ...
想学好前端 H5 CSS3 的小朋友们康康我~
嗨喽,各位亲爱的 CSDN 小伙伴们,欢迎来到实力至上主义的教室(简单为喜欢的动漫打个小广告). 以下呢是我对前端 H5 & CSS3 常用知识点历时两个多月的倾心整理,内容简练,通俗易懂(比 ...
H5+CSS3移动商城界面.七天从零实战课程-信息_详情
欢迎大家收看我的视频课程:H5+CSS3移动商城界面.七天从零实战课程黄老师QQ:45157718 ,前端交流群群 147415688 https://edu.csdn.net/course/det ...
H5 CSS3特性实现动画效果
H5 CSS3特性制作动画曾手写纯js实现过轮播图,那会挺费劲的,更别提动画了,现在CSS3让这一步变得越来越简单了一,开始准备材料一张雪碧图(足够了) 手撕代码创建文件 animation ...
登录页面带验证码html,使用H5+css3+js实现带验证码的登录页面
使用H5+css3+js实现带验证码的登录页面发布时间:2020-10-28 19:51:18 来源:亿速云阅读:151 作者:Leah 本篇文章为大家展示了使用H5+css3+js实现带验证码的 ...
php窗帘excel,H5+CSS3逼真的窗帘拉开收起动画特效
H5+CSS3逼真的窗帘拉开收起动画特效 html { box-sizing: border-box; } *, *::after, *::before { box-sizing: inherit; ...

个人简记为css3,H5+css3春节贺卡之个人收获

个人简记为css3,H5+css3春节贺卡之个人收获相关推荐

最新文章

热门文章