【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 认证敏捷教练申健老师将在本课程< ...
随机推荐
- 「ZJOI2019」线段树
传送门 Description 线段树的核心是懒标记,下面是一个带懒标记的线段树的伪代码,其中 tag 数组为懒标记: 其中函数\(Lson(Node)\)表示\(Node\)的左儿子,\(Rson( ...
- git用ssh方式下载代码
1.运行Git Bash客户端,执行ls ~/.ssh; 如果列出下图这两个rsa文件,那应该就不需要配置ssh key了,如果不放心就将这几个文件删掉,重新生成. 文件的默认目录:C:\Users\ ...
- Docker hello workd
Docker 允许你在容器内运行应用程序, 使用 docker run 命令来在容器内运行一个应用程序. 输出Hello world runoob@runoob:~$ docker run ubunt ...
- 【caffe Net】使用举例和代码中文注释
首先是Net使用的小例子: #include <vector> #include <iostream> #include <caffe/net.hpp> using ...
- CRMEB中因为重写规则导致的服务器异常和404之解决办法
问题描述:安装CRMEB后,只能通过https://域名//index.php/admin访问到后台,而不能直接通过https://域名/admin访问到后台,以至于导致进入系统后台出现有的功能界面可 ...
- RabbitMQ入门学习系列(二)，单生产者消费者
友情提示 我对我的文章负责,发现好多网上的文章 没有实践,都发出来的,让人走很多弯路,如果你在我的文章中遇到无法实现,或者无法走通的问题.可以直接在公众号<爱码农爱生活 >留言.必定会再次 ...
- js实现replaceAll方法
js本来有replace方法,请看w3school的说明: replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串. 语法: stringObject.rep ...
- Python——graphviz及pydotplus安装步骤
Python——graphviz及pydotplus安装步骤 一.安装Graphviz 网站:http://www.graphviz.org/download/ 下载msi文件 直接安装,完成之后添加 ...
- 多层nginx中的压缩问题 api接口>1M数据的返回浏览器 网关
基础 前端异步请求,局部刷新,加大最大等待时间 nginx开启压缩 进阶 多级nginx的压缩 实践测试: 每级都要开启压缩 gizp on: 最外层开启,但最内层没有开启 最外层没有开启 最外层.最 ...
- Python脚本基础运算和算法
原文地址:https://www.cnblogs.com/ailiailan/p/10141741.html 通过关注“常见”脚本,是对代码的一个很好的学习和总结的方式. 1.冒泡排序 lis = [ ...