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

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. css实现省略号

    样式: {width: 160px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;} 说明: white-space: ...

  2. MYSQL临时表创建索引

    DROP TEMPORARY TABLE IF EXISTS tmp_record_t2;CREATE TEMPORARY TABLE tmp_record_t2(consumption_id INT ...

  3. CareerCup All in One 题目汇总 (未完待续...)

    Chapter 1. Arrays and Strings 1.1 Unique Characters of a String 1.2 Reverse String 1.3 Permutation S ...

  4. JavaScript高级程序设计笔记 事件冒泡和事件捕获

    1.事件冒泡 要理解事件冒泡,就得先知道事件流.事件流描述的是从页面接收事件的顺序,比如如下的代码: <body> <div> click me! </div> & ...

  5. [Python]新手写爬虫全过程(已完成)

    今天早上起来,第一件事情就是理一理今天该做的事情,瞬间get到任务,写一个只用python字符串内建函数的爬虫,定义为v1.0,开发中的版本号定义为v0.x.数据存放?这个是一个练手的玩具,就写在tx ...

  6. ASP.NET Web API 安全验证之摘要(Digest)认证

    在基本认证的方式中,主要的安全问题来自于用户信息的明文传输,而在摘要认证中,主要通过一些手段避免了此问题,大大增加了安全性. 1.客户端匿名的方式请求 (无认证) HTTP/ Unauthorized ...

  7. jqMobile中的dialog和popup的区别

    主要区别是:dialog默认含回退按钮.并且dialog在1.4版中已经过时,1.5中将会移除. 下面是 原文1: Using a Dialog Window as a Popup A jQuery ...

  8. 【心得】怪异的JS的Date函数

    我们知道new Date('2013/1/1')是2013年1月1日, 那么new Date('2013/1/366')会报无效日期格式吗?答案是,这是一个有效的日期,但是他是表示2014年1月1日. ...

  9. Android中的各种单位

    px(像素):屏幕上的点.in(英寸):长度单位.mm(毫米):长度单位.pt(磅):1/72英寸.dp(与密度无关的像素):一种基于屏幕密度的抽象单位.在每英寸160点的显示器上,1dp = 1px ...

  10. 十天冲刺---Day5

    站立式会议 站立式会议内容总结: 燃尽图 照片 PM确实不应该交给组内编码最强的人来做. 编码的过程还要考虑整个项目的流程压力较大. 需要队友的支持和沟通.