【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>
目录结构：
