【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 认证敏捷教练申健老师将在本课程< ...
随机推荐
- esp8266 + dht11 + 两路继电器 实现pc远程控制开关机温度监控.并配置zabbix监控
事因:翻了翻自己之前的硬件小箱子,几年前买的一些小东西,想用用起来. 正好我有些数据放在机器上,有时候需要机器启动,我使用完成后在断开. 其实网络唤醒也能做到,但是机器一直给电也不好,在说家里有小孩A ...
- arch linux (manjaro) 下运行tim和qq
本文通过MetaWeblog自动发布,原文及更新链接:https://extendswind.top/posts/technical/tim_install_wine 基于AUR的安装是没什么难度了, ...
- 标准ACL详解
- fmex挂单挖矿
最近fmex上线挂单挖矿,针对挂单写了个程序,"跟随盘口,避免成交",0成本薅羊毛. 代码在 https://github.com/xiaoxiaoleo/fmexminer 使用 ...
- 第十六周助教工作总结——NWNU李泓毅
助教博客链接:https://www.cnblogs.com/NWNU-LHY/ 本次作业的要求:团队项目设计完善&编码:https://www.cnblogs.com/nwnu-daizh/ ...
- T-MAX组--项目冲刺（第四天）
THE FOURTH DAY 项目相关 作业相关 具体描述 所属班级 2019秋福大软件工程实践Z班 作业要求 团队作业第五次-项目冲刺 作业正文 T-MAX组--项目冲刺(第四天) 团队名称 T-M ...
- C仿黑白棋版XO棋
两位玩家轮流在棋盘上放置不同颜色的棋子,一位玩家使用黑子,另一位使用白子,棋盘是一个偶数正方形. 只能将一个棋子放在对手的棋子旁边,使对手在水平.垂直.对角线方向上的棋子变成自己的棋子,游戏结束时,棋 ...
- grep awk 查看nginx日志中所有访问的ip并 去重
111.225.78.157 - - [13/Aug/2019:16:03:08 +0800] "POST /api/login HTTP/1.1" 200 249 "h ...
- 创建加载bean的实例
一.创建实例 工程的结构如下图 1.创建接口 public interface Person { public void setName(String name); public String say ...
- python try except 出现异常时，except 中如何返回异常的信息字符串
https://docs.python.org/3/tutorial/errors.html#handling-exceptions https://docs.python.org/3/library ...