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

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. wechat开发

    1.easywechat安装 2.weichat打通服务器 function getTest(Request $request){ $token = 'zhenhaokeji'; $data = $r ...

  2. 图片上传功能<转>http://blog.csdn.net/u011159417/article/details/50126023

    以前也实现过上传,只不过每次都是,写完之后没有总结,下次遇到时,还要重新写,重新调式,很是浪费时间,所以,今天实现一个上传图片的功能,包括简单的页面和servlet,下次再要写这个功能时,直接拿过来就 ...

  3. HTTP 错误 500.22 - Internal Server Error

    HTTP 错误 500.22 - Internal Server Error 检测到在集成的托管管道模式下不适用的 ASP.NET 设置. 最可能的原因: 此应用程序在 system.web/http ...

  4. MySQL数据库的优化(下)MySQL数据库的高可用架构方案

    MySQL数据库的优化(下)MySQL数据库的高可用架构方案 2011-03-09 08:53 抚琴煮酒 51CTO 字号:T | T 在上一篇MySQL数据库的优化中,我们跟随笔者学习了单机MySQ ...

  5. linux查看出口ip 及w3m字符浏览器

    Linux 查看服务器出口IP    字符浏览器: http://wiki.ubuntu.org.cn/W3m

  6. SQL基础之数据库快照

    1.认识快照 如名字一样,数据库快照就可以理解为数据库某一时刻的照片,它记录了此时数据库的数据信息.如果要认识快照的本质,那就要了解快照的工作原理.当我们执行t-sql创建快照后,此时就会创建一个或多 ...

  7. 实用的开源百度云分享爬虫项目yunshare - 安装篇

    今天开源了一个百度云网盘爬虫项目,地址是https://github.com/callmelanmao/yunshare. 百度云分享爬虫项目 github上有好几个这样的开源项目,但是都只提供了爬虫 ...

  8. Castle 多继承选择

    Castle 多继承选择 很多时候,我们定义了一个接口,但是这个接口会有多种不同的,这时IOC构造函数注入的时候,就需要自动选择对应的实现. public interface ITestService ...

  9. JavaScript学习笔记-简单的欢迎cookie

    0<!DOCT0000YPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml&quo ...

  10. C# Gabbage Collecting System

    * 这个程序非常巧妙的探测了一下垃圾回收机制,发现如下结论: * 当内存紧急时,才会启动垃圾回收GC.Collect() * 从此程序的运行上来看,delete是连续出现的,这体现了垃圾回收的强度. ...