【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 认证敏捷教练申健老师将在本课程< ...
随机推荐
- 代码还原,IDA中使用的宏
在IDA7.0中的定义文件拷贝的. 如果想使用,直接去IDA的plugins插件目录下.包含它的 **defs.h"" 如下: /* This file contains defi ...
- MySQL 基础之一
为了满足关系范式:通常一个大的数据集会拆成在一个库(集合内)中多张表表来存储,每一张表就是由行和列组成的二维关系,表与表之间也有关系,查询有时候需要做表链接,而表链接这个过程需要依赖于索引到各种算法来 ...
- js-关于异步原理的理解和总结
我们经常说JS是单线程的,比如Node.js研讨会上大家都说JS的特色之一是单线程的,这样使JS更简单明了,可是大家真的理解所谓JS的单线程机制吗?单线程时,基于事件的异步机制又该当如何,这些知识在& ...
- PostgreSQL学习笔记(九) 用户、角色、权限管理
PostgreSQL是一个多用户数据库,可以为不同用户指定允许的权限. 角色PostgreSQL使用角色的概念管理数据库访问权限. 根据角色自身的设置不同,一个角色可以看做是一个数据库用户,或者一组数 ...
- 树莓派python 控制GPIO
sudo pip install rpi.gpio #!/usr/bin/env python # encoding: utf-8 import RPi.GPIO as GPIO import tim ...
- android: Android水波纹点击效果
Android API 21及以上新增了ripple标签用来实现水波纹的效果.我们可以通过设置ripple背景来实现一些View点击效果. 该水波纹效果有两种:一种是有界的(点击后类似于一个矩形向四周 ...
- Tomcat清理无用应用防止漏洞
/webapps/host-manager /home/renguoqiang /webapps/manager /home/renguoqiang /webapps/host-manager rm ...
- ubuntu18设置root账号的开机登录
date: 2019-08-20 17:36:49 author: headsen chen notice :个人原创 1,用普通用户登录. su - root 打开终端 vi /etc/pam.d ...
- SpringBoot配置加载顺序
一般我们会将SpringBoot应用需要的配置内容放在项目工程中,然后通过spring.profiles.active或是通过Maven来实现多环境的支持.但是,当团队逐渐壮大,分工越来越细之后,往往 ...
- scipy详解
登月图片消噪 scipy.fftpack模块用来计算快速傅里叶变换速度比传统傅里叶变换更快,是对之前算法的改进图片是二维数据,注意使用fftpack的二维转变方法 import numpy a ...