冬季小学期澄迈NIIT公司 web前端培训第四天

Posted 2020-06-08

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了冬季小学期澄迈NIIT公司 web前端培训第四天相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head>
    <meta charest="utf-8" >
    <title>jquery</title>
<script src="jquery-1.12.0.min.js"></script>
<script>
    /*$(selector).action()*/
    // 页面加载后执行
    // event click dblclick focus mouseover
    $(document).ready(function(){
        $("button").click(function(){
            // $("#p1").hide(200); 单位ms 200ms内消失
            // $("#p1").show();
            // $("#p1").toggle(speed,callback);toggle()方法完后callback 函数
            $("#p2").toggle(200);
        });
        $("#btn1").click(function(){
            // (speed,callback);
            // $("#p1").fadeIn();
            // $("#p1").fadeOut();
            // $("#p1").fadeToggle();
            // (speed,opacity,callback); opacity 不透明度（值介于 0 与 1 之间）
            $("#p2").fadeTo(200,0.4);
        });
        $("#btn2").click(function(){
            // $("#p2").slideDown();
            // $("#p2").slideUp();
            $("#p2").slideToggle();
        });
        $("#btn3").click(function(){
            /*  var div=$("div");
            使用队列功能
            div.animate({height:‘300px‘,opacity:‘0.4‘},"slow");
            */
            $("#p2").animate({    
                // left:‘100px‘
                width:‘250px‘,
                opacity:‘0.5‘,
                height:‘+=150px‘,/*相对于元素的当前值*/
                fontSize:‘3em‘
                },2000
                );
        });

        $("#btn4").click(function(){
            $("#p2").text("enen");
            $("#p2").html("enen");/*所选元素的内容（包括 HTML 标记）*/
            $("#p2").val("enen");/*表单字段的值*/
            $("#p2").attr("id");
            $("#p2").append("id");/*被选元素的结尾插入内容*/
            $("#p2").prepend("id");/*被选元素的开头插入内容*/
            $("#p2").after("id");/*被选元素之后插入内容*/
            $("#p2").before("id");/*被选元素之前插入内容*/

            $("#p2").remove();/*删除被选元素及其子元素*/
            $("#p2").empty();/*被选元素的子元素*/
        });

        $("#btn5").click(function(){
            $("#p2").css("background-color","red");
        });

        $("#btn6").click(function(){
            $("#p2").addClass("class1");
            $("#p2").toggleClass("class1");
        });

        $("#btn7").click(function(){
            $("#p2").removeClass("class1");
        });

        $("#p1").mouseover(function(){
            $("#p2").animate({    
                // left:‘100px‘
                width:‘250px‘,
                opacity:‘0.5‘,
                height:‘+=150px‘,/*相对于元素的当前值*/
                fontSize:‘3em‘
                },2000
                );
        });
    });
</script>
    <style type="text/css">
    .class1{
        text-decoration: underline;
        font-family: "微软雅黑";
        font-size: 20px;
        color: red;
    }
    p{
        width: 100px;
        height: 100px;
        background-color: green;
        color: white;
        text-align: center;
    }
    </style>
</head>
<body>
    <p id="p1">p1</p>
    <button type="button">隐藏</button>
    <input id="btn1" type="button" value="淡入淡出" />
    <input id="btn2" type="button" value="滑动" />
    <input id="btn3" type="button" value="动画" />
    <input id="btn4" type="button" value="改变html元素内容" />
    <input id="btn5" type="button" value="改变css样式" />
    <input id="btn6" type="button" value="添加类" />
    <input id="btn7" type="button" value="删除类" />
    <input id="btn8" type="button" value="" />
    <p id="p2">p2</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="3.3.5/css/bootstrap.min.css">

<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="3.3.5/css/bootstrap-theme.min.css">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="3.3.5/js/jquery-1.11.3.min.js"></script>

<!-- 最新的 Bootstrap 核心 javascript 文件 -->
<script src="3.3.5/js/bootstrap.min.js"></script>
<style type="text/css">
    .annaStyle{
        text-decoration: underline;
        margin: 30px;
    }
    .row div{
        margin-bottom: 10px;
    }
</style>

<body>
    <h1></h1>
    <p>p</p>
    <input class="btn btn-lg btn-danger annaStyle" type="button" value="download">
    <img src="images/img1.png" class="img-circle"> 
    <br>
    
    <div class="container" style="text-align:center;">
    <div class="row">
  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"><img class="img-thumbnail" src="images/img1.png"></div>
  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"><img class="img-thumbnail" src="images/img2.png"></div>
  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"><img class="img-thumbnail" src="images/img3.png"></div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"><img class="img-thumbnail" src="images/img4.png"></div>
    </div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            background-color: green;
            color: white;
            text-align: center;
            margin: 30px;
        }
        #div1{
            height: 50px;
            border-radius: 25px;
        }
        #div2{
            /*x轴偏移量 y轴偏移量 模糊距离*/
            box-shadow: 10px 10px 5px #888888;    
        }
        #div3{
            background-color: red;
            transform: rotate(-30deg);/*正数顺时针 变形 旋转 deg-degree */
        }
        #div4{
            background-color: yellow;
            transform:translate(50px,50px);
        }
        #h1{
            text-shadow: #f00 5px 5px 5px;
        }
        #div5{
            background-color: #0CF;
            transition:width 1s,height 1s,background-color 1s;/*过渡*/
        }

        #div5:hover{
            width: 250px;
            height: 250px;
            background-color: red;
        }
        #div6{
            transition: border-radius 1s,transform 1s;
        }
        #div6:hover{
            border-radius: 30px;
            transform:rotate(720deg);
        }
    </style>
</head>
<body>
    <h1    id="h1">h1</h1>
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div id="div3">div3</div>
    <div id="div4">div4</div>
    <div id="div5">div5</div>
    <div id="div6">div6</div>            
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>HTML5</title>
    <script type="text/javascript">
        function changeColor(){
        var color=document.getElementById("colorBox").value;
        document.bgColor=color
    }
    </script>
</head>
<body>
<audio src="resources/music5.mp3" controls="controls">
Your browser does not support the audio element.</audio>
<br>
<video src="resources/梦娃公益广告之中国梦.mp4" controls="controls">Your browser does not support the video tag.
</video>
<br>
选择页面的背景颜色:<input id="colorBox" type="color" value="#ddeeff" onchange="changeColor()" >

请选择出生日期<input type="date" />
</audio>
</body>
</html>

以上是关于冬季小学期澄迈NIIT公司 web前端培训第四天的主要内容，如果未能解决你的问题，请参考以下文章

冬季小学期 澄迈NIIT公司 web前端培训 第四天

冬季小学期澄迈NIIT公司 web前端培训第四天