HTML5+CSS3实现春节贺卡_学习笔记

首页免费课 HTML5+CSS3实现春节贺卡笔记

HTML5+CSS3实现春节贺卡

                
                爱米
            Web前端工程师

                    查看讲师更多课程 
                    爱米讲师的其他课程
                
从入门到实战，轻松完成Angular8构建CRM系统
实战·中级·717

                                                                                                                                    ￥69.90
                                            
Grid布局基础
中级·13161
免费课程
                                
                难度中级
            
                时长 1小时51分
            
                学习人数
            
综合评分9.67
                            211人评价
                        查看评价
                                9.9
                                内容实用
                            
                                9.5
                                简洁易懂
                            
                                9.6
                                逻辑清晰

最热最新

XJRong 05:51

对于伪类开始，必须要有content:"";不然无法显示

查看全部

1 采集收起来源：移动端项目开发--表示层（page1）
2018-03-22
慕雪7515468

演示网址 http://www.imooc.com/activity/project1

查看全部

1 采集收起来源：课程介绍
2017-04-12
殇慕言

linear 匀速 infinite 重复 margin auto 居中时用且上下左右都为0

查看全部

1 采集收起来源：移动端项目开发——特效
2017-01-12
慕工程2957023

console.log("网页可见区域宽：" + document.body.clientWidth); console.log("网页可见区域高：" + document.body.clientHeight); console.log("网页可见区域宽：" + document.body.offsetWidth );（包括边线的宽） console.log("网页可见区域高：" + document.body.offsetHeight);（包括边线的宽） console.log("网页正文全文宽：" + document.body.scrollWidth); console.log("网页正文全文高：" + document.body.scrollHeight); console.log("网页被卷去的高：" + document.body.scrollTop); console.log("网页被卷去的左：" + document.body.scrollLeft); console.log("网页正文部分上：" + window.screenTop); console.log("网页正文部分左：" + window.screenLeft); console.log("屏幕分辨率的高：" + window.screen.height); console.log("屏幕分辨率的宽：" + window.screen.width); console.log("屏幕可用工作区高度：" + window.screen.availHeight); console.log("屏幕可用工作区宽度：" + window.screen.availWidth);

查看全部

1 采集收起来源：移动端项目开发——视口控制
2018-03-22
班大人 03:29

切图-重构-前端-优化

查看全部

1 采集收起来源：移动端项目开发----分析
2016-10-28
Mr_Qiao 04:55

此处三张背景图片依次顺序垂直显示，但我的代码呈现的结果是覆盖，还没找到原因。

查看全部

1 采集收起来源：移动端项目开发---表示层（bg）
2016-10-25
慕粉3442885

*{margin: 0;padding: 0;border: none;font-size: 1.5625vw; font-family: "Microsoft Yahei"; } html,body { height: 100%; } /*music*/ #music { position: fixed; top: 3vh; right: 4vw; z-index: 5; width: 15vw; height: 15vw; border: 4px solid #ef1639; border-radius: 50%; background-color: #fff; } #music >img:first-of-type { position: absolute; top: 24%; right: 2.5%; width: 28.421%; } #music >img:last-of-type { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 79%; } /*page bg*/ .page { height: 100%; } .page >.bg { position: absolute; z-index: -1; height: 100%; width: 100%; } /*page1*/ #page1 >.bg { background: url("../images/p1_bg.jpg" no-repeat center center); background-size: 100%; } /*page2*/ #page2 >.bg { background: url("../images/p2_bg.jpg" no-repeat center center); background-size: 100%; } /*page3*/ #page3 >.bg { background: url("../images/p3_bg.jpg" no-repeat center center); background-size: 100%; } 求大神帮我看看，背景图片都出不出来

查看全部

1 采集收起来源：移动端项目开发---表示层（bg）
2018-03-22
Lf94love 00:05

项目开发流程

查看全部

1 采集收起来源：移动端项目开发----分析
2016-07-27
Angel丶Gy

console.log("网页可见区域宽：" + document.body.clientWidth); console.log("网页可见区域高：" + document.body.clientHeight); console.log("网页可见区域宽：" + document.body.offsetWidth ); console.log("网页可见区域高：" + document.body.offsetHeight); console.log("网页正文全文宽：" + document.body.scrollWidth); console.log("网页正文全文高：" + document.body.scrollHeight); console.log("网页被卷去的高：" + document.body.scrollTop); console.log("网页被卷去的左：" + document.body.scrollLeft); console.log("网页正文部分上：" + window.screenTop); console.log("网页正文部分左：" + window.screenLeft); console.log("屏幕分辨率的高：" + window.screen.height); console.log("屏幕分辨率的宽：" + window.screen.width); console.log("屏幕可用工作区高度：" + window.screen.availHeight); console.log("屏幕可用工作区宽度：" + window.screen.availWidth);

查看全部

1 采集收起来源：移动端项目开发——视口控制
2018-03-22
LewJun072 00:11

前端开发步骤

查看全部

1 采集收起来源：移动端项目开发----分析
2016-07-13
heyGerry

click事件有300毫秒的延迟，最好用touchstart代替。 music.addEventListener("touchstart",funciton(){},false) 语法element.addEventListener(event, function, useCapture) event必须。字符串，指定事件名。注意: 不要使用 "on" 前缀。例如，使用 "click" ,而不是使用 "onclick"。 function必须。指定要事件触发时执行的函数。当事件对象会作为第一个参数传入函数。事件对象的类型取决于特定的事件。例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。

查看全部

1 采集收起来源：移动端项目开发——交互(music停止)
2018-03-22
不够噎着

我擦，突然变成个男的，好不适应

查看全部

1 采集收起来源：课程介绍
2016-07-11
qq_颖_男人_03406653 02:12

<aduio autoplay=“true”>兼容性差

查看全部

1 采集收起来源：移动端项目开发——交互(music控制)
2018-03-22
街角的风铃叮铃叮铃 03:12

1.移动项目，采用HTML5做项目结构层。 2.分析网页呈现形式，直接采用Css3完成网页表现层。 3.特效分析，采用Css3完成主要特效，采用JavaScript完成控制交互。 4.背景音乐直接采用JavaScript控制Audio的API进行控制。 5.直接采用原生态的JavaScript控制Css来实现翻页效果，放弃前端框架和类库。

查看全部

1 采集收起来源：移动端项目开发分析
2016-06-12
上衫原

对vw的解读：才学html不久，更别说做移动端。vw是什么？看了很久，决定用数学去理解了。 10/640=0.015625 其中 10:10px，为html字体大小(根节点大小)。640:默认屏幕宽。解读：在640中占10份的比例：为1/64*100%=1.5625%，老师说vw为100，即vw的单位在不同屏幕是不一样的。如：640宽的屏幕，1vw=640/100=6.4px,则根节点大小为：6.4*1.5625=10px 320同理：它是640的一半，即320px的屏幕，根节点大小为5px。我的理解是在640宽的屏幕，10px的字体很合适，以这样10/640的比例去适配其他宽度，就与640宽时的感官一样好，像小屏幕字体就不能也是10px，要小于它，大屏幕就大于它。 15vw：设图片75px，就可以求出它屏幕为500px宽。因为1vw=x/100(x为屏幕宽度) 15vw=15x/100 而15vw=75px，所以去一个未知数，75=0.15x x=500px

查看全部

1 采集收起来源：移动端项目开发----表示层
2016-06-09