zoukankan      html  css  js  c++  java
  • 【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>

    目录结构:

  • 相关阅读:
    DIY 作品 及 维修 不定时更新
    置顶,博客中所有源码 github
    openwrt PandoraBox PBR-M1 极路由4 HC5962 更新固件
    使用 squid 共享 虚拟专用网至局域网
    第一次参加日语能力测试 N5
    libx264 libfdk_aac 编码 解码 详解
    开发RTSP 直播软件 H264 AAC 编码 live555 ffmpeg
    MFC Camera 摄像头预览 拍照
    http2 技术整理 nginx 搭建 http2 wireshark 抓包分析 server push 服务端推送
    plist 图集 php 批量提取 PS 一个个切
  • 原文地址:https://www.cnblogs.com/xkxf/p/6685643.html
Copyright © 2011-2022 走看看