【HTML5校企公益课】第二天
1、上午讲昨天的作业。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>作业</title>
<style type="text/css">
/* 选中父级ID 选中父级下面的所有span标签 */
#html span {
/* 文本 */
color: #FFC0CB;
background-color: royalblue;
margin-top: 7px;
/* 设置边框,solid为实线 */
border: 2px solid chartreuse;
}
#Java span {
color: red;
background-color: aqua;
/* 设置外边距，调低一点 */
margin-top: 7px;
border: 2px solid coral;
}
#C span {
color: #008000;
background-color: yellow;
margin-top: 7px;
border: 2px solid darkred;
}
span {
/* span */
width: 150px;
height: 50px;
/* 行内元素无法直接设置长高，必须先修改为行内块元素 */
display: inline-block;
border-radius: 15px;
/* 文本 */
text-align: center;
/* 设置标签的行高，目的是让文本上下居中 */
line-height: 50px;
}
span:hover {
cursor: pointer;
/* !important 提高样式级别,防止被其他样式干扰 */
/*color: white !important;*/
background-color: black !important;
}
</style>
</head>
<body>
<!-- 常用的快捷键
Ctrl + D 删除一行
-->
<!-- 快捷键：div*3>span*3+tab -->
<!-- 程序中不要出现同样的ID!但是class可以重复 -->
<!-- jQuery 前端应用最广的框架 -->
<!-- jQuery UI库 -->
<div id="html">
<span>HTML5</span>
<span>CSS3</span>
<span>JavaScript</span>
</div>
<div id="Java">
<span>Java</span>
<span>PHP</span>
<span>Node.js</span>
</div>
<div id="C">
<span>iOS</span>
<span>Android</span>
<span>WinPhone</span>
</div> </body>
</html>
2、下午做了一点。。。小动画。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动画</title>
<style type="text/css"> div {
width: 200px;
height: 200px;
background-color: black;
/* 设置定位 */
position: absolute;
left: 200px;
top: 200px;
/* 特效 */
transition: transform 3s ease-in-out;
/* 添加图片 */
background-image: url(img/psb.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
/* background-size: 100% 100% 第一个x方向的大小，第二个是y方向的大小*/
} /* 第一步 监听鼠标放到元素上面 */
div:hover {
/* 第二步 让此标签转起来.
* transform 该属性定义2D或者3D图形转换用的
* ，该属性允许我们队标签进行旋转，缩放，或者是移动，倾斜等
* rotate 旋转 deg 旋转度数degree
*/
transform: rotate(360deg);
/* transition n.过渡，转变 [乐] 变调;
* 设置动画的过渡效果，过渡transform中的旋转 0.5s为过渡时间。
* ease-in-out定义动画过渡时候的速度
*/
transition: transform 1.7s ease-in-out;
} </style>
</head>
<body>
<!-- 让div的宽高为两百 背景喜欢的颜色 -->
<div></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动画</title>
<style type="text/css"> body {
background-color: #000000;
} div {
transition: 10s;
width: 200px;
height: 200px;
background-color: black;
/* 特效 */
/*transform: rotate(45deg);*/
/*transition: transform 3s ease-in-out;*/
/* 设置背景 */
background-position: center;
background-repeat: no-repeat;
background-size: contain;
/* background-size: 100% 100% 第一个x方向的大小，第二个是y方向的大小*/
} /*nth-child 选择第几个div 括号中写的是1 那么我们这里选中的就是第一个div*/
div:nth-child(1) {
/* 设置定位 */
position: absolute;
left: 250px;
top: 100px;
/* 特效 */
/* scale 设置参数，一个参数代表x和Y两个方向,两个参数就分别X和Y*/
transform: rotate(45deg) scale(2.0, 2.0);
/* 添加图片 */
background-image: url(1.jpg);
} div:nth-child(2) {
/* 设置定位 */
position: absolute;
right: 250px;
top: 100px;
/* 特效 */
transform: rotate(33deg);
/* 添加图片 */
background-image: url(2.jpg);
} div:nth-child(3) {
/* 浏览器的宽度为100%.css中的数学运算要在calc中进行 */
/* 设置定位 */
margin: 0 auto;
/* 特效 */
transform: rotate(100000deg);
/* 添加图片 */
background-image: url(3.jpg);
} div:nth-child(4) {
/* 设置定位 */
position: absolute;
left: 250px;
top: 600px;
/* 添加图片 */
background-image: url(4.jpg);
} div:nth-child(5) {
/* 设置定位 */
position: absolute;
right: 250px;
top: 600px;
/* 特效 */
transform: rotate(-11deg);
/* 添加图片 */
background-image: url(5.jpg);
} /* 第一步 监听鼠标放到元素上面 */
div:hover {
/* 第二步 让此标签转起来.
* transform 该属性定义2D或者3D图形转换用的
* ，该属性允许我们队标签进行旋转，缩放，或者是移动，倾斜等
* rotate 旋转 deg 旋转度数degree
*/
transform: rotate(0deg);
/* transition n.过渡，转变 [乐] 变调;
* 设置动画的过渡效果，过渡transform中的旋转 0.5s为过渡时间。
* ease-in-out定义动画过渡时候的速度
*/
transition: 1.7s ease-in-out;
width: 500px;
height: 500px;
} </style>
</head>
<body>
<!-- 让div的宽高为两百 背景喜欢的颜色 -->
<!-- id不能用数字开头，要用字母开头， 运算符号两边一定要有空格 -->
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
目录结构：
【HTML5校企公益课】第二天的更多相关文章
- 【HTML5校企公益课】第一天
1.搭建基本的开发环境.学校电脑用的是浏览器是Chrome,编辑器是HBuilder. 2.初步介绍HTML5的Web项目基本结构. css:样式表 img:存放图片 js:存放脚本文件 .html: ...
- 【HTML5校企公益课】第四天
1.上午考试没去.. 2.下午跟不上.. 变色.html <!DOCTYPE html> <html> <head> <meta charset=" ...
- 【HTML5校企公益课】第三天
1.上午2D.旋转变色的... 基本思路就是先写静态画面然后添加动画. <!--告诉浏览器该文件为网页格式--> <html> <!--网页的头部标签--> ...
- 【C语言探索之旅】 第一部分第四课第二章：变量的世界之变量声明
内容简介 1.课程大纲 2.第一部分第四课第二章:变量的世界之变量声明 3.第一部分第四课第三章预告:变量的世界之显示变量内容 课程大纲 我们的课程分为四大部分,每一个部分结束后都会有练习题,并会公布 ...
- 如何制作一款HTML5 RPG游戏引擎——第二篇，烟雨+飞雪效果
今天我们来实现烟雨+飞雪效果.首先来说,一款经典的RPG游戏难免需要加入天气的变化.那么为了使我们的RPG游戏引擎更完美,我们就只好慢慢地实现它. 本文为该系列文章的第二篇,如果想了解以前的文章可以看 ...
- HTML5 —— 自学第一课
1.心得 首先遇见问题要寻根源,而不是将问题抛出:其次要经常查看参考文档.参考示例:学会百度. 2.技能需求 HTML5.XHTML.CSS3.JavaScript.jQuery(jQuery-UI/ ...
- cousera 吴恩达 深度学习 第一课 第二周 作业 过拟合的表现
上图是课上的编程作业运行10000次迭代后,输出每一百次迭代 训练准确度和测试准确度的走势图,可以看到在600代左右测试准确度为最大的,74%左右, 然后掉到70%左右,再掉到68%左右,然后升到70 ...
- IT兄弟连 HTML5教程 HTML5的学习线路图 第二、三阶段
第二阶段编写用户交互功能 通过第一阶段的学习虽说可以完成页面制作,但并不完美,不能算是合格的前端工程师,所以要继续学习如图1.13中的第二阶段内容.现在的Web页面都融入了大量的特效,并且多数需要与用 ...
- CODING 敏捷实战系列课第二讲：Scrum 敏捷项目管理核心要素之 3355
Scrum 是敏捷开发流派中最著名和最落地的一支,全球 70% 以上公司的敏捷转型都是以 Scrum 起步.CODING 特邀敏捷顾问.CST & CTC 认证敏捷教练申健老师将在本课程< ...
随机推荐
- Pytest权威教程04-断言的编写和报告
目录 断言的编写和报告 使用assert语句进行断言 异常断言 警示断言 使用上下文对比 自定义断言对比信息 高级断言内省 返回: Pytest权威教程 断言的编写和报告 使用assert语句进行断言 ...
- SVN优于CVS之处
1.原子提交.一次提交不管是单个还是多个文件,都是作为一个整体提交的.在这当中发生的意外例如传输中断,不会引起数据库的不完整和数据损坏. 2.重命名.复制.删除文件等动作都保存在版本历史记录当中. 3 ...
- 利用python的matplotlib处理计算数据
#!/usr/bin/python # -*- coding: UTF-8 -*- import numpy as np import matplotlib.pyplot as plt import ...
- ICEM-气化炉
原视频下载地址:https://yunpan.cn/cuPJWRHUJKXIL 访问密码 d379
- Hutool工具类之HttpUtil使用Https
关于Hutool工具类之HttpUtil如何使用可以参考官方文档Hutool之HttpUtil 其实使用Http和Https使用的方式是一样的. 建议大家可以看看HttpUtil的源码,感觉设计的挺不 ...
- session设置存活时间的三种方式
在web容器中设置(此处以tomcat为例)在tomcat-5.0.28\conf\web.xml中设置,以下是tomcat 5.0中的默认配置: [html] view plain copy < ...
- （基因功能 & 基因表达调控）研究方案
做了好久的RNA-seq分析,基因表达也在口头溜了几年了,但似乎老是浮在表面. 对一件事的了解程度决定了你的思维深度,只想做技工就不用想太多,想做大师就一定要刨根问底. 老是说基因表达,那么什么是基因 ...
- keepalived非争抢机制不生效【原创】
故障现象:俩台服务器设置了keepalived非争抢机制,但是发现优先级高的服务器还是会优先获取vip 利用tcpdump抓包发现只有其中一台服务器,没有另一台 tcpdump -i eth0 vrr ...
- CMU Database Systems - Storage and BufferPool
Database Storage 存储分为volatile和non-volatile,越快的越贵越小 那么所以要解决的第一个问题就是,如果尽量在有限的成本下,让读写更快些 意思就是,尽量读写volat ...
- 当fixed元素相互嵌套时，父元素会影响子元素的层叠关系，最好不要嵌套使用fixed
问题:fixed元素被另一个fixed元素包含的时候在chrome下fixed子元素的定位会受到父元素的影响. 解释:层叠关系是受层叠上下文影响的.文档中的层叠上下文由满足以下任意一个条件的元素形成: ...