码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-01-25 20:56:27      阅读:246      评论:0      收藏:0      [点我收藏+]

标签:

   

<!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前端培训 第四天

标签:

原文地址:http://www.cnblogs.com/linkarl/p/5150289.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!