文章目录

  • 实验一：使用HTML5建立Web页面
  • 实验二：使用HTML5和CSS3建立Web页面
  • 实验三：使用HTML5、CSS3和JavaScript建立Web页面
  • 实验四：使用HTML5中的Canvas绘图完成页面动态效果

实验一：使用HTML5建立Web页面

实验内容：

  1. 使用表格和框架实现图1页面效果，其中包括文本与图像的格式化、链接、列表、表格、表单设计。
  2. 仿照当当网、京东或淘宝等电子商务网站制作商品列表静态网页，要求实现的静态页面包括：页面导航栏，当前日期，商品搜素，商品列表，列表操作，分页效果。
  3. 使用IE、Firefox、Chrome浏览器查看页面效果···
  4. 目标效果图如下：

工程目录：

HTML：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>商城网站</title><!-- Bootstrap --><link href="static/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="static/bootstrap/js/jquery-3.4.1.min.js"></script><script src="static/bootstrap/js/bootstrap.min.js"></script><!--font-awesome--><link rel="stylesheet" href="static/bootstrap/font-awesome/css/font-awesome.min.css"><link href="static/custom-style/css/home.css" rel="stylesheet"/>
</head>
<body><!--导航条-->
<div class="header"><div id="message-head"><div id="nav-left"><ol class="breadcrumb"><li><a style="font-weight: bold">位置:</a></li><li><a href="#">首页</a></li><li><a href="#">购物后台管理</a></li><li class="active">商品列表</li></ol></div><div id="nav-right"><i class="fa fa-calendar fa-lg"></i><div class="info">&nbsp;&nbsp;今天是2021年4月22日星期四12 : 00</div></div></div>
</div><div class="container-fluid"><!--功能栏--><div id="fun-box" class="row"><div id="select-list"><div class="dropdown"><button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">商品类别<span class="caret"></span></button><ul class="dropdown-menu" aria-labelledby="dropdownMenu1"><li><a href="#">类别1</a></li><li><a href="#">类别2</a></li><li><a href="#">类别3</a></li><li role="separator" class="divider"></li><li><a href="#">类别4</a></li></ul></div></div><div id="search-item" class="col-lg-3"><div class="input-group"><input type="text" class="form-control" placeholder="请输入商品名称"><span class="input-group-btn"><button class="btn btn-primary" type="button">搜索</button></span></div></div><div class="fun-box col-lg-offset-4  col-lg-1"><a class="btn btn-success" href="#" role="button"><i class="fa fa-plus-circle fa-lg"></i>&nbsp;&nbsp;添加</a></div><div class="fun-box col-lg-1"><a class="btn btn-info" href="#" role="button"><i class="fa fa-pencil fa-lg"></i>&nbsp;&nbsp;修改</a></div><div class="fun-box col-lg-1"><a class="btn btn-danger" href="#" role="button"><i class="fa fa-trash fa-lg"></i>&nbsp;&nbsp;删除</a></div><div class="fun-box col-lg-1"><a class="btn btn-warning" href="#" role="button"><i class="fa fa-pie-chart fa-lg"></i>&nbsp;&nbsp;统计</a></div><div class="fun-box col-lg-1"><a class="btn btn-primary" href="#" role="button"><i class="fa fa-cog fa-lg"></i>&nbsp;&nbsp;设置</a></div></div><!--表格部分--><div id="table-list" class="row"><table class="table table-bordered"><thead><tr><th style="text-align: center;"><input type="checkbox" class="che"></th><th>缩略图</th><th>商品名称</th><th>商品类别</th><th>数量（件）</th><th>单价（元）</th><th>发布时间</th><th>是否审核</th><th>操作</th></tr></thead><tbody><tr><td><input type="checkbox" class="che"></td><td><img src="static/images/img06.png" alt="..." class="img-rounded"></td><td>老北京布鞋</td><td>休闲</td><td>334</td><td>￥899</td><td>2020-04-22</td><td>已审核</td><td><a class="btn btn-info btn-sm btn-icon icon-left btn-update"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>&nbsp;修改</a><a class="btn btn-danger btn-sm btn-icon icon-left btn-del"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span>&nbsp;删除</a></td></tr><tr><td><input type="checkbox" class="che"></td><td><img src="static/images/img07.png" alt="..." class="img-rounded"></td><td>牛仔裤</td><td>休闲</td><td>225</td><td>￥800</td><td>2020-04-22</td><td>已审核</td><td><a class="btn btn-info btn-sm btn-icon icon-left btn-update"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>&nbsp;修改</a><a class="btn btn-danger btn-sm btn-icon icon-left btn-del"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span>&nbsp;删除</a></td></tr><tr><td><input type="checkbox" class="che"></td><td><img src="static/images/img08.png" alt="..." class="img-rounded"></td><td>女装</td><td>休闲</td><td>9999</td><td>￥9999</td><td>2020-04-22</td><td>已审核</td><td><a class="btn btn-info btn-sm btn-icon icon-left btn-update"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>&nbsp;修改</a><a class="btn btn-danger btn-sm btn-icon icon-left btn-del"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span>&nbsp;删除</a></td></tr><tr><td><input type="checkbox" class="che"></td><td><img src="static/images/img09.png" alt="..." class="img-rounded"></td><td>运动鞋</td><td>运动</td><td>177</td><td>￥700</td><td>2020-05-22</td><td>未审核</td><td><a class="btn btn-info btn-sm btn-icon icon-left btn-update"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>&nbsp;修改</a><a class="btn btn-danger btn-sm btn-icon icon-left btn-del"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span>&nbsp;删除</a></td></tr><tr><td><input type="checkbox" class="che"></td><td><img src="static/images/img10.png" alt="..." class="img-rounded"></td><td>玛卡巴卡童装</td><td>休闲</td><td>334</td><td>￥3000</td><td>2020-03-22</td><td>已审核</td><td><a class="btn btn-info btn-sm btn-icon icon-left btn-update"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>&nbsp;修改</a><a class="btn btn-danger btn-sm btn-icon icon-left btn-del"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span>&nbsp;删除</a></td></tr></tbody></table></div><!--数据记录及分页--><div id="bottom-box" class="row"><div id="info-detail" class="col-lg-3">共 <span>1234</span> 条记录，当前显示第 <span>1</span> 页</div><!--分页部分--><div id="page-bean" class="col-lg-offset-4 col-lg-5"><nav aria-label="..."><ul class="pagination" style="float: right"><li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">＜</span></a></li><li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li><li class=""><a href="#">2 <span class="sr-only"></span></a></li><li class=""><a href="#">3 <span class="sr-only"></span></a></li><li class=""><a href="#">4 <span class="sr-only"></span></a></li><li class=""><a href="#">5 <span class="sr-only"></span></a></li><li class=""><a href="#">6 <span class="sr-only"></span></a></li><li class=""><a href="#">... <span class="sr-only"></span></a></li><li class=""><a href="#" aria-label="Previous"><span aria-hidden="true">＞</span></a></li></ul></nav></div></div>
</div>
</body>
</html>

CSS：

.container-fluid{margin: 0;
}
.header{width: 100%;border-bottom: 1px solid #83C0EF;
}
#message-head{background-color:#EDF6FA;/* 弹性盒模型 */display: flex;/* 两端对其 */justify-content: space-between;/* 居中 */align-items: center;height: 100%;padding: 2px 15px;box-sizing: border-box;
}
#message-head ol{border-radius: 0;
}
.breadcrumb{margin-bottom: 0;background-color:#EDF6FA;padding-left: 4px;
}
.breadcrumb>:nth-child(0)>a{font-weight: bold;
}
.breadcrumb>:nth-child(0)>a, .breadcrumb>:nth-child(1)>a, .breadcrumb>:nth-child(2)>a,.breadcrumb>:nth-child(3)>a{color: black;font-size: 14px;
}.breadcrumb>:nth-child(3){font-size: 14px;
}
.breadcrumb>:nth-child(1)>a:hover, .breadcrumb>:nth-child(2)>a:hover{color: #777777;text-decoration: underline;
}
#nav-right{display: flex;align-items: center;
}
#nav-right> .info{justify-content: center;align-items: center;
}/* 功能部分 */
#fun-box{border-bottom: 1px solid #83C0EF;margin-top: 2px;/* 弹性盒模型 */display: flex;padding: 5px 20px;box-sizing: border-box;
}
.dropdown>button{border-radius: 0;
}
#search-item input, #search-item button{border-radius: 0;
}
.fun-box{padding: 0 8px;
}
.fun-box a{width: 100%;border-radius: 0;
}/*表格部分*/
#table-list{}
#table-list thead{background: #EDF6FA;
}
#table-list thead th{text-align: center;
}input[type="checkbox"]{width:15px;height:15px;display: inline-block;text-align: center;vertical-align: middle; line-height: 15px;position: relative;}
input[type="checkbox"]::before{content: "";position: absolute;top: 0;left: 0;background: #fff;width: 100%;height: 100%;border: 1px solid #d9d9d9}
input[type="checkbox"]:checked::before{content: "\2713";background-color: #fff;position: absolute;top: 0;left: 0;width:100%;border: 1px solid #979898;color:#979898;font-size: 12px;font-weight: bold;}#table-list tbody tr{height: 80px
}
#table-list tbody tr td{text-align: center;/*line-height: 80px;*/vertical-align: baseline;
}
.table{margin-bottom: 0;
}/*底部记录与分页*/
#bottom-box>#info-detail{line-height: 74px;
}
#bottom-box>#info-detail span{color: #337AB7;font-weight: bold;
}

效果图如下：

实验二：使用HTML5和CSS3建立Web页面

实验内容：

  1. 根据给定的页面效果图2，使用HTML5+CSS3实现相似效果。要求实现Web页面的内容和样式的分离。
  2. 使用DIV+CSS实现页面整体排版。
  3. 使用IE、Firefox、Chrome浏览器查看页面效果。
  4. 目标效果图如下：

工程目录：

HTML：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>商城</title><!-- Bootstrap --><link href="static/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="static/bootstrap/js/jquery-3.4.1.min.js"></script><script src="static/bootstrap/js/bootstrap.min.js"></script><!--font-awesome--><link rel="stylesheet" href="static/bootstrap/font-awesome/css/font-awesome.min.css"><link href="static/custom-style/css/index.css" rel="stylesheet"/>
</head>
<body><div class="container-fluid"><!--logo图片--><div class="header row"><div class="logo-box"><img src="static/images/logo.jpg" alt=""></div><div class="logo-box"><img src="static/images/banner.jpg" alt=""></div></div><!--导航栏--><div class="row" id="buyNav"><a href="#"><div class="col-sm-offset-3 col-sm-1 nav-box">首 页</div></a><a href="#"><div class="col-sm-1 nav-box">最新上架</div></a><a href="#"><div class="col-sm-1 nav-box">品牌活动</div></a><a href="#"><div class="col-sm-1 nav-box">原厂直供</div></a><a href="#"><div class="col-sm-1 nav-box">团 购</div></a><a href="#"><div class="col-sm-1 nav-box">限时抢购</div></a><a href="#"><div class="col-sm-1 nav-box">促销打折</div></a></div><!--侧边栏 和 商品--><div class="row" id="sidebarItems"><div class="col-sm-offset-1 col-sm-2 box"><div class="list-group" id="side-list"><a href="#" class="list-group-item item-head">&nbsp;女装</a><a href="#" class="list-group-item"><div class="txt-left"><span class="span-flag"> * &nbsp;</span>上衣</div><div class="txt-right"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></div></a><a href="#" class="list-group-item"><div class="txt-left"><span class="span-flag"> * &nbsp;</span>下装</div><div class="txt-right"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></div></a><a href="#" class="list-group-item"><div class="txt-left"><span class="span-flag"> * &nbsp;</span>连衣裙</div><div class="txt-right"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></div></a><a href="#" class="list-group-item"><div class="txt-left"><span class="span-flag"> * &nbsp;</span>内衣</div><div class="txt-right"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></div></a><a href="#" class="list-group-item item-head">&nbsp;男装</a><a href="#" class="list-group-item"><div class="txt-left"><span class="span-flag"> * &nbsp;</span>T恤</div><div class="txt-right"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></div></a><a href="#" class="list-group-item"><div class="txt-left"><span class="span-flag"> * &nbsp;</span>短裤</div><div class="txt-right"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></div></a><a href="#" class="list-group-item"><div class="txt-left"><span class="span-flag"> * &nbsp;</span>衬衫</div><div class="txt-right"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></div></a><a href="#" class="list-group-item item-head">&nbsp;童装</a><a href="#" class="list-group-item"><div class="txt-left"><span class="span-flag"> * &nbsp;</span>上衣</div><div class="txt-right"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></div></a><a href="#" class="list-group-item"><div class="txt-left"><span class="span-flag"> * &nbsp;</span>上衣</div><div class="txt-right"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></div></a><a href="#" class="list-group-item item-head">&nbsp;运动</a><a href="#" class="list-group-item"><div class="txt-left"><span class="span-flag"> * &nbsp;</span>运动裤</div><div class="txt-right"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></div></a><a href="#" class="list-group-item"><div class="txt-left"><span class="span-flag"> * &nbsp;</span>跑步裤</div><div class="txt-right"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></div></a></div></div><div class="col-sm-8 box"><div class="row goods-head">最新上架</div><div class="row goods"><div class="col-xs-6 col-md-3"><div class="thumbnail goods-div"><img src="static/images/shopshow/yifu1.jpg" class="img-responsive img-thumbnail" alt="..."><div class="caption goods-info"><p class="money">￥198.00元</p><p class="purchase">324人购买</p></div><div class="caption">v领香纺背心女夏外穿双层吊带打底衫百搭显度无袖上衣</div></div></div><div class="col-xs-6 col-md-3"><div class="thumbnail goods-div"><img src="static/images/shopshow/yifu2.jpg" class="img-responsive img-thumbnail" alt="..."><div class="caption goods-info"><p class="money">￥877.00元</p><p class="purchase">102人购买</p></div><div class="caption">大码女装胖mm2015豆装新教板显连盂自楼空连衣裙</div></div></div><div class="col-xs-6 col-md-3"><div class="thumbnail goods-div"><img src="static/images/shopshow/yifu3.jpg" class="img-responsive img-thumbnail" alt="..."><div class="caption goods-info"><p class="money">￥476.00元</p><p class="purchase">47人购买</p></div><div class="caption">韩版印花无袖短裙背心裙女高活连衣裙A字裙秋季</div></div></div><div class="col-xs-6 col-md-3"><div class="thumbnail goods-div"><img src="static/images/shopshow/yifu4.jpg" class="img-responsive img-thumbnail" alt="..."><div class="caption goods-info"><p class="money">￥198.00元</p><p class="purchase">324人购买</p></div><div class="caption">2015秋新款甜关学院立领中袖套头格子衬衫娃娃衫</div></div></div><div class="col-xs-6 col-md-3"><div class="thumbnail goods-div"><img src="static/images/shopshow/yifu5.jpg" class="img-responsive img-thumbnail" alt="..."><div class="caption goods-info"><p class="money">￥148.00元</p><p class="purchase">324人购买</p></div><div class="caption">2015秋新款甜关学院立领中袖套头格子衬衫娃娃衫</div></div></div><div class="col-xs-6 col-md-3"><div class="thumbnail goods-div"><img src="static/images/shopshow/yifu6.jpg" class="img-responsive img-thumbnail" alt="..."><div class="caption goods-info"><p class="money">￥176.00元</p><p class="purchase">348人购买</p></div><div class="caption">韩版甜关气质亮片热气球亨母中长款园领短袖T怕</div></div></div><div class="col-xs-6 col-md-3"><div class="thumbnail goods-div"><img src="static/images/shopshow/yifu7.jpg" class="img-responsive img-thumbnail" alt="..."><div class="caption goods-info"><p class="money">￥342.00元</p><p class="purchase">521人购买</p></div><div class="caption">2015款秋新款甜关学院立领中袖套头格子衬衫娃娃衫</div></div></div><div class="col-xs-6 col-md-3"><div class="thumbnail goods-div"><img src="static/images/shopshow/yifu8.jpg" class="img-responsive img-thumbnail" alt="..."><div class="caption goods-info"><p class="money">￥208.00元</p><p class="purchase">301人购买</p></div><div class="caption">韩版甜关气质亮片热气球亨母中长款园领短袖T怕</div></div></div></div><div class="row goods-head">品牌活动</div><div class="row goods"><div class="col-xs-6 col-md-3"><div class="thumbnail goods-div"><img src="static/images/shopshow/dress1.jpg" class="img-responsive img-thumbnail" alt="..."><div class="caption goods-info"><p class="money">￥148.00元</p><p class="purchase">324人购买</p></div><div class="caption">2015秋新款甜关学院立领中袖套头格子衬衫娃娃衫</div></div></div><div class="col-xs-6 col-md-3"><div class="thumbnail goods-div"><img src="static/images/shopshow/dress2.jpg" class="img-responsive img-thumbnail" alt="..."><div class="caption goods-info"><p class="money">￥176.00元</p><p class="purchase">348人购买</p></div><div class="caption">韩版甜关气质亮片热气球亨母中长款园领短袖T怕</div></div></div><div class="col-xs-6 col-md-3"><div class="thumbnail goods-div"><img src="static/images/shopshow/dress3.jpg" class="img-responsive img-thumbnail" alt="..."><div class="caption goods-info"><p class="money">￥342.00元</p><p class="purchase">521人购买</p></div><div class="caption">2015款秋新款甜关学院立领中袖套头格子衬衫娃娃衫</div></div></div><div class="col-xs-6 col-md-3"><div class="thumbnail goods-div"><img src="static/images/shopshow/dress4.jpg" class="img-responsive img-thumbnail" alt="..."><div class="caption goods-info"><p class="money">￥208.00元</p><p class="purchase">301人购买</p></div><div class="caption">韩版甜关气质亮片热气球亨母中长款园领短袖T怕</div></div></div></div></div></div><!--底边导航栏1--><div class="row" id="bottom-nav-1"><div class="col-sm-offset-1 col-sm-2"><img src="static/images/gray1.jpg" /></div><div class="col-sm-2"><img src="static/images/gray2.jpg" /></div><div class="col-sm-2"><img src="static/images/gray3.jpg" /></div><div class="col-sm-2"><img src="static/images/gray4.jpg" /></div><div class="col-sm-2"><img src="static/images/gray5.jpg" /></div></div><!--导航栏--><div class="row" id="bottom-nav-2"><div class="col-sm-2"><img src="static/images/red1.jpg" />&nbsp;新手指导</div><div class="col-sm-2"><img src="static/images/red2.jpg" />&nbsp;支付方式</div><div class="col-sm-2"><img src="static/images/red3.jpg" />&nbsp;配送方式</div><div class="col-sm-2"><img src="static/images/red4.jpg" />&nbsp;售后服务</div><div class="col-sm-2"><img src="static/images/red5.jpg" />&nbsp;关于账号</div><div class="col-sm-2"><img src="static/images/red6.jpg" />&nbsp;优惠服务</div></div></div></body>
</html><script>$(function (){$('.nav-box').mouseover(function (){$(this).css('background-color', '#B12121');})$('.nav-box').mouseleave(function (){$(this).css('background-color', '#CE2626');})$('.list-group-item').css('border-radius', '0');})
</script>

CSS：

body{padding: 0;margin: 0;
}.header {display: flex;/* 两端对其 */justify-content: space-between;/* 居中 */align-items: center;margin-bottom: 3px;
}
.logo-box{margin: 0 20px;
}#buyNav{background-color: #CE2626;height: 40px;position: relative;
}
.nav-box{height: 100%;text-align: center;line-height: 40px;font-size: 16px;color: white;font-weight: bold;
}
.nav-box:after{display: block;width: 2px;height: 32px;background: #B12121;content: "";position: absolute;left: 0;top: 50%;margin-top: -15px;
}/*侧边栏 和 商品*/
#sidebarItems{margin-top: 10px;
}
/*#sidebarItems>.box{padding-right: 5px;padding-left: 5px;
}*/
#side-list{width: 100%;
}.list-group-item .span-flag{color: red;
}
.item-head{background-color: #E5E4E1;font-size: 15px;
}
.list-group-item{display: flex;/* 两端对其 */justify-content: space-between;/* 居中 */align-items: center;
}
.list-group-item>.txt-right{color: #CDCDCD;
}
.goods-head{background-color: #FF9C01;color: white;padding: 5px 15px;box-sizing: border-box;font-size: 16px;font-weight: bold;margin-bottom: 10px;
}
.goods img{object-fit: cover;width: 240px;height: 320px;overflow: hidden;
}
.goods-div{border: 0;margin-bottom: 2px;
}
.goods-info{display: flex;/* 两端对其 */justify-content: space-between;/* 居中 */align-items: center;
}
.goods-info>.money{color: red;font-size: 17px;font-weight: bold;
}
.goods-info>.purchase{font-size: 13px;color: #959295;
}
.thumbnail>.caption{padding: 4px 0 3px 3px;
}
.goods-info>p{margin:0;
}#bottom-nav-1{background-color: #6A6665;height: 40px;position: relative;margin-top: 10px;
}#bottom-nav-1>div{height: 100%;text-align: center;line-height: 40px;font-size: 16px;color: white;font-weight: bold;
}
.bottom-nav>img{height: 70%;
}
#bottom-nav-2{background-color: #EFEFEF;height: 40px;font-size: 10px;font-weight: bold;padding-top: 10px;box-sizing: border-box;text-align: center;
}

效果图如下（部分）：

实验三：使用HTML5、CSS3和JavaScript建立Web页面

实验内容：

  1. 根据给定的页面效果图3，使用HTML5+CSS3+JavaScript实现相似效果。
  2. 使用数组存放单位地址类别及子类别
  3. 在窗口加载过程中，使用数组中的数据对单位地址类别进行初始化
  4. 在页面中选择单位地址身份类别时，子类别相应发生改变
  5. 用javaScript实现用户名称不为空，长度不超过50个字符
  6. 单位地址列表至少要选择大类，子类可选可不选
  7. 手机号只能为数值类型
  8. 使用IE、Firefox、Chrome浏览器查看页面效果

工程目录：


HTML:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>首页</title><!-- Bootstrap --><link href="static/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="static/bootstrap/js/jquery-3.4.1.min.js"></script><script src="static/bootstrap/js/bootstrap.min.js"></script><!--font-awesome--><link rel="stylesheet" href="static/bootstrap/font-awesome/css/font-awesome.min.css"><link href="static/custom-style/css/index.css" rel="stylesheet"/>
</head>
<body><div class="container main-con"><div class="row header"><div class="txt col-sm-12">用户注册</div></div><hr style="border-top:2px solid black;"><div class="row"><form class="form-horizontal"><div class="form-group"><label for="inputUsername" class="col-sm-offset-2 col-sm-2 control-label">&nbsp;用&nbsp;户&nbsp;名：</label><div class="col-sm-4"><input type="text" class="form-control" id="inputUsername" placeholder="请输入用户名"></div></div><div class="form-group"><label for="inputEmail" class="col-sm-offset-2 col-sm-2 control-label">邮箱地址：</label><div class="col-sm-4"><input type="email" class="form-control" id="inputEmail" placeholder="请输入邮箱地址"></div></div><div class="form-group"><label for="inputPassword" class="col-sm-offset-2 col-sm-2 control-label">设置密码：</label><div class="col-sm-4"><input type="password" class="form-control" id="inputPassword"></div><div class="col-sm-offset-4 col-sm-4 help-block">6-20个字符，由字母、数字和符号的两种以上组合。</div></div><div class="form-group"><label for="confirmPassword" class="col-sm-offset-2 col-sm-2 control-label">确认密码：</label><div class="col-sm-4"><input type="password" class="form-control" id="confirmPassword"></div></div><div class="form-group"><label for="inputRealName" class="col-sm-offset-2 col-sm-2 control-label">真实姓名：</label><div class="col-sm-4"><input type="text" class="form-control" id="inputRealName" placeholder="请输入真实姓名"></div></div><div class="form-group"><label for="inputRealName" class="col-sm-offset-2 col-sm-2 control-label">您的性别：</label><div class="col-sm-4"><label class="radio-inline col-sm-1 "><input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 男</label><label class="radio-inline col-sm-1"><input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 女</label></div></div><div class="form-group"><label for="InputFile" class="col-sm-offset-2 col-sm-2 control-label">上传头像：</label><div class="col-sm-4"><input type="file" id="InputFile"></div></div><div class="form-group"><label for="inputPhone" class="col-sm-offset-2 col-sm-2 control-label">您的手机：</label><div class="col-sm-4"><input type="number" class="form-control" id="inputPhone" placeholder="请输入您的手机号"></div></div><div class="form-group"><label for="inputWork" class="col-sm-offset-2 col-sm-2 control-label">单位名称：</label><div class="col-sm-4"><input type="text" class="form-control" id="inputWork" placeholder="请输入单位名称"></div></div><div class="form-group"><label class="col-sm-offset-2 col-sm-2 control-label">单位地址：</label><div class="col-sm-6" id="work-detail-info"><div class="work-location"><select class="form-control" id="province"><option>- 请选择省份 -</option></select></div><div class="work-location"><select class="form-control" id="city"><option>- 请选择城市 -</option></select></div></div><script>//定义省市的信息var provList = ['山东','福建','黑龙江'];var cityList = [];cityList[0] = ['威海', '烟台', '青岛', '济南', '济宁', '密山', '临沂'];cityList[1] = ['福州', '厦门', '泉州', '漳州'];cityList[2] = ['哈尔滨', '大庆', '齐齐哈尔', '佳木斯', '哈尔滨_2'];//获取select元素var provSelect = document.querySelector('#province');var citySelect = document.querySelector('#city');//把省的信息 添加到第一个select元素中provList.forEach(function(val, index){//DOM操作  了解provSelect.add(new Option(val, index))});//给第一个select绑定change事件provSelect.onchange = function(){//获取 当前的选项var index = this.value;//清空第二个select原先内容citySelect.length = 0;//选择对应的城市列表，添加到第二个selectcityList[index].forEach(function(val, index){citySelect.add(new Option(val, index));})}//手工触发一次 change事件provSelect.onchange();</script><div class="col-sm-offset-4 col-sm-2"><input type="text" class="form-control" id="street" placeholder="请输入街道"></div></div><div class="form-group"><label for="inputRealName" class="col-sm-offset-2 col-sm-2 control-label">您的爱好：</label><div class="col-sm-4"><label class="checkbox-inline"><input type="checkbox" id="inlineCheckbox1" value="option1"> 购物</label><label class="checkbox-inline"><input type="checkbox" id="inlineCheckbox2" value="option2"> 饮食</label><label class="checkbox-inline"><input type="checkbox" id="inlineCheckbox3" value="option3"> 餐饮</label></div></div><div class="form-group"><label for="inputRealName" class="col-sm-offset-2 col-sm-2 control-label">协议内容：</label><div class="col-sm-4"><textarea class="form-control" rows="3"></textarea></div></div><div class="form-group"><div class="col-sm-offset-4 col-sm-4"><button type="submit" class="btn btn-default">提交</button></div></div></form></div>
</div>
</body>
</html>

CSS：

body{padding: 0;margin: 0;
}
.main-con{margin-top: 25px;
}
.main-con .header{text-align: center;font-size: 30px;font-weight: bold;
}
.help-block{margin-bottom: 0;
}
.work-location {width: 140px;margin-right: 10px;
}
#work-detail-info{display: flex;margin-bottom: 15px;
}

效果图如下：

实验四：使用HTML5中的Canvas绘图完成页面动态效果

实验内容：

  1. 单击商品缩略图时，在展示区显示对应的商品大图
  2. 鼠标在展示区滑动时，在展示区右侧展示该区域的放大效果
  3. 单击商品缩略图下方的Tab标签，切换商品对应的商品详情、购买须知、本单详情和商家介绍等信息
  4. 使用IE、Firefox、Chrome浏览器查看页面效果，如下图所示。

工程目录：

HTML：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link href="static/custom-style/css/index.css" rel="stylesheet"/>
</head>
<body><div id="container"><div id="left-box"><div id="pictureAndMagnifier"><img src="static/images/dd1.jpg" id="demoPic" alt=""><div id="magnifier"></div></div><div id="pictureUl"><ul><li class="imgLi"><a href="#"><img src="static/images/dd1.jpg" alt=""></a></li><li class="imgLi"><a href="#"><img src="static/images/dd2.jpg" alt=""></a></li><li class="imgLi"><a href="#"><img src="static/images/dd3.jpg" alt=""></a></li><li class="imgLi"><a href="#"><img src="static/images/dd4.jpg" alt=""></a></li><li class="imgLi"><a href="#"><img src="static/images/dd5.jpg" alt=""></a></li></ul></div><div id="articleInfo"><div id="infoNav"><ul><li class="funNav show" style="background-color:#F2F2F2;"><a href="#">商品详情</a></li><li class="funNav"><a href="#">商品评价</a></li><li class="funNav"><a href="#">成交记录</a></li></ul></div><div id="itemDetail"><div class="detail" style="display: block">商品详情</div><div class="detail">商品评价</div><div class="detail">成交记录</div></div></div></div><div id="right-box"><div id="zoomResult"><img src="static/images/dd1.jpg" id="zoomPic" alt=""></div></div>
</div></body>
</html>
<script src="static/bootstrap/js/jquery-3.4.1.min.js"></script>
<script>$(function (){//鼠标移入移出显示隐藏放大镜和右侧效果图$('#pictureAndMagnifier').hover(function (){$('#magnifier').show();$('#zoomResult').show();}, function (){$('#magnifier').hide();$('#zoomResult').hide();})//放大镜效果$("#pictureAndMagnifier").mousemove(function (e){var e = e|| event;//这里x=鼠标位置减去左边大盒子距离网页边框的距离，这一步获得了鼠标相对于盒子内部的位置，之后再减去小盒子的宽/2，就获得了盒子正中间的位置let x = e.clientX - $("#pictureAndMagnifier").offset().left-$("#magnifier").width()/2;//这个是鼠标的纵轴，原理同上let y = e.clientY - $("#pictureAndMagnifier").offset().top-$("#magnifier").height()/2;//这里声明了一个最大宽度，用于限制小盒子的右边移动范围，利用大盒子的总宽度减去小盒子的总宽度，剩下的就是小盒子的移动范围let maxX = $("#pictureAndMagnifier").width()-$("#magnifier").width();//小盒子纵轴移动范围let maxY = $("#pictureAndMagnifier").height()-$("#magnifier").height();//限制盒子的左上下右的最大移动范围，不能让小盒子超出大盒子if(x<0){x=0}if(y<0){y=0}if(x>maxX){x=maxX}if(y>maxY){y=maxY}//这里要注意，不能用attr({top:y,left:x}),因为attr写入的属性是写到元素行内的，尽管css里提前写好了position样式，但行内的top和left还是无法和css里的定位属性进行关联。$("#magnifier").css({top:y,left:x})$("#zoomResult>img").css({top:-y*2,left:-x*2})    //这里是右边图片的移动属性，xy轴分别向反方向移动，做出跟随镜头的效果，乘二是因为右边大图比左边小图大一倍。})//鼠标移入切换$('.imgLi').hover(function (){let index = Number($(this).index())+1;$('#demoPic').attr('src', "static/images/dd"+index+".jpg")$('#zoomPic').attr('src', "static/images/dd"+index+".jpg")})//商品详情切换$('.funNav').mousemove(function (){var index =  $(this).index()$(".funNav:eq("+index+")").css("background-color", "#F2F2F2").siblings().css("background-color", "white")$(".detail:eq("+index+")").css("display", "block").siblings().css("display", "none")})})
</script>

注意：这里的布局有点问题，不应该把商品详情和图片放到一个盒子里面，但是放大镜效果不变。

CSS：

body{padding: 0;margin: 0;
}
#container{width: 1000px;margin: 50px auto;display: flex;
}
a{text-decoration: none;color: black;
}
#left-box{width: 400px;height: 600px;
}
#pictureAndMagnifier{width: 100%;height: 400px;position: relative;
}
#pictureAndMagnifier>img{width: 100%;height: 100%;
}
#pictureAndMagnifier>#magnifier{display: none;width: 200px;height: 200px;position: absolute;background-color: pink;opacity: 0.５;
}
#pictureUl{width: 100%;height: 70px;margin-top: 5px;
}
#pictureUl ul{width: 100%;list-style: none;display: flex;padding-left: 0 ;justify-content: space-around;flex-wrap: nowrap;
}
#pictureUl li{width: 73px;
}
#pictureUl img{width: 100%;
}/*商品详细信息*/
#articleInfo ul{display: flex;list-style: none;padding-left: 0;
}
#articleInfo li {border-top: 3px solid orange;border-left: 1px solid gray;border-right: 1px solid gray;box-sizing: border-box;font-size: 12px;padding: 6px 15px 3px 15px;font-weight: bold;
}
.detail{display: none;width: 100%;height: 100px;border: 1px solid orange;
}/*右侧盒子*/
#right-box{width: 400px;height: 400px;border: 1px solid gray;position: relative;overflow: hidden;margin-left: 20px;
}
#zoomResult{width: 100%;height: 400px;display: none;
}
#zoomResult>img{width: 900px;height: 900px;position: absolute;
}

效果图如下：

参考博客：https://blog.csdn.net/var_Xu/article/details/89530672

前端实验大汇总（这个很详细）❤️相关推荐

  1. Java面试笔试题大汇总(最全+详细答案)

    声明:有人说, 有些面试题很变态,个人认为其实是因为我们基础不扎实或者没有深入.本篇文章来自一位很资深的前辈对于最近java面试题目所做的总结归纳,有170道题目 ,知识面很广 ,而且这位前辈对于每个 ...

  2. Java面试题目大汇总（附参考答案）

    足足准备了长达3个月的面试,终于在上周拿到了阿里的offer! 博主汇总整理了一份我面试之前看的一些Java面试题目,可以说是非常详细! 分享给大家,希望对正在面试Java岗位的朋友有帮助哈~~ (文 ...

  3. linux实验手册汇总,Linux实验手册汇总（226页）-原创力文档

    精品文档 Linux 实验手册 补充实验步骤很详细 Linux 重于练习和动手 一 Linux 安装 注意磁盘分区 二: 用户简单操作: 1. 添加用户 u1 和 u2,并分别设置口令 #userad ...

  4. Java面试笔试题大汇总三（最全+详细答案）

    Java面试笔试题大汇总一(最全+详细答案):https://www.jianshu.com/p/73b6b3d35676 Java面试笔试题大汇总二(最全+详细答案)https://www.jian ...

  5. Java面试笔试题大汇总一（最全+详细答案）

    Java面试笔试题大汇总二(最全+详细答案)https://www.jianshu.com/p/f5120f1b75be Java面试笔试题大汇总三(最全+详细答案)https://www.jians ...

  6. Web前端知识技能大汇总

    Web前端知识技能大汇总 来源:github 发布时间:2015-07-08 阅读次数:3432 28 项目起源 还记得@jayli 的这幅前端知识结构图么. 图片的形式具有诸多的不便.缺失源图的我们 ...

  7. 软件开发全套视频教程汇总（javaSE，javaEE，linux,android开发，C# ,web前端，大数据云计算，数据挖掘,web前端，php开发，UI设计，C++开发，3D视频）

    软件开发全套视频教程汇总(javaSE,javaEE,linux,android开发,C# ,web前端,大数据云计算,数据挖掘,web前端,php开发,UI设计,C++开发,3D视频) 这是我以前学 ...

  8. arcgis弧段怎么加很多点_ArcGIS常用操作技巧大汇总

    原标题:ArcGIS常用操作技巧大汇总 1.影像格式的转换 例如把jpg格式转换为tiff格式.可以在arctoolbox中的conversiontools-->to Raster-->R ...

  9. 4982亿背后的前端技术—2020天猫双11前端体系大揭秘

    简介: 整体介绍一下淘系前端在今年双11的思考和沉淀. 今年双11的整体节奏从之前的"光棍节"变为"双节棍",具体业务上也有很多变化和调整,应了阿里的土话&qu ...

最新文章

  1. 【冷门实用小工具】JAVA和C#轻量级的UML图绘制工具NClass，UML类图编辑器免安装版【亲测有效】
  2. DeepMind让AI变身天才数学家！首次提出两大数学猜想，登Nature封面
  3. drop truncate delete区别
  4. iOS面试题总结 二
  5. C# 枚举在项目中的应用总结
  6. lg g7 android9,随着Android 11的临近 LG G7 ThinQ在其最后一家美国运营商处获得了Android 9更新...
  7. GDCM：iU22原始数据提取器的测试程序
  8. KTV歌曲推荐-深入浅出协同过滤
  9. 打造“神犇”是教育的未来吗？
  10. 431.chapter2.configure database mail
  11. linux bcm4312,Fedora 15 中 BCM4312 无线网卡的安装
  12. TF2.0—tf.keras.layers.Lambda
  13. js的函数抖动和函数节流原理
  14. html mysql 数据列表_html的列表加载数据库
  15. 苹果系统连接服务器打印机,Mac系统怎么连接打印机
  16. 形容词,名词记忆(四):al后缀常用词
  17. 关于拉普拉斯算子作用于（1/r）的证明
  18. java小数的数据类型_【填空题】Java 中小数默认的数据类型为 ,如果要指定为 类型,要在小数后面加F或f。...
  19. c语言负数与正数判断大小,c语言编程，输入一些整数，判断其中正数与负数的个数，并分别求出正数与负数的平均值...
  20. 如果Mac苹果电脑关机关不了怎么办？

热门文章

  1. 合肥城市POI数据综合运用研究——功能区识别
  2. 【抓包】网易云音乐WEB端歌曲评论接口分析
  3. Android AccessibilityManagerService浅析
  4. ax.plot()的所有参数及含义
  5. 将时间序列转成图像——相对位置矩阵方法 Matlab实现
  6. Mysql中长连接和短连接的区别
  7. MATLAB 长度和像素_MATLAB图像处理：把照片变成素描风格 V2 (1) 线描
  8. java画卡通人物的代码，一篇文章帮你解答
  9. React全家桶（收藏吃灰必备！）
  10. 2019企鹅号自媒体怎么搬运，企鹅号自媒体视频搬怎么消重去重