又是周末了,想着开始我的每周一切(每周做一次从切图到静态网页布局的练习)任务吧,无意间看了看别人的页面,发现——我去,这个动画挺有意思的啊,怎么实现的?然后翻代码+搜索,啊,原来是插件啊~给我的也用上!

animate.css,可实现多种动画功能!

使用方法见http://www.jq22.com/jquery-info819

然后我又发现,动画是实现了,可是一加载页面,从上到下动画一股脑全完事了,不对啊,别人是滚到到哪动画在哪开始,再找原因!这里有个wow.js是干嘛的?一查——

wow.js,依赖 animate.css,可实现滚动动画!而且很轻量级!

使用方法见http://www.dowebok.com/131.html

看来是不能闭门造车啊,要学的东西还是很多的,而且上面这两个都是支持自己定制的。

后来又想,我这个人主页做的是不是有点简陋啊,不能因为喜欢紫色,就整个页面全是紫色啊,来个图片是不是好点?OK,加个图片!可是。。页面一缩小,图片不能覆盖整个浏览器窗口了,怎么办?这么简单的问题,肯定得找CSS啊,原来:

background-size: cover;把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。要的就是这个!

W3school要多看啊!

http://www.w3school.com.cn/cssref/pr_background-size.asp

后来给女朋友看了看,说你可不可以让这个背景图固定,不跟着滚动啊,我一想,这效果倒是经常见到,自己还没用过呢,查!

background-attachment: fixed;当页面的其余部分滚动时,背景图像不会移动。GET!

把这个和背景图放在body里,妥妥的的实现这个要求!

多学多看多想!前端还是挺有意思的!继续学习!

我的简陋主页:https://zhangcuizc.github.io/

——YC,你学到了吗?——学到了学到了的更多相关文章

  1. 学EE做硬件找工作不如学CS做软件,为什么会这样?

    学EE做硬件找工作不如学CS做软件,为什么会这样? 电子工程(EE)就业最好的方向居然是转计算机,也许让有的人觉得很不公平,EE也是很重要的学科,我们学习也很努力,为什么就业会不如CS?也有的人好奇, ...

  2. 我不是学Java的!我不是学Java的!我不是学Java的!。。。。【自我催眠中】

    我不是学Java的!我不是学Java的!我不是学Java的!....[自我催眠中]

  3. 以我的亲身经历,聊聊学python的流程,同时推荐学python的书

    因为干活要用到,所以我大概于19年5月开始学python,大概学了1个月后,我就能干公司的活了,而且这python项目还包含了机器学习等要素,大概3个月后,我还承担了项目里开发机器学习数据分析的任务. ...

  4. 【机器学*】k-*邻算法(kNN) 学*笔记

    [机器学*]k-*邻算法(kNN) 学*笔记 标签(空格分隔): 机器学* kNN简介 kNN算法是做分类问题的.思想如下: KNN算法的思想总结一下:就是在训练集中数据和标签已知的情况下,输入测试数 ...

  5. 为什么学完C语言觉得好像没学一般?

    不少同学从Hello world学到文件操作之后,回顾感觉会又不会? 学会了又感觉没学会?这种不踏实.模糊虚无的感觉?   原因在于编程不同于理论学科,你听懂和理解了理论就可以运用. 比如历史地理,看 ...

  6. 又到期末了,为什么学完C语言觉得好像没学一般?复习资料来一份

    不少同学从Hello world学到文件操作之后,回顾感觉会又不会? 学会了又感觉没学会?这种不踏实.模糊虚无的感觉? 原因在于编程不同于理论学科,你听懂和理解了理论就可以运用,比如历史地理,看完书, ...

  7. 【机器学*与R语言】2-懒惰学*K*邻(kNN)

    目录 1.理解使用KNN进行分类 KNN特点 KNN步骤 1)计算距离 2)选择合适的K 3)数据准备 2.用KNN诊断乳腺癌 1)收集数据 2)探索和准备数据 3)训练模型 4)评估模型的性能 5) ...

  8. 从零开始学 Java - 我放弃了 .NET ?

    这不是一篇引起战争的文章 毫无疑问,我之前是一名在微软温暖怀抱下干了近三年的 .NET 开发者,为什么要牛(sha)X一样去搞 Java 呢?因为我喜欢 iOS 阿!哈哈,开个玩笑.其实,开始学 Ja ...

  9. 本科小白学ROS 和 SLAM(一):杂谈

    本人最近才迷恋上ROS(Robot Operating System),准确的说应该是6月中旬,具体的记不清了(可能是年纪大了,容易健忘).对于一个电子DIY的狂热爱好者来说,我在校的梦想就是做一个属 ...

  10. 跟我学solr---吐槽一下,我的文章被抄袭啦

    今天闲来无事,就在在百度上搜了下面"跟我学solr",看看这几周来自己的努力成果怎么样,不搜还好,搜了就图学了.被原封不动地抄袭了!并且抄袭的文章还在百度排名第一,我自己的却被排到 ...

随机推荐

  1. PAT 1023. 组个最小数 (20)

    给定数字0-9各若干个.你可以以任意顺序排列这些数字,但必须全部使用.目标是使得最后得到的数尽可能小(注意0不能做首位).例如:给定两个0,两个1,三个5,一个8,我们得到的最小的数就是1001555 ...

  2. IE8 HACK介绍

    1.‘\9’: eg:.test { color/*\**/: blue\9 }.header {width:300px;} /* 所有浏览器*/.header {width/*\**/:330px\ ...

  3. vertical-align 笔记

    一些属性解释. 几个自己认为常用到的属性 baseline:默认 数值,px 百分比等是元素相对于基线偏移值,负数为向下偏移,正数为向上: text-top:把用vertical属性元素的顶端与父元素 ...

  4. hessian学习

    hessian是一个采用二进制格式传输的服务框架,相对传统soap web service,更轻量,更快速.官网地址:http://hessian.caucho.com/ 目前已经支持N多语言,包括: ...

  5. JavaScript:立即执行的函数表达式

    先要理解清楚几个概念:   以下转自:http://www.cnblogs.com/TomXu/archive/2011/12/31/2289423.html  问题的核心 当你声明类似functio ...

  6. QTableView 添加进度条

    记录一下QTableView添加进度条 例子很小,仅供学习 使用QItemDelegate做的实现 有自动更新进度 要在.pro文件里添加 CONFIG += c++ ProgressBarDeleg ...

  7. 用linqPad帮助你快速学习LINQ

    在这里我向大家推荐的一个具是LinqPad有了这个工具并熟练使用就可以很快学习并掌握linq linqPad下载地址:http://www.linqpad.net/ 它也自带了很多例子方便大家查询,l ...

  8. Theano3.1-练习之初步介绍

    来自 http://deeplearning.net/tutorial/,虽然比较老了,不过觉得想系统的学习theano,所以需要从python--numpy--theano的顺序学习.这里的资料都很 ...

  9. opencv6.1-imgproc图像处理模块之平滑与形态学操作

    这个部分是<opencv-tutorials.pdf>的部分,这部分也是几大部分中例子最多的,其实这个教程的例子都很不错,不过有些看得出来还是c接口的例子,说明例子有些年头了,其实在&qu ...

  10. 高性能JavaScript 重排与重绘

    先回顾下前文高性能JavaScript DOM编程,主要提了两点优化,一是尽量减少DOM的访问,而把运算放在ECMAScript这一端,二是尽量缓存局部变量,比如length等等,最后介绍了两个新的A ...