2013版网站建设与维护综合实训报告 - 图文(6)

来源：网络收集时间：2026-05-25

导读：《网站建设与维护》课程综合实训报告 \ 美化表单中的元素练习聊天室注册页面 -18- 《网站建设与维护》课程综合实训报告密码：确认密码真实姓名：性别：男女邮箱地址：备注 ? 四、实验结果截图 -19- 《网站

《网站建设与维护》课程综合实训报告

美化表单中的元素练习

聊天室注册页面

-18-

《网站建设与维护》课程综合实训报告

密码：

确认密码

真实姓名：

性别：

邮箱地址：

备注<p><input type=\提交\<input type=\重填\ </form> </body> </html> </p><p> ? </p><p>四、实验结果截图 </p><p>-19- </p><p>《网站建设与维护》课程综合实训报告 </p><p> </p><p> </p><p> 3.17实验17 JavaScript+CSS综合实验 </p><p>3.17.1实验类型 </p><p>验证型实验 </p><p>3.17.2实验目的 </p><p>1、熟悉CSS的使用方法，能熟练定义CSS选择器，熟练书写CSS样式表； 2、理解DOM模型，熟练掌握DOM树中节点的访问方法； 3、掌握利用JavaScript实现客户端验证的基本方法； 4、了解并会使用正则表达式进行复杂数据类型的验证； 5、掌握利用JavaScript+CSS实现样式的动态变换 </p><p>-20- </p><p>《网站建设与维护》课程综合实训报告 </p><p>3.17.3实验内容 </p><p>1、利用JavaScript实现客户端的基本数据验证； 2、利用JavaScript+CSS实现样式的动态变换； </p><p>3.17.4实验步骤 </p><p>1、部分代码如下： !doctype html> <html lang=\ <head> </p><p> <meta charset=\</p><p> <meta name=\ <meta name=\ <meta name=\ <meta name=\ <title>Document</title> <style type=\ .title{ </p><p> font-weight:bolder; </p><p> font-family:宋体; </p><p> font-size:20px; </p><p> background-color:gray; } </p><p> .lbl_title{ </p><p> text-align:right; font-weight:bold; } </p><p> .input_item{ </p><p> text-align:left; } </p><p></style> </p><p> </head> <body> <center> </p><p> <form id=\</p><p> <p> </p><p> </p><p> <p>onmouseover=\olor='#6699ff'\</p><p> onmouseout=\ </p><p> </p><p> <p>-22- </p><p></p> <a href="javascript:void(0);" class="hiddens"></a> </div> <div class="dede_pagess"> <ul class="pagelist"> <li><a>共7页: </a></li><li><a href='565329_5.html'>上一页</a></li><li><a href='565329.html'>1</a></li><li><a href='565329_2.html'>2</a></li><li><a href='565329_3.html'>3</a></li><li><a href='565329_4.html'>4</a></li><li><a href='565329_5.html'>5</a></li><li class="thisclass"><a href='#'>6</a></li><li><a href='565329_7.html'>7</a></li><li><a href='565329_7.html'>下一页</a></li> </ul> </div> <div class="down-word"> <div class="word-ico"></div> <div class="word-tit"> <span class="docx">2013版网站建设与维护综合实训报告 - 图文(6).doc</span> <span>将本文的Word文档下载到电脑，方便复制、编辑、收藏和打印</span> <span></span> </div> <div class="word-pic"><a href="javascript:;">下载这篇word文档</a></div> </div> <div class="show-url">本文链接：<a href="">https://www.jiaowen.net/wendang/565329.html</a>（转载请注明文章来源） </div> <div class="b_box6">上一篇：<a href='/wendang/565328.html'>Kalman滤波原理及程序（手册）解析</a> <br/> 下一篇：<a href='/wendang/565330.html'>第一节医院运行基本监测指标</a> </div> <div class="b_box7"> <p> 相关推荐： </p> <ul class="box"> <li><em>[<a href='/jichu/'>基础教育</a>]</em><a href="/wendang/334993.html">2016-2022年中国钢芯铝绞线市场现状调</a></li> <li><em>[<a href='/jichu/'>基础教育</a>]</em><a href="/wendang/334994.html">语文部编版初一语文下册练习题句式变</a></li> <li><em>[<a href='/jichu/'>基础教育</a>]</em><a href="/wendang/334995.html">南京继续教育参考答案--深入学习贯彻习</a></li> <li><em>[<a href='/jichu/'>基础教育</a>]</em><a href="/wendang/334996.html">国旗下讲话稿——珍惜时间好读书</a></li> <li><em>[<a href='/jichu/'>基础教育</a>]</em><a href="/wendang/334997.html">北师大版六年级数学下册圆锥的体积教学</a></li> <li><em>[<a href='/jichu/'>基础教育</a>]</em><a href="/wendang/334998.html">人教版-音乐-四年级下册-四年级下册音</a></li> <li><em>[<a href='/jichu/'>基础教育</a>]</em><a href="/wendang/334999.html">乔布斯2019年斯坦福大学毕业典礼致辞.d</a></li> <li><em>[<a href='/jichu/'>基础教育</a>]</em><a href="/wendang/335000.html">2015年加油站安全知识竞赛试题及答案</a></li> <li><em>[<a href='/jichu/'>基础教育</a>]</em><a href="/wendang/335001.html">2020年教师年度考核个人工作总结</a></li> <li><em>[<a href='/jichu/'>基础教育</a>]</em><a href="/wendang/335002.html">2019年中考历史试题-2019年大庆市初中</a></li> <li><em>[<a href='/jichu/'>基础教育</a>]</em><a href="/wendang/335003.html">初三仁爱英语第一轮总复习教案</a></li> <li><em>[<a href='/jichu/'>基础教育</a>]</em><a href="/wendang/335004.html">SG-A094电气配管安装工程隐蔽验收记录</a></li> <li><em>[<a href='/jichu/'>基础教育</a>]</em><a href="/wendang/335005.html">冀教版小学数学三年级下册第六单元教材</a></li> <li><em>[<a href='/jichu/'>基础教育</a>]</em><a href="/wendang/335006.html">青岛版(五制)小学科学二年级下册16《制</a></li> <li><em>[<a href='/jichu/'>基础教育</a>]</em><a href="/wendang/335007.html">2018-2019年初中科学初一中考真卷测试</a></li> <li><em>[<a href='/jichu/'>基础教育</a>]</em><a href="/wendang/335008.html">幼儿园大班期末简短评语精选</a></li> <li><em>[<a href='/jichu/'>基础教育</a>]</em><a href="/wendang/335009.html">2018云南临沧公务员考试申论技巧：这样</a></li> <li><em>[<a href='/jichu/'>基础教育</a>]</em><a href="/wendang/335010.html">学校食堂经营管理方案</a></li> <li><em>[<a href='/jichu/'>基础教育</a>]</em><a href="/wendang/335011.html">新中国砥砺奋进的七十年原文</a></li> <li><em>[<a href='/jichu/'>基础教育</a>]</em><a href="/wendang/335012.html">真空泵的选型及常用计算公式</a></li> </ul> </div> </div> </div> <div class="right_1"> <div class="g_box2 u_2"> <div class="t_1">基础教育</div> <ul class="menu"> <li><a href='/xueqian/'>学前教育</a></li> <li><a href='/jichu/' class='on'>基础教育</a></li> <li><a href='/gaodeng/'>高等教育</a></li> <li><a href='/kaoshi/'>资格考试</a></li> <li><a href='/falv/'>法律文档</a></li> <li><a href='/jianzhu/'>建筑文档</a></li> <li><a href='/hulianwang/'>互联网资料</a></li> <li><a href='/hangye/'>行业资料</a></li> <li><a href='/zhengwu/'>政务民生</a></li> <li><a href='/shuomingshu/'>说明书</a></li> <li><a href='/moban/'>实用模板</a></li> <li><a href='/zonghe/'>综合文档</a></li> <div class="clear"> </div> </ul> </div> <div class="g_box2 u_2"> <div class="t_1"> 热门排行 </div> <ul class="b_box1"> <li><a href="/wendang/2328308.html">00Nkmhe_市场营销学工商管理_电子商务_</a></li> <li><a href="/wendang/2328307.html">事业单位考试法律常识</a></li> <li><a href="/wendang/2328306.html">诚信教育实施方案</a></li> <li><a href="/wendang/2328304.html">吉大小天鹅食品安全检测箱方案(高中低</a></li> <li><a href="/wendang/2328305.html">房地产销售培训资料</a></li> <li><a href="/wendang/2328303.html">高一地理必修1复习提纲</a></li> <li><a href="/wendang/2328302.html">新概念英语第二册lesson_1_练习题</a></li> <li><a href="/wendang/2328301.html">证券公司内部培训资料</a></li> <li><a href="/wendang/2328300.html">小学英语时间介词专项练习</a></li> <li><a href="/wendang/2328299.html">新世纪英语专业综合教程(第二版)第1册U</a></li> </ul> </div> <div class="g_box2 u_2"> <div class="t_1"> 最新推荐 </div> <ul class="b_box3 u_1"> <li><a href="/wendang/566483.html">高职田径课程教学现状与对策</a></li> <li><a href="/wendang/566484.html">全髋关节置换术在老年股骨颈骨折患者中</a></li> <li><a href="/wendang/566485.html">青人社厅函〔2016〕576号（附件）工资</a></li> <li><a href="/wendang/566480.html">cp101-07砂子检验作业指导书 - secret </a></li> <li><a href="/wendang/566481.html">微观经济学第八章博弈论习题</a></li> <li><a href="/wendang/566482.html">2014高考真题（词语运用）汇编及答案</a></li> <li><a href="/wendang/566478.html">2018年人教版七年级语文下册《第三单元</a></li> <li><a href="/wendang/566479.html">苏教版数学四年级上册第一单元试题 - M</a></li> <li><a href="/wendang/566474.html">四川大学新闻与传播考研2000-2010年真</a></li> <li><a href="/wendang/566475.html">浙江万里学院英语专业四年制本科教学计</a></li> <li><a href="/wendang/566476.html">最新2018马年事业祝福语-范文word版（2</a></li> <li><a href="/wendang/566477.html">最全模具行业术语英文翻译</a></li> <li><a href="/wendang/566471.html">皮亚杰的发展心理学理论</a></li> <li><a href="/wendang/566472.html">64篇高考情景式默写练习题及答案</a></li> <li><a href="/wendang/566473.html">仿写（学生稿）</a></li> <li><a href="/wendang/566468.html">《SQL Server数据库技术》试卷A</a></li> <li><a href="/wendang/566469.html">第七章作业答案</a></li> <li><a href="/wendang/566470.html">江苏省赣榆县海头高级中学高中语文必修</a></li> <li><a href="/wendang/566466.html">浙江省2001年10月自考正常人体解剖学答</a></li> <li><a href="/wendang/566467.html">2012英语重点短语</a></li> </ul> </div> </div> <div class="clear"></div> </div> <div class="foot">Copyright © 2020-2025 教文网版权所有<br/> 声明 :本网站尊重并保护知识产权，根据《信息网络传播权保护条例》，如果我们转载的作品侵犯了您的权利,请在一个月内通知我们，我们会及时删除。<br/> 客服QQ：78024566 邮箱：78024566@qq.com<br/><a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">苏ICP备19068818号-2</a> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?08167428cb1f9595d271fedcdca87afe"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </div> <a href="#0" class="cd-top">Top</a> <script type="text/javascript"> $(".right-tag a").each(function(){$(this).addClass("tags"+(Math.floor(Math.random()*9)+1));}); $(function(){var c=$("#FontSizeBtn i"),a=$(".art_body");c.click(function(){var b=$(this).index();0==b&&a.css("font-size","18px");1==b&&a.css("font-size","16px");2==b&&a.css("font-size","14px");c.removeClass("active");$(this).addClass("active")})}); </script> <div class="sidebar word-pic"><a href="javascript:;" class="copy-fullpage"><span>一键复制全文</span></a><a href="javascript:;" class="sidedown dl-link"><span>下载文档</span></a></div> <div class="theme-popover"> <div class="theme-poptit"> <a href="javascript:;" title="关闭" class="close">×</a> <b>游客快捷下载通道</b>（下载后可以自由复制和排版） </div> <div class="theme-popbod dform"> <div class="pay-inf"> <div class="guest"> <div class="pay-tit">单篇付费下载</div> <div class="pay-price">限时特价：<b>7 元/份</b> <em>原价:20元</em></div> <div class="pay-select"><span class="pay1"><img src="/style/images/wxpay.jpg" class="over"></span> <span class="pay2"><img src="/style/images/alipay.jpg"></span></div> <div class="guest-pay"> <div class="wxpay"><a href="javascript:;">微信支付并下载</a></div> <div class="alipay" style="display:none;"><a href="javascript:;">支付宝支付并下载</a></div> </div> <div class="vip-pay"> <div class="wxpay"><a href="javascript:;">微信支付并下载</a></div> <div class="alipay" style="display:none;"><a href="javascript:;">支付宝支付并下载</a></div> </div> <div class="service"><a href="javascript:;">联系客服</a></div> </div> <div class="vip"> <div class="pay-tit">VIP包月下载</div> <div class="pay-price">特价：<b>29 元/月</b> <em>原价:99元</em></div> <div class="pay-viptip">低至<b> 0.3 元/份</b> 每月下载<b>150</b>份 <br>全站内容免费自由复制</div> <div class="pay-vipto"><a href="/user/reg.php">注册开通VIP</a></div> </div> <div class="vip-up"> <div class="pay-tit">VIP包月下载</div> <div class="pay-price">特价：<b>29 元/月</b> <em>原价:99元</em></div> <div class="pay-viptip">低至<b> 0.3 元/份</b> 每月下载<b>150</b>份 <br>全站内容免费自由复制</div> <div class="pay-vipto"><a href="/user/index.php">马上升级VIP</a></div> </div> <div class="pay-tips">注：下载文档有可能出现无法下载或内容有问题，请联系客服协助您处理。</div> </div> </div> </div> <div class="service-box"> <div class="service-tit"> <a href="javascript:;" title="关闭" class="close">×</a> <b>常见问题</b>（客服时间：周一到周五 9:30-18:00） </div> <ul> <li><div class="service-que">1、支付成功后，为何无法下载内容？</div><div class="service-ans">付费后下载不了，请核对下微信账单信息，确保付费成功；已付费成功了还是下载不了，有可能是电脑的浏览器兼容性问题或者手机机型不支持的问题。</div></li> <li><div class="service-que">2、付费后能否更换浏览器或者清理浏览器缓存后进行下载操作？</div><div class="service-ans">更换浏览器或者清理浏览器缓存会导致下载不成功，请不要更换浏览器和清理浏览器缓存。</div></li> <li><div class="service-que">3、如何联系客服？</div><div class="service-ans">打开微信扫描下方二维码，请及时联系客服解决。<br>QQ咨询：370150219 <a target="_blank" href="https://wpa.qq.com/msgrd?v=3&uin=370150219&site=qq&menu=yes"><img border="0" src="https://pub.idqqimg.com/qconn/wpa/button/button_111.gif" alt="点击这里给我发消息" title="点击这里给我发消息"></a>，请把【付款记录详情】截图给客服，同时把您购买的文章【网址】发给客服。客服会在24小时内把文档发送给您。<img src="https://www.jiaowen.net/style/images/wxkf.jpg" style="display: block;width:150px;margin:auto;"></div></li> </ul> </div> <div class="service-mask"></div> <div class="theme-popover-mask"></div> <script type="text/javascript"> $(".pay1 img").click(function () { $(".wxpay").css("display", "block"); $(".alipay").css("display", "none"); $(".pay1 img").addClass("over"); $(".pay2 img").removeClass("over"); }); $(".pay2 img").click(function () { $(".wxpay").css("display", "none"); $(".alipay").css("display", "block"); $(".pay1 img").removeClass("over"); $(".pay2 img").addClass("over"); }); </script> <script type="text/javascript"> $(document).ready(function ($) { $(".word-pic a").click(function () { $(".theme-popover-mask").fadeIn(200); $(".theme-popover").slideDown(200); $.ajax({ type: "POST", dataType: "json", url: "/user/check_rank.php", data: {"aid": "565329"}, async: false, success: function (data, textStatus, jqXHR) { if (data.code === "2") { //游客 $(".vip-up").hide(); $(".vip-pay").hide(); var downid = "565329" $(".wxpay a").click(function(){ var payurl = "/hupipay/payment_pay_tz.php?payway=wx&aid="; payurl = payurl.replace("payment", "youke"); var gotourl = payurl + downid location.href = gotourl; }); $(".alipay a").click(function(){ var payurl = "/hupipay/payment_pay_tz.php?payway=ali&aid="; payurl = payurl.replace('payment', 'youke'); var gotourl = payurl + downid location.href = gotourl; }); } else if (data.code === "3") { $(".theme-popover .theme-poptit b").text("会员快捷下载通道"); //注册会员 $(".guest-pay").hide(); $(".vip").hide(); $(".vip-pay").show(); $(".vip-up").show(); var downid = "565329" $(".wxpay a").click(function(){ var payurl = "/hupipay/payment_get.php?version=1.1&paymethod=2&pid="; payurl = payurl.replace("payment", "pay"); var gotourl = payurl + downid location.href = gotourl; }); $(".alipay a").click(function(){ var payurl = "/hupipay/payment_get.php?version=1.1&paymethod=3&pid="; payurl = payurl.replace("payment", "pay"); var gotourl = payurl + downid location.href = gotourl; }); } else if (data.code === "5") { layer.alert("今日下载次数已用完！请明日再来！您可以升级会员增加下载次数！", {icon: 2}); } else if (data.code === "6") { layer.alert("VIP会员已到期！请及时续费！", {icon: 2}); } else { location.href = "/plus/d.php?id=565329"; } } }); }) $(".theme-poptit .close").click(function () { $(".theme-popover-mask").fadeOut(200); $(".theme-popover").slideUp(200); }) }) </script> <script type="text/javascript"> $(document).ready(function ($) { $.ajax({ type: "POST", dataType: "json", data: {"aid": ""}, url: "/user/check_level.php", async: false, success: function (data, textStatus, jqXHR) { if (data.code === "2" || data.code === "3") { $(document).keydown(function (e) { if (e.ctrlKey && (e.keyCode == 65 || e.keyCode == 67)) { $(".theme-popover-mask").fadeIn(100); $(".theme-popover").slideDown(200); } }); document.body.oncopy = function () { $(".theme-popover-mask").fadeIn(200); $(".theme-popover").slideDown(200); return false; } } } }) }) </script> <script type="text/javascript"> $(".service a").click(function () { $(".service-mask").fadeIn(200); $(".service-box").slideDown(200); $(".theme-popover-mask").fadeOut(200); $(".theme-popover").slideUp(200); }); $(".service-tit .close").click(function () { $(".service-mask").fadeOut(200); $(".service-box").slideUp(200); }); </script> </body> </html>