HTML5小结
百度首页案例（背景图片、部分动画）
<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>关键帧动画
<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>荷塘月色案例（屏幕尺寸变动、部分动画）
<html>
<head>
<meta charset="utf-8">
<title>week1title>
<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>
表单判定（添加数据、二级联动、部分全选、删除）
<html lang="en">
<head>
<meta charset="UTF-8">
<title>week2title>
<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="";
$("#qu").html(beijing);
}
if (city=="河北"){
var hebei="";
$("#qu").html(hebei);
}
if (city=="四川"){
var sc="";
$("#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=$(""+name+" ");
var usersex=$(""+sex+" ");
var userbirthday=$(""+birthday+" ");
var useraddress=$(""+city+"-"+qu+" ");
var userdelete=$("");
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>
路由
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demotitle>
<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:"这是商品页面
"
})
.when("/",{
/*template:"这是主页面
",*/
templateUrl:"home.html",
controller:"homeCtrl",
//redirectTo:"/goods"
})
.when("/car",{
/* template:"这是购物车页面
"*/
templateUrl:"car.html"
})
.when("/order",{
template:"这是订单页面
"
})
.when("/me",{
/*template:"这是个人中心页面
"*/
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>
{{name}}
script>
<script type="text/ng-template" id="home.html">
个人中心页面</h3>
登录成功，欢迎
{{name}}!!!
script>
<div ng-view style="border:1px; background: #fffec6; width: 600px; height: 600px;">
div>
center>
body>
html>
————————main—————————————
<html lang="en">
<head>
<meta charset="UTF-8">
<title>mouthtitle>
<style>
.table tbody tr:nth-child(odd) {
background: #EEEEEE }
.span{background:#FFFF00; border: 1px solid #000}
style>
<script src="angularJS/angular.js">script>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function ($scope) {
//定义数据源
$scope.color="#000";
$scope.data = [{
flag: false,
id: 2001,
name: "iPhoneX",
user: "张三",
tel: 13525565588,
price: 8699,
city: "北京",
date: 80000000000,
v: "已发货",
c: "#31FE31"
}, {
flag: false,
id: 3006,
name: "iPhone6",
user: "王红",
tel: 18524565588,
price: 5653,
city: "郑州",
date: 83000000000,
v: "已发货",
c: "#31FE31"
}, {
flag: false,
id: 5312,
name: "iPhone7",
user: "赵小龙",
tel: 17545585598,
price: 6180,
city: "北京",
date: 86000000000,
v: "未发货",
c: "#FFFF31"
}, {
flag: false,
id: 2132,
name: "iPhone8",
user: "赵强",
tel: 17625565618,
price: 7190,
city: "上海",
date: 90000000000,
v: "未发货",
c: "#FFFF31"
}];
//查询
$scope.CXname = "";
$scope.CXtel = "";
$scope.CX = "";
$scope.Cx = function () {
if ($scope.CXname != "" && $scope.CXname != null) {
$scope.CX = {'name': $scope.CXname};
} else if ($scope.CXtel != "" && $scope.CXtel != null) {
$scope.CX = {'tel': $scope.CXtel};
} else {
$scope.CX = "";
}
return $scope.CX;
};
//下拉菜单筛选
$scope.XLcd = "";
$scope.isShow = function (data) {
if ($scope.XLcd == "") {
return true;
} else if ($scope.XLcd != "") {
if (data == $scope.XLcd) {
return true;
} else {
return false;
}
}
}
//按钮点击变色
$scope.FH = function (data1) {
for (d in $scope.data) {
if ($scope.data[d].id == data1) {
if ($scope.data[d].v == "已发货") {
$scope.data[d].v = "未发货";
$scope.data[d].c = "#FFFF31";
} else {
$scope.data[d].v = "已发货";
$scope.data[d].c = "#31FE31";
}
}
}
}
//全选&&全不选
$scope.all = false;
$scope.All = function () {
if ($scope.all == true) {
for (d in $scope.data) {
if ($scope.data[d].flag == false) {
$scope.data[d].flag = true;
}
}
} else {
for (d in $scope.data) {
if ($scope.data[d].flag == true) {
$scope.data[d].flag = false;
}
}
}
};
//反选
$scope.FX = function () {
var a = 0;
for (d in $scope.data) {
if ($scope.data[d].flag == false) {
a++;
}
}
if (a > 0) {
$scope.all = false;
} else {
$scope.all = true;
}
}
/*
* 7. 实现订单批量删除功能。用户只能删除已发货订单，
* 不能删除未发货订单，用户点击多个已发货订单时可以批量删除选中订单。
*/
//批量删除
$scope.PLsc = function () {
var a = 0;
var b = 0;
var arr=[];
if (confirm("删除将不可逆！")) {
for (d in $scope.data) {
if ($scope.data[d].flag == true) {
a++;
if ($scope.data[d].v == "已发货") {
arr.push($scope.data[d].name);
//$scope.data.splice(d, 1);
} else {
b++;
}
}
}
if (a == 0) {
alert("请选择要删除的数据！");
}else {
for (ar in arr){
for (d in $scope.data){
if (arr[ar]==$scope.data[d].name){
$scope.data.splice(d, 1);
}
}
}
}
if (b != 0) {
alert("未发货订单不可删除！");
}
}
}
//排序
$scope.PXid="-id";
$scope.PXprice="-price";
$scope.PXdate="-date";
$scope.PXall="";
$scope.PX1=function () {
if($scope.PXid=="-id"){
$scope.PXid="id";
$scope.PXall=$scope.PXid;
}else {
$scope.PXid="-id";
$scope.PXall=$scope.PXid;
}
};
$scope.PX2=function () {
if($scope.PXprice=="-price"){
$scope.PXprice="price";
$scope.PXall=$scope.PXprice;
}else {
$scope.PXprice="-price";
$scope.PXall=$scope.PXprice;
}
};
$scope.PX3=function () {
if($scope.PXdate=="-date"){
$scope.PXdate="date";
$scope.PXall=$scope.PXdate;
}else {
$scope.PXdate="-date";
$scope.PXall=$scope.PXdate;
}
};
//添加订单
$scope.isShow1=false;
$scope.isShow2=false;
$scope.isShow3=false;
$scope.isShow4=false;
$scope.isShow5=false;
$scope.isShow0=false;
$scope.TJ=function () {
$scope.color="#000";
if ($scope.isShow0==false){
$scope.isShow0=true;
}else {
$scope.isShow0=false;
}
}
$scope.spm="";
$scope.yhm="";
$scope.sjh="";
$scope.jg="";
$scope.cs="--选择城市--";
var a=0;
$scope.baocun=function () {
$scope.tjflag=true;
if ($scope.spm==""||$scope.spm==null){
$scope.isShow1=true;
$scope.tjflag=false;
}
if ($scope.yhm==""||$scope.yhm==null){
$scope.isShow2=true;
$scope.tjflag=false;
}
if ($scope.sjh==""||$scope.sjh==null||isNaN($scope.sjh)){
$scope.isShow3=true;
$scope.tjflag=false;
}
if ($scope.jg==""||$scope.jg==null||isNaN($scope.jg)){
$scope.isShow4=true;
$scope.tjflag=false;
}
if ($scope.cs=="--选择城市--"){
$scope.isShow5=true;
$scope.tjflag=false;
}
if($scope.tjflag==true){
a++;
var b=new Date();
var add={
flag: false,
id: a,
name: $scope.spm,
user: $scope.yhm,
tel: parseInt($scope.sjh),
price: parseInt($scope.jg),
city: $scope.cs,
date: b,
v: "未发货",
c: "#FFFF31"
};
$scope.data.push(add);
$scope.isShow1=false;
$scope.isShow2=false;
$scope.isShow3=false;
$scope.isShow4=false;
$scope.isShow5=false;
$scope.isShow0=false;
$scope.spm="";
$scope.yhm="";
$scope.sjh="";
$scope.jg="";
$scope.cs="--选择城市--";
}else {
$scope.color="#f00";
}
}
/*
* 10. 添加订单信息。提交订单时，检查表单，提示错误内容，并且将文本框颜色变红色，
* 如果表单有误则提交不成功，如果表单无误则提交成功，提交成功的信息在列表展示。
* */
})
script>
head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<p>
<button ng-click="TJ()">新增订单button>
<button ng-click="PLsc()">批量删除button>
<input type="text" placeholder="按商品名称查询" ng-model="CXname" ng-change="Cx()">
<input type="text" placeholder="按手机号查询" ng-model="CXtel" ng-change="Cx()">
<select ng-model="XLcd">
<option value="">--按状态查询--option>
<option value="已发货">已发货option>
<option value="未发货">未发货option>
select>
p>
<table border="1" cellpadding="10" cellspacing="0" class="table">
<thead>
<tr style="background: #999999">
<th><input type="checkbox" ng-model="all" ng-click="All()">th>
<th>id<input type="button" value="排序" ng-click="PX1()" ng-model="PXid">th>
<th>商品名th>
<th>用户名th>
<th>手机号th>
<th>价格<input type="button" value="排序" ng-click="PX2()" ng-model="PXprice">th>
<th>城市th>
<th>下单时间<input type="button" value="排序" ng-click="PX3()" ng-model="PXdate">th>
<th>状态th>
tr>
thead>
<tbody>
<tr ng-repeat="d in data | filter:CX | orderBy:PXall" ng-show="isShow(d.v)">
<th><input type="checkbox" ng-model="d.flag" ng-click="FX()">th>
<td>{{d.id}}td>
<td>{{d.name}}td>
<td>{{d.user}}td>
<td>{{d.tel}}td>
<td>{{d.price | currency:"￥:"}}td>
<td>{{d.city}}td>
<td>{{d.date | date:("yyyy-MM-dd hh:mm:ss")}}td>
<td><input type="button" style="background:{{d.c}}" value={{d.v}} ng-click="FH(d.id)">td>
tr>
tbody>
table>
<div style="width: 400px; border: 1px solid #f00; margin-top: 20px;" ng-show="isShow0">
<h3>添加订单信息h3>
<ul style="list-style: none">
<li>商品名:<input type="text" ng-model="spm" style="border-color:{{color}}"> <span class="span" ng-show="isShow1">商品名不能为空！span>li><br>
<li>用户名:<input type="text" ng-model="yhm" style="border-color:{{color}}"> <span class="span" ng-show="isShow2">用户名不能为空！span>li><br>
<li>手机号:<input type="text" ng-model="sjh" style="border-color:{{color}}"> <span class="span" ng-show="isShow3">手机号格式有误！span>li><br>
<li>价格为:<input type="text" ng-model="jg" style="border-color:{{color}}"> <span class="span" ng-show="isShow4">价格格式有误！span>li><br>
<li>城市:<select ng-model="cs" style="border-color:{{color}}"><option>--选择城市--option><option>四川option><option>河北option>select> <span class="span" ng-show="isShow5">城市不能为空！span>li>
ul>
<button ng-click="baocun()">保存button><br><br>
div>
center>
body>
html>
你可能感兴趣的:(HTML5小结)