HTML5小结
来源：互联网 发布：淘宝搜店铺名搜不到 编辑：程序博客网 时间：2024/05/22 15:57
百度首页案例（背景图片、部分动画）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>百度一下！你就知道</title> <style>/*background-repeat: no-repeat;/*设置图片不平铺*/background-size:100% 100%;/*设置图片的大小，浏览器的宽高*/background-attachment:fixed;/*设置图片固定，不跟据页面的拉动而拉动*/*/ *{margin: 0; padding: 0; box-sizing: border-box;} img{vertical-align: middle} body{background-image: url("img/bg.jpg"); background-repeat: no-repeat; background-size: cover; background-attachment: fixed} input{border: none; width: 610px} .div2 img{ width: 160px; height: 160px; margin: 10px} .div3 img{ width: 160px; height: 160px; margin: 10px} .input1:hover{transform: scale(1.5,1.5)} .camera:hover{transform: scale(1.2,1.2)} .baidu:hover{transform: scale(2,2)} </style></head><body> <div style="margin: 20px auto; height:210px; width: 488px "> <img src="img/logo.png" height="210" width="488"/> </div> <form action="http://www.baidu.com" method="get" target="_blank" style="margin-top: 30px"> <p style="width:760px;height: 50px;background:#fff; margin: 0 auto"> <input class="input1" type="text" style="height: 49px"> <img class="camera" src="img/camera_off.png" height="40" width="40"/> <input class="baidu" style="height: 50px; float: right; width: 100px; background:#00f; color: #fff" type="submit" value="百度一下"> </p> </form> <div class="div2" style="width: 930px; margin: 0 auto; margin-top: 80px"> <img src="img/top1.jpg" onmouseover="this.src"/> <img src="img/top2.png"/> <img src="img/top3.png"/> <img src="img/top4.jpg"/> <img src="img/top5.jpg"/> </div> <div class="div3" style="width: 930px; margin: 0 auto;"> <img src="img/bottom1.jpg"/> <img src="img/bottom2.jpg"/> <img src="img/bottom3.jpg"/> <img src="img/bottom4.png"/> <img src="img/bottom5.png"/> </div></body></html>关键帧动画
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title> <style> @-webkit-keyframes 'wobble' { 0% { margin-left: 100px; background: green; } 40% { margin-left: 250px; background: orange; } 60% { margin-left: 350px; background: blue; } 100% { margin-left: 1000px; background: red; } } .demo1 { width: 50px; height: 50px; margin-left: 100px; background: blue; -webkit-animation-name:'wobble';/*动画属性名，也就是我们前面keyframes定义的动画名*/ -webkit-animation-duration: 2s;/*动画持续时间*/ -webkit-animation-timing-function: ease-in-out; /*动画频率，和transition-timing-function是一样的*/ -webkit-animation-delay: 2s;/*动画延迟时间*/ -webkit-animation-iteration-count: 3;/*定义循环资料，infinite为无限次*/ -webkit-animation-direction: alternate;/*定义动画方式*/ } </style></head><body> <div class="demo1"> </div></body></html>荷塘月色案例（屏幕尺寸变动、部分动画）
<!doctype html><html><head><meta charset="utf-8"><title>week1</title><style> *{margin:0; padding:0;} li{ line-height:33px; text-align:center;background:#6495ED; color:#ffffff; width:130px; height:33px; float:left; border-right:3px solid #fff;list-style:none; margin-top:50px} .all{margin:0 auto;width:1290px; height:1000px; background:#ffffff} .nav{width:1290px; height:140px; background:#AAAC90; overflow:hidden} .p1{padding-top:20px; width:230px;} .p1:hover{transform:rotate(360deg); transition:2s;} .p1 .b1{ margin-bottom:30px;margin-left:80px;color:#A42123; font-size:32px;} .main{width:1035px; margin:0 auto; height:860px;padding-top:20px} .left{ width:715px; height:360px; float:left;} .right{ width:320px; height:360px; float:left;} @media screen and (max-width:1300px){ .left{ width:715px; height:360px; float:none;} .right{ width:320px; height:360px; float:none;} } .right img{float:right} .left p{ font-size:16px; margin-bottom:18px} .p3{width:287px; height:286x; float:right; padding-top:10px} li:hover{background:#f00; color:#FF0; transform:scale(1.2,1.2); transition:1s;}</style></head><body> <div class="all"> <div class="nav"> <p class="p1"><b class="b1" id="b">散文集</b><b class="b2">朱自清</b></p> <ul> <li>作者生平</li> <li>故事背景</li> <li>词语注释</li> <li>作品手法欣赏</li> <li>上一篇文章</li> <li>下一篇文章</li> </ul> </div> <div class="main"> <div class="left"> <p> 这几天心里颇不宁静。今晚在院子里坐着乘凉，忽然想起日日走过的荷塘，在这满月的光里，总该另有一番样子吧。月亮渐渐地升高了，墙外马路上孩子们的欢笑，已经听不见了;妻在屋里拍着闰儿，迷迷糊糊地哼着眠歌。我悄悄地披了大衫，带上门出去。 </p> <p> 沿着荷塘，是一条曲折的小煤屑路。这是一条幽僻的路;白天也少人走，夜晚更加寂寞。荷塘四面，长着许多树，蓊蓊郁郁的。路的一旁，是些杨柳，和一些不知道名字的树。没有月光的晚上，这路上阴森森的，有些怕人。今晚却很好，虽然月光也还是淡淡的。 </p> <p> 路上只我一个人，背着手踱着。这一片天地好像是我的;我也像超出了平常的自己，到了另一世界里。我爱热闹，也爱冷静;爱群居，也爱独处。像今晚上，一个人在这苍茫的月下，什么都可以想，什么都可以不想，便觉是个自由的人。白天里一定要做的事，一定要说的话，现在都可不理。这是独处的妙处，我且受用这无边的荷香月色好了。 曲曲折折的荷塘上面，弥望的是田田的叶子。叶子出水很高，像亭亭的舞女的裙。层层的叶子中间，零星地点缀着些白花，有袅娜地开着的，有羞涩地打着朵儿的;正如一粒粒的明珠，又如碧天里的星星，又如刚出浴的美人。微风过处，送来缕缕清香，仿佛远处高楼上渺茫的歌声似的。这时候叶子与花也有一丝的颤动，像闪电般，霎时传过荷塘的那边去了。叶子本是肩并肩密密地挨着，这便宛然有了一道凝碧的波痕。叶子底下是脉脉的流水，遮住了，不能见一些颜色;而叶子却更见风致了。 </p> </div> <div class="right"> <p><img src="image/zhuziqing.png"></p> <p class="p3">朱自清（1898年11月22日—1948年8月12日），原名自华，号秋实，后改名自清，字佩弦。中国现代散文家、诗人、学者、民主战士</p> </div> </div> </div></body></html>表单判定（添加数据、二级联动、部分全选、删除）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>week2</title> <style> .all{border-radius: 10%;float: right; background: #FFFF00;} .span{width: 20px; height: 10px; float: right} .remove{border-radius: 10%;float: right; background: #FF0000} .add{border-radius: 10%;background: #99FF00} table{margin-top: 50px} .one{background: #EEEEEE} .two{background: #ffffff} </style> <script src="jquery-2.1.0.js"></script> <script> $(function () { //二级联动 $("#city").change(function () { var city=$("#city").val(); if (city=="北京"){ var beijing="<option>西二旗</option><option>西三旗</option><option>西单</option>"; $("#qu").html(beijing); } if (city=="河北"){ var hebei="<option>保定</option><option>邢台</option><option>石家庄</option>"; $("#qu").html(hebei); } if (city=="四川"){ var sc="<option>成都</option><option>绵阳</option><option>金堂</option>"; $("#qu").html(sc); } }); //点击事件验证输入信息 $("input:eq(2)").click( function () { var flag1=flag2=true; var sex=$("#sex").val(); var city=$("#city").val(); var qu=$("#qu").val(); //判断用户名 var name=$("input:eq(0)").val(); if (name.length<3||name.length>30){ flag1=false; $("input:eq(0)").val(""); } //判断生日 var birthday=$("input:eq(1)").val(); if (birthday==""||birthday==null){ flag2=false; $("input:eq(1)").val(""); } if (flag1!=true||flag2!=true){ alert("用户输入信息有误"); } //追加 if (flag1==true&&flag2==true){ var chackbox=$("<th><input type=\"checkbox\"></th>"); var username=$("<td>"+name+"</td>"); var usersex=$("<td>"+sex+"</td>"); var userbirthday=$("<td>"+birthday+"</td>"); var useraddress=$("<td>"+city+"-"+qu+"</td>"); var userdelete=$("<td></td>"); var de=$("<input type='button' value='删除'>"); userdelete.append(de); //给按钮添加点击事件 de.click(function(){ //判断当前行有没有被选中 var result = $(this).parent().parent().children().eq(0).children(); if(result[0].checked){ //被选中了，删除即可 $(this).parent().parent().remove(); //隔行变色 $("tbody tr").removeAttr("class"); $("tbody tr:odd").addClass("one"); $("tbody tr:even").addClass("two"); }else{ alert("请选择"); } }); var tr=$("<tr>"); tr.append(chackbox).append(username).append(usersex).append(userbirthday).append(useraddress).append(userdelete); $("tbody").append(tr); } //隔行变色 $("tbody tr").removeAttr("class"); $("tbody tr:odd").addClass("one"); $("tbody tr:even").addClass("two"); } ); //全选 var a=0; $("#checkbox").click(function () { if (a==0){ $(":checkbox").prop("checked","checked"); a=1; }else { $(":checkbox").prop("checked",false); a=0; } }); //批量删除 $(".remove").click(function(){ var size = $("tbody :checked").length; if(size<=0){ alert("请先选择"); }else{ if(window.confirm("确定要删除吗？")){ $("tbody :checked").parent().parent().remove(); } } }); }); </script></head><body> <center> <p style="width: 700px"> 姓名:<input type="text"> 性别:<select id="sex"><option>男</option><option>女</option></select> 生日:<input type="text"> 住址:<select id="city"><option>北京</option><option>河北</option><option>四川</option></select> <select id="qu"><option>西二旗</option><option>西三旗</option><option>西单</option></select> <input class="add" type="button" value="添加"><br><br> <input class="all" type="button" value="全选/反选"><span class="span"></span><input class="remove" type="button" value="批量删除"> </p> <table border="1" cellpadding="10" cellspacing="0"> <thead style="background: #999999"> <tr align="left"> <th><input id="checkbox" type="checkbox"></th> <th>姓名</th> <th>性别</th> <th>生日</th> <th>住址</th> <th>删除</th> </tr> </thead> <tbody> </tbody> </table> </center></body></html>2414
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <script src="../../../angular.js"></script> <script> var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) { $scope.products = [{ "id": 80, "name": "iPhone", "price": 5400, state: false }, { "id": 1200, "name": "ipad mini", "price": 2200, state: false }, { "id": 500, "name": "ipad air", "price": 2340, state: false }, { "id": 290, "name": "ipad", "price": 1420, state: false }, { "id": 910, "name": "imac", "price": 15400, state: false }]; //下拉菜单删选商品价格、 $scope.productPrice = "--请选择--"; $scope.ifShow = function(price) { /*console.log(price +":"+ productPrice); return true;*/ //alert(priceMin); if($scope.productPrice == "--请选择--") { return true; } else { var arr = $scope.productPrice.split("-"); var priceMin = arr[0]; var priceMax = arr[1]; if(price < priceMin || price > priceMax) { //alert("111"); return false; } else { return true; } } } //点击删除按钮，删除当前商品 $scope.delProduct = function(delName) { //alert(delName); for(index in $scope.products) { //alert("删除前，角标为"+index+"长度为："+$scope.products.length); if(delName == $scope.products[index].name) { $scope.products.splice(index, 1); //alert("删除后，角标为"+index+"长度为："+$scope.products.length); } else { } } } //点击列明进行排序 $scope.orderFlag = ""; $scope.orderLine = "id"; $scope.orderProduct = function(line) { $scope.orderLine = line; if($scope.orderFlag == "") { $scope.orderFlag = "-"; } else { $scope.orderFlag = ""; } } //定义下拉菜单排序规则 $scope.selOrder; $scope.orderSel = function() { if($scope.selOrder == "id") { $scope.orderFlag = ""; $scope.orderLine = "id"; } else if($scope.selOrder == "-id") { $scope.orderFlag = "-"; $scope.orderLine = "id"; } else if($scope.selOrder == "price") { $scope.orderFlag = ""; $scope.orderLine = "price"; } else if($scope.selOrder == "-price") { $scope.orderFlag = "-"; $scope.orderLine = "price"; }; } //定义修改价格 /*$scope.updatePrice = function(index){ //获得价格 var price = $scope.products[index].price; var result = window.prompt("清输入要修改的价格",price); alert(result); }*/ $scope.updatePrice = function(price) { //获得价格 for(index in $scope.products) { //alert("删除前，角标为"+index+"长度为："+$scope.products.length); if(price == $scope.products[index].price) { //$scope.products.splice(index, 1); //alert("删除后，角标为"+index+"长度为："+$scope.products.length); //修改价格 var result = parseInt(window.prompt("清输入要修改的价格", price)); //在这之前对result的结果进行非字符串判断 if(result < 0) { alert("输入有误，请重新更改"); } else { if(window.confirm("确定要将" + $scope.products[index].name + "的价格更改为：" + result + "吗？")) { $scope.products[index].price = result; }; } } else { } } } //全选、全不选 $scope.selectAll = false; $scope.selectAllFun = function() { if($scope.selectAll) { for(index in $scope.products) { $scope.products[index].state = true; } } else { for(index in $scope.products) { $scope.products[index].state = false; } } } //反选 $scope.checkSelecetAll = function() { var flag = false; //遍历数组，获得对象的状态 for(index in $scope.products) { //alert($scope.products[index].state); //如果有一个对象状态是false即未选中状态，就把标志位flag变为true。 if(!$scope.products[index].state){ flag = true; } } //判断是否没有一个是未选中状态 if(flag){//这是正面至少有一个未选中 $scope.selectAll = false;//全选状态为false }else{//一定是全部被选中 $scope.selectAll = true;//全选状态为true } } //批量删除 $scope.delSelect = function(){ //自己添加选中状态判断，就是有没有一个都没选中的情况。 //定义一个空数组，盛放状态是选中的对象 var isSelected = []; //遍历数组，通过数组对象的状态，判断是否删除当前遍历的对象 for(index in $scope.products) { //如果遍历的当前对象状态为true，则删除 if($scope.products[index].state){ //把当前选中的对象，一个个追加到isSelected数组中。 isSelected.push($scope.products[index]); //alert(isSelected.length); } } //遍历isSelected数组，因为isSelected数组中存放的是所有选中项的对象。 for(index in isSelected){ var name = isSelected[index].name; for(index2 in $scope.products){ if(name == $scope.products[index2].name){ $scope.products.splice(index2,1); } } } } }); </script></head><body ng-app="myApp" ng-controller="myCtrl"><center> <h3>购物车</h3> <input type="text" size="10" placeholder="产品名称" ng-model="search" /> 产品价格 <select ng-model="productPrice"> <option>--请选择--</option> <option>0-2000</option> <option>2001-3000</option> <option>3001-4000</option> <option>4001-5000</option> <option>5001-6000</option> <option>6001-7000</option> <option>7001-8000</option> <option>8001-无穷大</option> </select> <select ng-model="selOrder" ng-change="orderSel()"> <option value="">排序方式</option> <option value="id">id正序</option> <option value="-id">id逆序</option> <option value="price">价格正序</option> <option value="-price">价格逆序</option> </select> <button ng-click="delSelect()">批量删除</button> <br /><br /> <table border="1px solid blue" cellpadding="10" cellspacing="0"> <tr> <th><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()" /> </th> <th ng-click="orderProduct('id')">产品编号</th> <th ng-click="orderProduct('name')">产品名称</th> <th ng-click="orderProduct('price')">产品价格</th> <th>操作</th> </tr> <!--<tr ng-repeat="sz in products | filter:{'name':search} | orderBy:(orderFlag+orderLine) | orderBy:selOrder" ng-if="ifShow(sz.price)">--> <tr ng-repeat="sz in products | filter:{'name':search} | orderBy:(orderFlag+orderLine)" ng-if="ifShow(sz.price)"> <td><input type="checkbox" ng-model="sz.state" ng-click="checkSelecetAll()" /> </td> <td>{{sz.id}}</td> <td>{{sz.name}}</td> <td>{{sz.price}}</td> <td> <button ng-click="delProduct(sz.name)">删除</button> <button ng-click="updatePrice(sz.price)">修改</button> </td> </tr> </table></center></body></html>路由
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Demo</title> <script src="../../angular.js"></script> <script src="angular-route.js"></script> <script> var app = angular.module("myApp",['ngRoute']); app.config(["$routeProvider",function ($routeProvider) { $routeProvider .when("/goods",{ template:"<h3>这是商品页面</h3>" }) .when("/",{ /*template:"<h3>这是主页面</h3>",*/ templateUrl:"home.html", controller:"homeCtrl", //redirectTo:"/goods" }) .when("/car",{ /* template:"<h3>这是购物车页面</h3>"*/ templateUrl:"car.html" }) .when("/order",{ template:"<h3>这是订单页面</h3>" }) .when("/me",{ /*template:"<h3>这是个人中心页面</h3>"*/ templateUrl:"updatePwd.html" }) .otherwise({redirectTo:"/"}); }]); app.controller("myCtrl",function ($scope) { }); app.controller("homeCtrl",function ($scope,$rootScope) { $scope.name = "张三"; $rootScope.name = "李四"; }); </script></head><body ng-app="myApp" ng-controller="myCtrl"><center> <ul style="list-style: none"> <li><a href="#/">主页面</a></li> <li><a href="#/goods">商品</a></li> <li><a href="#/car">购物车</a></li> <li><a href="#/order">订单</a></li> <li><a href="#/me">个人中心</a></li> <li><a href="#/jll">其他</a></li> </ul> <script type="text/ng-template" id="updatePwd.html"> <h3>个人中心页面</h3> {{name}} <form> 用户名:<input type="text" value="张三" disabled="disabled"><br><br> 旧密码:<input type="text" placeholder="请输入旧密码"><br><br> 新密码:<input type="text" placeholder="请输入新密码"><br><br> 验证密码:<input type="text" placeholder="请再次输入密码"><br><br> <input type="submit" value="更改密码"> </form> </script> <script type="text/ng-template" id="home.html"> <h3>个人中心页面</h3> 登录成功，欢迎{{name}}!!! </script> <div ng-view style="border:1px; background: #fffec6; width: 600px; height: 600px;"> </div></center></body></html>阅读全文
0 0
- html5小结
- HTML5小结
- 知识小结(Html5)
- HTML5 学习小结
- HTML5标签小结
- HTML5 classList 小结
- HTML5学习小结
- HTML5资料小结
- HTML5新特性小结
- HTML5+CSS3小结
- html5 + css 学习小结
- Html5笔记之小结
- html5新增标签小结
- HTML5标签小结
- 【html5】 canvas小结
- Phonegap + HTML5 开发经验小结
- Phonegap + HTML5 开发经验小结
- Phonegap + HTML5 开发经验小结
- apache日志文件详解和实用分析命令
- 阿里巴巴不断增加其云数据中心覆盖率
- 实现loading、360、网易云播放的css动画
- linux下使用阿里云OSS
- 设计模式系列之「装饰模式」
- HTML5小结
- LocalBroadCast与BroadCast
- How to revert the code/files that have been merged to the remote Repo
- 继承（单继承、多继承、菱形继承、虚继承）
- JS检测移动端横竖屏
- Android studio中添加系统jar包提高优先级
- django使用celery做异步执行过程
- 建造者模式
- POJ A Round Peg in a Ground Hole <凸包判断以及点与多边形的相对位置>
