【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 认证敏捷教练申健老师将在本课程< ...
随机推荐
- 深入浅出MYSQL数据库—思维导图[附下载链接]
源文件下载地址:https://github.com/JluTiger/schoolRecruit2020
- 2019全国大学生信息安全竞赛ciscn-writeup(4web)
web1-JustSoso php伪协议获取源码 ?file=php://filter/read=convert.base64-encode/resource=index.php index.php ...
- php手记之06-tp5验证器
# 创建验证器 php think make:validate 模块名/验证器名(首字母大写) # 验证器 namespace app\index\validate; use think\Valida ...
- MITMProxy如何配置二次代理
MITMProxy如何配置二次代理 0.2172018.09.05 11:13:15字数 232阅读 2609 前序: mitmproxy真的很强大,或许是大家都各自使用,或者没有相关的需求,导致我废 ...
- python TypeError: unsupported operand type(s) for +: 'geoprocessing value object' and 'str'
TypeError: unsupported operand type(s) for +: 'geoprocessing value object' and 'str' if self.params[ ...
- git 代码版本回退
1.查看 commit id 2.git reset --hard "dfdfdfdf" // commit id 3.git push -f -u origin 2.1.0 // ...
- Java TreeSet，Collections使用
一.创建TreeSet实例 public static void main(String[] args) { TreeSet set = new TreeSet(); set.add("C& ...
- 【Json】Json分词器
package com.hy; import java.io.BufferedReader; import java.io.FileInputStream; import java.io.FileNo ...
- Diffie-Hellman算法简介
一.DH算法是一种密钥交换协议,它可以让双方在不泄漏密钥的情况下协商出一个密钥来. DH算法基于数学原理,比如小明和小红想要协商一个密钥,可以这么做: . 小明先选一个素数和一个底数,例如,素数p=, ...
- MySQL远程连接和备份还原
连接远程数据库 mysql -h 数据库地址 -P 端口号 -u 用户名 -p mysql -h -u root -p 备份数据库, 热备份 mysqldump -h 127.0.0.1 -u roo ...