首页 > 代码库 > 【HTML5校企公益课】第二天

【HTML5校企公益课】第二天

2024-09-13 15:44:47   217人阅读

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校企公益课】第二天


联系
我们