H5的css的特性及JavaScript

来源：互联网发布：ubuntu lamp环境编辑：程序博客网时间：2024/06/08 12:27
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        *{            margin: 0;            padding: 0;        }        .nv{            width: 100%;            background: #ffd24a;            margin: 0 auto;        }        .nv ul li {            width: 70px;            list-style: none;            float: left;            margin-left: 20px;        }        .nv ul li a{            text-decoration: none;        }        .nv ul{            clear: left;        }        .nv ul li ul{            display: none;        }        .nv:hover .child{            display: block;        }        .dd{            width: 200px;            height: 200px;            background: red;            margin: 500px;            /*transition: all 2s ease;*/            animation:run 2s linear;        }        .dd:hover{            transform: translate(200px,300px)rotate(60deg) scale(0.6) skew(60deg,50deg) ;        }        @keyframes run {            0%{                width: 100px;            }            50%{                height: 350px;            }            100%{                width: 500px;            }        }        .pic{            box-shadow: 10px 10px 10px rgba(0,0,0,.5);        }        .dia{            width: 200px;            height: 50px;            background: orange;            border-radius: 5px;            margin: 20px auto;            position: relative;        }        .dia:after{            content: "\200B";            display: block;            width: 0;            height: 0;            border: 10px solid transparent;            border-left: 10px solid orange;            position: absolute;            right: -20px;            top: 10px;        }        p{            font-weight:bold;            font-size: 20px;            background: black;            color: #ffffff;            animation: run 3s linear infinite;        }        @keyframes run {            0%{                text-shadow:0px 0px 10px  red;            }            25%{                text-shadow:0px 0px 10px  blue;            }            50%{                text-shadow:0px 0px 10px  yellow;            }            75%{                text-shadow:0px 0px 10px green;            }            100%{                text-shadow:0px 0px 10px  gray;            }        }        /* ul{             width: 200px;             height: 200px;             margin: 0 auto;             position: relative;              animation: run 3s linear infinite;             animation-fill-mode:forwards;             transform-style: preserve-3d;         }         li{             width: 100%;             height:100%;             float: left;             list-style: none;             background: red;             left: 0;             top:0;             position: absolute;          }*/        /*              @keyframes run {                  0%{                      transform: rotateX(0deg) rotateY(0deg);                  }                  100%{                      transform: rotateX(360deg) rotateY(360deg);                  }              }*/        .df{            width: 200px;            height: 200px;            background: red;        }    </style></head><body><nav class="nv">    <ul>        <li><a href="#">首页</a>            <ul class="child">                <li ><a href="#">新闻</a></li>                <li><a href="#">体育</a></li>                <li><a href="#">汽车</a></li>                <li><a href="#">财经</a></li>            </ul>        </li>        <li><a href="#">拍卖指南</a>            <ul class="child">                <li ><a href="#">明清文物</a></li>                <li><a href="#">大秦历史</a></li>                <li><a href="#">国外文物</a></li>                <li><a href="#">十二生肖</a></li>            </ul>        </li>        <li><a href="#">信息咨询</a></li>    </ul></nav><div class="dd"></div><img src="../img/sample-image.jpg" height="220" width="600" class="pic"/><div class="dia"></div><p>您好啊啊啊啊啊 啊</p><ul>    <li>1</li>    <li>2</li>    <li>3</li>    <li>4</li>    <li>5</li>    <li>6</li></ul><!--  <input type="number" value="320826199001200577"><br/>  <button>查询</button><p>性别<span id="sex"></span></p><p>年龄<span id="age"></span></p><p>生日<span id="birth"></span></p>--><!--开关--><div class="df"></div><div style="height: 230px;width: 652px"></div><!--计算机--><input type="number" value="4"><select>    <option value="1" selected="selected">+</option>    <option value="2" >-</option>    <option value="3">*</option>    <option value="4">/</option></select><input type="number" value="3"><button id="but">=</button><span class="sp"></span><div style="height: 230px;width: 652px"></div><script>    var btn=document.getElementsByTagName("button")[0];    var sex=document.getElementById("sex");    var age=document.getElementById("age");    var birth=document.getElementById("birth");    var div=document.getElementsByClassName("df")[0];    var i=true;    div.onclick=function () {        if(i==true){            div.style.background="blue"            i=false;        }else {            div.style.background="red"            i=true;        }    }    /*  btn.onclick=function(){     var str=document.getElementsByTagName("input")[0].value;     str[str.length-2]%2==0?sex.innerHTML="女":sex.innerHTML="男";     //截取生日     var ss= str.substring(11,14);     birth.innerHTML=ss;     //截取出生的年     var sm=str.substring(6,10)     //得到当前的年     var sf= new Date().getFullYear();     //用当前的年减去身份证上出生的年     age.innerHTML=sf-sm;     };     var arr=[5,6,8,1,2];     /!*冒泡排序*!/     for(var i=0;i<arr.length;i++){     for(var j=0;j<arr.length-1;j++){     if(arr[j]>arr[j+1]){     var temp=arr[j];     arr[j]=arr[j+1];     arr[j+1]=temp;     }     }     }     console.log(arr);     /!*乘法口诀*!/     for (var i = 1; i<=9;i++) {     for (var j =1; j<=i;j++) {     if(i==j){     document.write(i+"*"+j+"="+(i*j)+"<br/>");     }else {     document.write(i+"*"+j+"="+(i*j)+"  ");     }     }     }*/    /*计算器*/    //获取button    var btn=document.getElementById("but");    btn.onclick=function () {        //获取input        var var1=document.getElementsByTagName("input")[0].value;        var var2=document.getElementsByTagName("input")[1].value;        var sl=document.getElementsByTagName("select")[0].value;        var sp=document.getElementsByClassName("sp")[0];        switch (sl){            case "1":                sp.innerHTML=parseInt(var1)+parseInt(var2)                break;            case "2":                sp.innerHTML=parseInt(var1)-parseInt(var2)                break;            case "3":                sp.innerHTML=parseInt(var1)*parseInt(var2)                break;            case "4":                sp.innerHTML=parseInt(var1)/parseInt(var2)                break;        }    }</script></body></html>
阅读全文
0 0