devbox
繁依Fanyi0
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Web前端开发初级中级实操考试样题（附参考答案）

作者：繁依Fanyi0 | 2024-07-13 08:55:26

赞

踩

web 前端开发职业技能等级 实操考试 javaweb

来源 | HTML中文网

初级实操样题

1+X证书制度体现了职业教育作为一种类型教育的重要特征，是落实立德树人根本任务、完善职业教育和培训体系、深化产教融合校企合作的一项重要制度设计。本文为大家提供了一些理论考试样题，希望对大家有一定帮助。

试题一（每空 2 分，共 22 分）

阅读下列说明、效果图和 HTML 代码，进行静态网页开发，请在红线处补全代码。

1、【说明】

这是某电商类网站服装商品展示页面局部，该网站正在促销秋冬季女装。现在我们需要编写该网站效果图部分代码。

项目名称为 shopping，包含首页 index.html、css 文件夹、img 文件夹，其中，css 文件夹包含 index.css 文件；img 文件夹包含 img1.jpg、img2.jpg、img3.jpg、img4.jpg、img5.jpg 图片。

2、【效果图】

3、【代码：首页 index.html】 (提示 * 中间为填空答案 )

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>商品展示</title>
  5.     <meta charset="utf-8">
  6. <link rel="stylesheet" type="text/css" href="css/index.css" />
  7. </head>
  8. <body>
  9. <div class="box">
  10.     <div class="con">
  11. <!-- 根据上下文填入合适的标签 -->
  12. < ***ul***  class="clear">
  13.         <li>
  14.             <img src="img/img1.jpg">
  15.             <p>微胖连衣裙</p>
  16.         </li>
  17.         <li>
  18.             <img src="img/img2.jpg">
  19.             <p>2019网红初秋女装</p>
  20.         </li>
  21.         <li>
  22.             <img src="img/img3.jpg">
  23.             <p>黑色休闲裤</p>
  24.         </li>
  25.         <li>
  26.             <img src="img/img4.jpg">
  27.             <p>韩版学生女装</p>
  28.         </li>
  29.         <li>
  30.             <img src="img/img5.jpg">
  31.             <p>原创设计女装</p>
  32.         </li>
  33.         </ ***ul***>
  34.     </div>
  35. </div>
  36. </body>
  37. </html>

4、【代码：CSS 文件 index.css】(提示 * 中间为填空答案 )

  1. body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd{
  2.     margin: 0;
  3.     padding:0;
  4. }
  5. /*清理默认li样式*/
  6. ul{
  7.      ***list-style:none;***
  8. }
  9. /*显示为块级元素*/
  10. img{
  11.        ***display:block;***
  12. }
  13. /*清理左右浮动*/
  14. .clear:after{
  15.     content: "";
  16.     display: block;
  17.      ***clear:both;***
  18. }
  19. .box{
  20.     width: 100%;
  21. }
  22. .box .con{
  23.     width: 1375px;
  24.     margin:0 auto;
  25. }
  26. .box .con ul{
  27.     padding-top:30px;
  28. }
  29. /*左浮动*/
  30. .box .con ul li{
  31.      ***float:left;***
  32.     width: 250px;
  33.     margin:0 22px 22px 0;
  34.     border:1px solid #eee;
  35. }
  36. .box .con ul li img{
  37.     margin:15px auto 0;
  38. }
  39. .box .con ul li p{
  40.     padding:15px;
  41. }
  42. /*设置鼠标移入添加红色边框*/
  43. .box .con ul  li:  ***hove***
  44. {
  45.     border:1px solid red;
  46. }

试题二（每空 2 分，共 26 分）

阅读下列说明、效果图，进行静态网页开发，请在红线处补全代码。

1、【说明】

现接到思极商务有限公司官网页面开发的项目，根据业务需求，需要将业务列表页面的每一个业务以卡片形式展示；同时为提升用户体验，要求实现每个卡片在鼠标经过有旋转和放大效果。

项目名称为 goods，包含首页 index.html、css 文件夹、img 文件夹，其中，css 文件夹包含 style.css 文件；img 文件夹包含 icon-img.jpg、icon-img2.jpg、icon-img3.jpg 图片。

请使用 html+css3 完成以下效果，并在对应代码处将空缺代码补全。

2，【效果图】
（1）鼠标经过

（2）鼠标经过

3.【代码：首页 index.html】 (提示 * 中间为填空答案 )

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>第二题</title>
  5.     <meta charset="utf-8">
  6. <!-- 根据说明正确导入当前目录下css文件夹中的style.css -->
  7. <link rel="stylesheet" type="text/css"  href="***css/style.css 或 ./css/style.css***" >
  8. </head>
  9. <body>
  10. <div class="box">
  11.     <div class="con">
  12.         <ul class="clear">
  13.             <li>
  14.                 <img src="img/icon-img.jpg">
  15.                 <p>优化速度</p>
  16.                 <span>更多</span>
  17.             </li>
  18.             <li>
  19.                 <img src="img/icon-img2.jpg">
  20.                 <p>营销分析</p>
  21.                 <span>更多</span>
  22.             </li>
  23.             <li>
  24. <!-- 根据上下文填写正确的标签 -->
  25.                 < ***img***  src="img/icon-img3.jpg" >
  26.                 <***img***>SEO和导入链接</p>
  27.                 <span>更多</span >
  28.             </li>
  29.         </ul>
  30.     </div>
  31. </div>
  32. </body>
  33. </html>

4.【代码：CSS 文件 style.css】 (提示 * 中间为填空答案 )

  1. /* 注意：此处省略了部分和本题无关的css代码 */
  2. .box .con ul li{
  3.     float:left;
  4.     background-color: #fff;
  5.     width: 380px;
  6. /*设置li边框为圆角15px，文字对齐方式为居中。*/
  7.  
  8.  
  9.     ***border-radius:15px;***
  10.     ***text-align:center;***
  11.     overflow: hidden;
  12. }
  13. .box .con ul li:nth-child(2){
  14.     margin:0 30px;
  15. }
  16. .box .con ul li img{
  17.     margin:50px auto 0;
  18. /*此处设置图片的过渡效果为0.8秒*/
  19.  
  20.  
  21.    ***transition***：0.8s;
  22. }
  23. .box .con ul li p{
  24. /*设置内边距上下为0，左右为15px*/
  25.  
  26.  
  27.     ***padding:0 15px;***
  28.     line-height: 140px;
  29.     border-bottom:1px solid #ddd;
  30.     font-weight: 600;
  31.     color:#555;
  32. }
  33. .box .con ul li span{
  34.     display: block;
  35.     width: 100%;
  36.     height:60px;
  37.     line-height: 60px;
  38. /*此处设置文字的过渡效果为0.8秒*/
  39.  
  40.  
  41.    ***transition***：0.8s;
  42. }
  43. /*用CSS3的实现鼠标经过图片旋转360度，放大1.3倍，离开再旋转还原。*/
  44. .box .con ul li:hover img{
  45.  
  46.  
  47. ***transition:rotate(360deg) scale(1.3);***
  48. }
  49. .box .con ul li:hover span{
  50.     background-color: #f7c324;
  51.     font-weight: 600;
  52. }

试题三（每空 2 分，共 20 分）

阅读下列说明、效果图和代码，进行静态网页开发，请在红线处补全代码。

1、【说明】

现接到某电商网站注册、登录页面开发的项目，在注册页面需要做前端验证。具体要求：用户名长度和格式验证、邮箱格式验证、密码长度和格式验证、密码与重复密码一致性验证。

项目名称为 verify，包含首页 index.html、css 文件夹、js 文件夹，其中，css 文件夹包含 style.css 文件，js 文件夹包含 index.js 文件。

2、【效果图】

3.【代码：index.html】 (提示 * 中间为填空答案 )

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>登录</title>
  5.     <meta charset="utf-8">
  6.     <link rel="stylesheet" type="text/css" href="css/style.css">
  7. </head>
  8. <body>
  9.     <div class="box" id="box">
  10.         <h2>注册</h2>
  11.         <form action="" method="post">
  12.             <ul>
  13.                 <li>
  14.                     <label><span>*</span>用户名：</label>
  15.                     <input type="text" name="username"
  16.                           placeholder="只能输入6-20个字母、数字、下划线" id="username">
  17.                 </li>
  18.                 <li>
  19.                     <label><span>*</span>电子邮箱：</label>
  20.                     <input type="text" name="email"
  21.                           placeholder="输入正确的电子邮箱地址" id="email">
  22.                 </li>
  23.                 <li>
  24.                     <label><span>*</span>密码：</label>
  25.                     <input type="password" name="pwd"
  26.                           placeholder="由字母开头,包含字母、数字、下划线,6-16位" id="pwd">
  27.                 </li>
  28.                 <li>
  29.                     <label><span>*</span>确认密码：</label>
  30.                     <input type="password" name="pwdOk"
  31.                           placeholder="确认密码必须与密码一致" id="pwdOK">
  32.                 </li>
  33.             </ul>
  34.             <button name="submit">提交</button>
  35.         </form>
  36.     </div>
  37. <script src="js/index.js"></script>
  38. </body>
  39. </html>

4.【代码：index.js】 (提示 * 中间为填空答案 )

  1. //自定义验证用户名的方法
  2. function validate_strLenght(str) {
  3.     var regExp = /^(\w){6,20}$/;
  4.     return regExp.test(str);
  5. }
  6. //自定义的验证email方法
  7. function validate_email(str) {
  8.     var regExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
  9.     return regExp.test(str);
  10. }
  11. //自定义验证密码的方法
  12. function validate_pwd(str) {
  13.     var regExp = /^[a-zA-Z]\w{5,15}/;
  14.     return regExp.test(str);
  15. }
  16. //根据表单控件user的id填写
  17. var username = document.getElementById("***Username***");
  18. //通过id获取元素
  19. var email = document.***getElementById***("email");
  20. //根据表单控件pwd的id填写
  21. var pwd = document.getElementById("***pwd***");
  22. //通过id获取元素
  23. var pwdOK = document.***getElementById***("pwdOK");
  24. //通过标签名获取元素
  25. var form = document.***getElementsByTagName***("form")[0];
  26. //表单提交
  27. form.***onsubmit***= function () {
  28.     //使用自定义方法验证用户名、验证邮箱
  29.     if (validate_strLenght(***username.value***) && ***validate_email***
  30. (email.value) && validate_pwd(pwd.value) && checkOk()) {
  31.         console.log(username.value)
  32.         console.log(email.value)
  33.         console.log(pwd.value)
  34.         return false;
  35.     } else {
  36.         //控制台输出
  37.  
  38.  
  39.   ***console***.log("验证失败")
  40.         return false;
  41.     }
  42. }
  43. // 检查用户名
  44. username.onblur = function () {
  45.     if (validate_strLenght(username.value)) {
  46.         console.log("用户名符合要求")
  47.     } else {
  48.         console.log("用户名不符合要求")
  49.     }
  50. }
  51. //检查meil
  52. email.onblur = function () {
  53.     if (validate_email(email.value)) {
  54.         console.log("邮箱格式符合要求")
  55.     } else {
  56.         console.log("邮箱格式不符合要求")
  57.     }
  58. }
  59. // 密码框失去焦点的时候
  60. pwd.***onblur***= function () {
  61.     if (validate_pwd(pwd.value)) {
  62.         console.log("密码符合要求")
  63.     } else {
  64.         console.log("密码不符合要求")
  65.     }
  66. }
  67. function checkOk() {
  68.     if (pwd.value == pwdOK.value) {
  69.         console.log("密码与重复密码一致")
  70.         return true
  71.     } else {
  72.         console.log("密码与重复密码不一致")
  73.         return false
  74.     }
  75. }
  76. pwdOK.onkeyup = checkOk

试题四（每空 4 分，共 16 分）

阅读下列说明、效果图和代码，进行动态网页开发，请在红线处补全代码。

1、【说明】

某公司要制作自己的官网首页，经过研究，侧边栏采用手风琴菜单效果。现在我们需要编写该网站效果图部分的代码。

项目名称为 accordion，包含首页 index.html、css 文件夹、js 文件夹，其中，css 文件夹包含 style.css 文件；js 文件夹包含 jquery.min.js 和 index.js。

2、【效果图】

3.【代码 首页 index.html】

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>手风琴效果</title>
  5.     <meta charset="utf-8">
  6.     <link rel="stylesheet" type="text/css" href="css/style.css">
  7.     <script src="js/jquery.min.js"></script>
  8. </head>
  9. <body>
  10. <div class="box">
  11.     <ul>
  12.         <li>
  13.             <h2>要求<span></span></h2>
  14.             <div><p>要求要求要求要求要求要求要求要求要求要求要求要求要求要求要求要求要求</p></div>
  15.         </li>
  16.         <li>
  17.             <h2>信念<span></span></h2>
  18.             <div>
  19.             <p>信念信念信念信念信念信念信念信念信念信念信念信念信念信念信念信念信念信念信念信念信念信念</p>
  20.             </div>
  21.         </li>
  22.         <li>
  23.             <h2>接受<span></span></h2>
  24.             <div>
  25.             <p>接受接受接受接受接受接受接受接受接受接受接受接受接受接受接受接受接受接受接受接受接受接受接受</p>
  26.             </div>
  27.         </li>
  28.         <li>
  29.             <h2>现实<span></span></h2>
  30.             <div>
  31.             <p>现实现实现实现实现实现实现实现实现实现实现实现实现实现实现实现实现实现实现实现实现实现实现实现
  32.             实现实现实现实现实现实</p><
  33.             /div>
  34.         </li>
  35.     </ul>
  36. </div>
  37. <script src="js/index.js"></script>
  38. </body>
  39. </html>

4.【代码 index.js】 (提示 * 中间为填空答案 )

  1. $(".box ul li h2").click(function(e){
  2.     e.stopPropagation();
  3.     //被点击的h2的next的div下拉展开，其余的li内部的div上拉收起，时间800毫秒。
  4.     $(this).next().stop().***slideDown(800)***.parents("li").siblings().find("div").
  5.    stop().***slideUp(800)***;
  6.     $(this).parent().stop().addClass("cur").siblings().stop().removeClass("cur");
  7. })
  8. //点击事件
  9. $(document).***click***(function(){
  10.     //所有div上拉收起，时间800毫秒。
  11.     $(".box ul li").find("div").***slideDown(800)***
  12. ;
  13. })

试题五（每空 2 分，共 16 分）

阅读下列说明、效果图和代码，进行静态网页开发，请在红线处补全代码。

1、【说明】

某互联网公司开发官网的首页，为了适配移动端，决定菜单采用底部固定形式。现在需要编写代码实现效果。

项目名称为 menu，包含首页 index.html、css 文件夹、js 文件夹，其中，css 文件夹包含 style.css 文件；js 文件夹包含 jquery.min.js 和 index.js。

2、【代码 index.html】

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>底部菜单</title>
  5. <meta charset="utf-8">
  6. <metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1,
  7.                                             user-scalable=no">
  8. <link rel="stylesheet" href="css/style.css">
  9.     <script src="js/jquery.min.js"></script>
  10. </head>
  11. <body>
  12.     <div class="layout-footer">
  13.         <div class="bottom_nav">
  14.             <a href="">首页</a>
  15.         </div>
  16.         <div class="bottom_nav">
  17.             <div class="layout-submenu">
  18.                 <div class="sub_menu" style="border-bottom: 1.5px solid #F2F2F2">
  19.                 <a>项目</a>
  20.                 </div>
  21.                 <div class="sub_menu">项目</div>
  22.             </div>
  23.             <a>服务</a>
  24.         </div>
  25.         <div class="bottom_nav">
  26.             <div class="layout-submenu">
  27.                 <div class="sub_menu" style="border-bottom: 1.5px solid #F2F2F2">
  28.                 <a>中心公告</a>
  29.                 </div>
  30.                 <div class="sub_menu">中心资讯</div>
  31.             </div>
  32.             <a>资讯</a>
  33.         </div>
  34.         <div class="bottom_nav">
  35.             <a>我的账户</a>
  36.         </div>
  37.     </div>
  38. <script src="js/index.js"></script>
  39. </body>
  40. </html>

3、【代码 index.css】 (提示 * 中间为填空答案 )

  1. a {
  2.         text-decoration: none;
  3.         color: #333;
  4. }
  5. /*固定定位*/
  6. .layout-footer {
  7.         position:***fixed***;
  8.         z-index: 9999;
  9. /*左边距离0px，底边距离0px*/
  10.         left:***0px**;
  11.         bottom: ***0px***;
  12. /*实现flex布局，主轴对齐方式是两端对齐，项目之间的间隔都相等。*/
  13.         display:***flex***;
  14.         justify-content:***space-between***;
  15.         width: 100%;
  16.         height: 50px;
  17.         border-top: 1px solid gainsboro;
  18.         color: black;
  19.         text-align: center;
  20.         background-color: #f2f2f2;
  21. }
  22. /*此处省略部分与本题无关的css*/

4、【代码 index.js】 (提示 * 中间为填空答案 )

  1. $(".bottom_nav a").click(function (e) {
  2.     e.stopPropagation();
  3.     //被点击a的上一个div元素样式设置为block，其余项目的div的隐藏。
  4.     $(this).prev().stop(). ***css('display','block')***.parent().siblings()
  5.     .children(".layout-submenu").stop(). ***css('display','none')***;
  6.  })
  7.  
  8.  
  9. $(document).click(function () {
  10.     //点击页面的任意地方，二级菜单全部取消
  11.     $(".box ul li").find("div"). ***css('display','block')***;
  12. })

中级实操样题

试题一（每空 2 分，共 30 分）

阅读下列说明、效果图和 HTML 代码，进行静态网页开发，在红色横线处补全代码。
1.【说明】

这是 “Web 技术社区” 网站，该网站致力于推广和分享各种前端开发技术，现在我们需要编写该网站首页。

项目名称为web_skill，采用Bootstrap框架，包含首页index.html、css文件夹、js文件夹、img文件夹，其中，css文件夹包含index.css文件和bootstrap.min.css文件；js文件夹包含jquery-3.2.1.min.js文件和bootstrap.min.js文件；img文件夹包含bootstrap.png、php.png、mysql.png和laravel.png图片。

首页（index.html）使用Bootstrap响应式布局，PC端和移动端能够自适应显示，内容分为三部分：

一是【页头】，包括网页标题和导航栏，网页标题“Web技术社区”使用盒模型，导航栏使用了下拉插件，显示时为菜单，在移动端显示为折叠导航栏；

二是【网站介绍】，背景从上到下由黑到白渐变，鼠标悬停时“欢迎来到Web技术社区”标题字号变大为根元素大小的2.25倍；

三是【技术介绍】，采用栅格系统布局，以图片和标题的形式展示四项【技术】，屏幕宽度≥992px时显示四列，屏幕宽度<576px时显示两列。

2.【效果图】
（1）index.html 在 PC 端效果

2）导航栏 “Bootstrap” 项使用下拉插件，点击显示下拉菜单，内容为 “布局”、“组件”、“插件”

（3）index.html 在移动端效果如图 1-3 所示，导航栏和 “Bootstrap” 下拉插件

3.【代码：首页 index.html】 (提示 * 中间为填空答案 )

  1. <!DOCTYPE html><html><head>
  2.     <meta charset="UTF-8">
  3.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  4.     <!-- 导入css文件夹中bootstrap.min.css基础样式文件 -->
  5.     <link rel="stylesheet" type="text/css" href="***css/bootstrap.min.css***" />
  6.     <link rel="stylesheet" type="text/css" href="css/index.css" />
  7.     <title>Web技术社区</title></head><body>
  8.     <!-- 页头 -->
  9.     <!-- 响应式导航栏 -->
  10.     <nav class="navbar ***navbar-expand-lg*** navbar-dark bg-dark">
  11.         <a class="brand" href="#">Web技术社区</a>
  12.         <!-- 折叠导航栏 -->
  13.         <button class="***navbar-toggler***" type="button" data-toggle="collapse"
  14.        data-target="***#navToggler***">
  15.             <span class="navbar-toggler-icon"></span>
  16.         </button>
  17.         <div class="collapse navbar-collapse" id="navToggler">
  18.             <ul class="navbar-nav mr-auto">
  19.                 <li class="nav-item active">
  20.                     <a class="nav-link" href="#">首页</a>
  21.                 </li>
  22.                 <!-- 下拉菜单 -->
  23.                 <li class="nav-item   ***dropdown***">
  24.                     <a class="nav-link dropdown-toggle"
  25.                     href="#" data-toggle="dropdown">Bootstrap</a>
  26.                     <div class="dropdown-menu">
  27.                         <a class="dropdown-item" href="#">布局</a>
  28.                         <a class="dropdown-item" href="#">组件</a>
  29.                         <a class="dropdown-item" href="#">插件</a>
  30.                     </div>
  31.                 </li>
  32.                 <li class="nav-item">
  33.                     <a class="nav-link" href="#">PHP</a>
  34.                 </li>
  35.                 <li class="nav-item">
  36.                     <a class="nav-link" href="#">MySQL</a>
  37.                 </li>
  38.                 <li class="nav-item">
  39.                     <a class="nav-link" href="#">Laravel</a>
  40.                 </li>
  41.             </ul>
  42.         </div>
  43.     </nav>
  44.     <div id="introduction">
  45.         <div id="content">
  46.             <h2>欢迎来到Web技术社区</h2>
  47.             <p>本站包括Bootstrap、PHP、MySQL、Laravel等Web技术教程</p>
  48.         </div>
  49.     </div>
  50.     <!-- 栅格系统 -->
  51.     <!-- 最外层容器100%宽度-->
  52.     <div class=" ***container-fluid***">
  53.         <!-- 行 -->
  54.         <div class="row">
  55.             <!-- 屏幕宽度≧992px时显示四列，屏幕宽度<576px时显示两列 -->
  56.             <div class="***col-6 col-lg-3 或 col-lg-3 col-6***">
  57.                 <!--第一张图片和标题-->
  58.                 <div class="card">
  59.                     <img class="card-img-top" src="img/bootstrap.png">
  60.                     <div class="card-body">
  61.                         <p class="card-text">Bootstrap</p>
  62.                     </div>
  63.                 </div>
  64.                 <!--第二张图片和标题-->
  65.                 <div class="card">
  66.                     <img class="card-img-top" src="img/php.png">
  67.                     <div class="card-body">
  68.                         <p class="card-text">PHP</p>
  69.                     </div>
  70.                 </div>
  71.                 <!--第三张图片和标题-->
  72.                 <div class="card">
  73.                     <img class="card-img-top" src="img/mysql.png">
  74.                     <div class="card-body">
  75.                         <p class="card-text">MySQL</p>
  76.                     </div>
  77.                 </div>
  78.                 <!--第四张图片和标题-->
  79.                 <div class="card">
  80.                     <img class="card-img-top" src="img/laravel.png">
  81.                     <div class="card-body">
  82.                         <p class="card-text">Laravel</p>
  83.                     </div>
  84.                 </div>
  85.             </div>
  86.         </div>
  87.     </div>
  88.     <!-- 导入js文件夹里的jquery-3.2.1.min.js文件和bootstrap.min.js文件 -->
  89.     <script src="js/jquery-3.2.1.min.js"></script>
  90.     <script src="***js/bootstrap.min.js***"></script></body></html>

4.【代码：CSS 文件 index.css】 (提示 * 中间为填空答案 )

  1. body {font-size: 20px;}
  2. .navbar-dark .navbar-nav .nav-link{
  3.     color: white;
  4. }
  5. .navbar {
  6.     position: absolute;
  7.     top:0px;
  8.     width: 100%;
  9.     z-index: 99;
  10. }
  11. .brand {
  12.     color: white;
  13.     /* 盒模型 */
  14.     ***border: 1px solid white***;/* 边框1px，白色，实线 */
  15.     padding: 5px;/* 内边距5px */
  16.     ***margin: 5px***;/* 外边距5px */
  17. }
  18. .brand:hover {
  19.     color: white;
  20.     text-decoration: none;
  21. }
  22. #introduction {
  23.     background: ***linear-gradient***(to ***bottom***,black,white);/* 背景从上到下颜色渐变 */
  24.     width:100%;
  25.     height:400px;
  26.     color: rgba(255,255,255,0.9);/* 字体颜色 */
  27. }
  28. #content {
  29.     position: absolute;
  30.     top: 16%;
  31.     left: 16%;
  32.     width: 68%;
  33.     text-align: center;
  34. }
  35. #content h2:hover {
  36.     font-size: 2.25***rem**;/* 设置字体大小为根元素大小的2.25倍 */
  37.     ***transition***: font-size 1s;/* 使用过渡，1s内标题字号变大 */
  38. }
  39. .card{
  40.     margin: 10px;
  41.     ***box-shadow:***1px 1px 5px black;/* 盒阴影 */
  42.     text-align: center;
  43.     align-items: center;
  44. }
  45. .card-img-top{
  46.     margin-top: 10px;
  47.     width: 60%;
  48. }
  49. .card-text { text-align: center;}

试题二（每空 1.5 分，共 30 分）

阅读下列说明、效果图、MySQL 数据库操作和代码，进行动态网页开发，请在红色横线处补充代码。

1、【说明】

该程序为一个用户管理模块，使用 PHP 编程，采用 MySQL 数据库和 mysqli 编程。项目名称为 project，包括登录 login.php、处理登录请求 check.php、用户管理主页 index.php、用户管理数据库操作 user.php，以及创建数据库脚本 db.sql 和初始化数据脚本 init.sql。

2.【效果图】

（1）登录 login.php

在登录页面进行登录，并进行登录请求处理，用户登录页面如下

（2）用户管理主页 index.php

登录成功时，用 Session 保存用户账号，并跳转到 “用户管理主页”，主页布局如下：在头部显示 “欢迎 + 用户账号” 信息，在中间区域用表格显示用户列表信息，每一个用户信息显示为一行，内容包含 “序号、帐号、密码、手机号”。用户管理主页如下：

3.【MySQL 数据库操作：创建数据库脚本 db.sql】

系统使用 MySQL 数据库，数据库名为 user_center，表名为用户表 users。user 表包含序号、用户帐号、密码、手机号字段，其中，序号为自增字段和主键。请补充两处代码。(提示 * 中间为填空答案 )

  1. DROP DATABASE IF EXISTS user_center;
  2. CREATE DATABASE user_center;
  3. USE user_center;
  4. CREATE TABLE `users`
  5. (
  6.    `id` int (11) NOT NULL ***auto_increment*** COMMENT '序号',
  7.    `account` varchar (16) NOT NULL COMMENT '用户帐号,16位字符',
  8.    `password` char (64) NOT NULL COMMENT '密码',
  9.    `telphone` varchar (32) DEFAULT '' COMMENT '手机号',***primary key*** (`id`)
  10. )ENGINE= InnoDB DEFAULT CHARSET= utf8;

4.【MySQL 数据库操作：初始化数据脚本 init.sql】

在 MySQL 数据库中，向 user_center 数据库中 users 表插入用户信息数据，以便在用户管理主页 index.php 上显示用户列表信息，插入数据脚本如下。

  1. USE user_center;
  2. insert into users(account, password, telphone) value('admin', 'admin', "16871054787");
  3. insert into users(account, password, telphone) value('admin2', 'admin2', "13871456841");
  4. insert into users(account, password, telphone) value('admin3', 'admin3', "80041224771");
  5. insert into users(account, password, telphone) value('admin4', 'admin4', "15874581652");
  6. insert into users(account, password, telphone) value('admin5', 'admin5', "25417522145");
  7. insert into users(account, password, telphone) value('admin6', 'admin6', "40014125155");
  8. insert into users(account, password, telphone) value('admin7', 'admin7', "15847455514");
  9. insert into users(account, password, telphone) value('admin8', 'admin8', "16854711223");

5.【代码：用户管理数据库操作 user.php】

在 user.php 文件中，定义 User 类，进行数据库操作。在进行数据库编程中，应用 mysqli。

（1）在类中定义静态属性，设置数据库连接基本参数。

（2）在类中定义静态的方法 conn ()，连接 mysql 数据库。

（3）定义 checkLogin () 方法，验证用户登录。

（4）定义 queryAll () 方法，查询全部用户信息，并返回 $users 二维数组。

(提示 * 中间为填空答案 )

  1. <?php
  2. ***class*** User {
  3.     static $host = "127.0.0.1";
  4.     static $dbname = "user_center";
  5.     static $user = "root";
  6.     static $pass = "123456";
  9.     static function conn() {
  10.         $db = ***new mysqli*** (self::$host, self::$user, self::$pass, self::$dbname);
  11.         if(mysqli_connect_errno()) {
  12.             return null;
  13.         }
  14.         return $db;
  15.     }
  18.     public ***function*** checkLogin($account, $password) {
  19.         $db = null;
  20.         $stmt = null;
  21.         try {
  22.             $db = self::conn();
  23.             if($db) {
  24.                 $sql = "***select id from users where account
  25.                 = ? and password = ? ***";
  26.                 $stmt = $db->prepare($sql);
  27.                 $stmt->bind_param("***ss***", $account, $password);
  28.                 $stmt->bind_result($id);
  29.                 $stmt->***execute***();
  30.                 if($stmt->fetch()) {
  31.                     return true;
  32.                 }
  33.             }
  34.         } catch(Exception $e) {
  35.             echo "Message:" . $e->getMessage();
  36.         } finally {
  37.             if($stmt != null) {
  38.                 $stmt->free_result();
  39.             }
  40.             if($db != null) {
  41.                 $db->close();
  42.             }
  43.         }
  44.         return false;
  45.     }
  48.     public function queryAll() {
  49.         $db = null;
  50.         $stmt = null;
  51.         $users = array();
  52.         try {
  53.             $db = self::conn();
  54.             $sql = "select id, account, password, telphone from users";
  55.             $stmt = $db->prepare($sql);
  56.             ***$stmt->bind_result***($id, $account, $password, $telphone);
  57.             $stmt->execute();
  58.             while($stmt->fetch()) {
  59.                 ***array_push**($users, array(
  60.                     "id" => $id,
  61.                     "account" => $account,
  62.                     "password" => $password,
  63.                     "telphone" => $telphone
  64.                 ));
  65.             }
  66.         } catch(Exception $e) {
  67.             echo "Message:" . $e->getMessage();
  68.         } finally {
  69.             if($stmt != null) {
  70.                 $stmt->free_result();
  71.             }
  72.             if($db != null) {
  73.                 $db->close();
  74.             }
  75.         }
  76.         return $users;
  77.     }
  78. }

6.【代码：登录 login.php】

点击 “登录” 按钮，将表单以 POST 方式提交，处理该请求的文件为 check.php，请在横线处补充代码。
(提示 * 中间为填空答案 )

  1. <!DOCTYPE html><html><head>
  2.     <meta charset="utf-8">
  3.     <title>登录</title></head><body>
  4.     <form action="***check.php***" method="post">
  5.         <table>
  6.             <tr><th>用户登录</th></tr>
  7.             <tr>
  8.                 <td>
  9.                     <label>帐号</label>
  10.                     <input name="account" type="text" value="" />
  11.                 </td>
  12.             </tr>
  13.             <tr>
  14.                 <td>
  15.                     <label>密码</label>
  16.                     <input name="password" type="password" value="" />
  17.                 </td>
  18.             </tr>
  19.             <tr>
  20.                 <td><input type="submit" value="登录" /></td>
  21.             </tr>
  22.         </table>
  23.     </form></body></html>

7.【代码：处理登录请求 check.php】

在 check.php 文件中，导入 User 类文件，并创建该类的对象 $user，调用 user.php 中 checkLogin () 方法，对用户账号和密码进行验证。

当登录成功时，使用 Session 保存用户账号，并跳转到用户管理主页 index.php，当登录失败时跳转到登录页面 login.php。请根据要求填写代码。
(提示 * 中间为填空答案 )

  1. <?php
  2. include_once "user.php";
  5. if ($_SERVER["REQUEST_METHOD"] == "POST") {
  6.     $account = $_POST["account"];
  7.     $password = $_POST["password"];
  10.     $user= ***new User()***;
  11.     if ($user->***checkLogin***($account,$password)) {
  12.         session_start();
  13.         $_SESSION["user"] = $account;
  14.         ***header***("location:index.php");
  15.     } else {
  16.         如前空("location:login.php");
  17.     }
  18. }

8.【代码：用户管理主页 index.php】

在 index.php 文件中，将 Session 中保存用户账号显示到页面头部。导入 User 类文件，并创建该类的对象 $user，调用 user.php 中 queryAll () 方法，查询全部用户信息。

将查询返回用户信息，通过 for 循环，以表格形式进行显示，请根据要求补充代码。
(提示 * 中间为填空答案 )

  1. <?php include_once "user.php"; ?>
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title></title>
  7. </head>
  8. <body>
  9.     <header>
  10.     <div>
  11.     <?php
  12.         session_start();
  13.         if (isset(***$_SESSION['user']***)) {
  14.             echo "欢迎 " . 如前空;
  15.         } else {
  16.             echo "<a href='login.php'>未登录</a>";
  17.         }
  18.     ?>
  19.     </div>
  20.     </header>
  21.     <article>
  22.     <?php
  23.         $user= new User();
  24.         $users = ***$user->queryAll()***;
  25.     ?>
  26.     <table>
  27.         <tr><th>帐号</th>    <th>密码</th><th>手机号</th></tr>
  28.         <?php ***foreach($users as $u):*** ?>
  29.         <tr>
  30.             <td>***<?php echo $u['account'];?>***</td>
  31.             <td><?php echo $u["password"];?></td>
  32.             <td><?php echo ***$u['telphone']*** ;?></td>
  33.         </tr>
  34.         ***<?php endforeach;?>***
  35.     </table>
  36.     </article>
  37. </body>
  38. </html>

试题三（每空 2 分，共 20 分）

阅读下列说明、效果图和代码，进行动态网页开发，请在红色横线处补全代码。

1、【说明】

随着互联网发展，越来越多的人开始阅读电子书，本项目实现在网页上阅读 JSON 格式书籍，应用 HTML、CSS、AJAX、JSON、PHP 等技术。

项目名称为 book，包含主页 index.html、index.css 和 loadJSON.php 文件，其中，主页面 index.html 显示书籍内容；index.css 为主页样式文件；loadJSON.php 为主页提供数据，返回 JSON 格式书籍。

主页分为两个部分：左侧为按钮和 “目录”，中间为章对应 “内容”。点击 “开始阅读” 按钮，通过 ajax 发送请求到 loadJSON.php，loadJSON.php 返回 JSON 格式的书籍。

在主页上通过 ajax 拿到数据后，使用 JavaScript 进行 DOM 操作，实现动态构建 “目录” 和 “内容”。同时，为每一级 “目录” 绑定点击方法，当点击对应的 “目录” 中章时，对应 “内容” 部分会随之更新。

如下图所示：

2.【代码：主页 index.html】 (提示 * 中间为填空答案 )

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>Web阅读器</title>
  6.     <link rel="stylesheet" type="text/css" href="index.css"/>
  7. </head>
  8. <body>
  9.     <div>
  10.         <!-- 相对路径 -->
  11.         <button onclick="***./loadJSON.php***">开始阅读</button>
  12.     </div>
  13.     <header></header>
  14.     <aside class="list">
  15.     </aside>
  16.     <article class="content">
  17.         <p></p>
  18.     </article>
  19. </body>
  20. <script type="text/javascript">
  21.     var json = {};
  22.     /* 获取json格式文章 */
  23.     function loadJSON(url){
  24.         var xmlhttp;
  25.         if (window.XMLHttpRequest) { // for IE7+, Firefox, Chrome, Opera, Safari
  26.             xmlhttp = new ***XMLHttpRequest***;
  27.         } else { // for IE6, IE5
  28.             xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  29.         }
  30.         xmlhttp.***open***("GET", url, true);
  31.         xmlhttp.***send***();
  32.         xmlhttp.***onreadystatechange***=function(){
  33.             if (xmlhttp.***readyState***== 4 && xmlhttp.***status***== 200) {
  34.                 var result = ***JSON.parse***(xmlhttp.responseText);
  35.                 json = result;
  36.                 /* 构建标题 */
  37.                 var dom = document.getElementsByTagName("header")[0];
  38.                 var h1 = document.createElement("h1");
  39.                 h1.innerHTML = ***result.title***;
  40.                 dom.appendChild(h1); /* 添加节点 */
  41.                 /* 构建目录 */
  42.                 var dom = document.getElementsByTagName("aside")[0];
  43.                 for(var data in result){
  44.                     if(data.search("subject") != -1){
  45.                         var ul = document.createElement("ul");
  46.                         ul.innerHTML = result[data];
  47.                         ul.value = data;
  48.                         /* 构建内容 */
  49.                         ul.***onclick*** = function(){
  50.                             document.getElementsByTagName("p")
  51.                             [0].innerHTML = json["content" +
  52.                             this.value.split("subject")[1]];
  53.                         };
  54.                         dom.appendChild(ul);
  55.                     }
  56.                 }
  57.             }
  58.         }
  59.     }
  60. </script>
  61. </html>

3.【代码：loadJSON.php】

  1. <?php
  2.     $arr = array(
  3.         "title" => "PHP教程",
  4.         "subject1" => "第一章：PHP 语法",
  5.         "content1" => "PHP 脚本可以放在...",
  6.         "subject2" => "第二章：PHP 变量",
  7.         "content2" => "变量以 $ 符号开始，后面...",
  8.         "subject3" => "第N章：...",
  9.         "content3" => "未完待续",
  10.     );
  11.     echo json_encode($arr);
  12. ?>

4.【代码：index.css】

  1. *{
  2.     font-size: 30px;
  3. }
  4. header{
  5.     position: absolute;
  6.     top:15%;
  7.     width:20%;
  8. }
  9. .list{
  10.     position: absolute;
  11.     top:20%;
  12.     width:20%;
  13. }
  14. .list ul{
  15.     font-size: 34px;
  16. }
  17. .list li{
  18.     font-size: 32px;
  19. }
  20. .content{
  21.     position: absolute;
  22.     left:30%;
  23.     width:40%;
  24. }

试题四（每空 2 分，共 20 分）

阅读下列说明、效果图和代码，进行动态网页开发，请在红色横线处补全代码或填写正确选项字母。
【说明】
该程序为一个问卷调查系统，使用 PHP 的 Laravel 框架编程，项目名称为 survey，核心文件包括路由文件 web.php、模板文件（问卷调查模板 paper.blade.php 和调查结果模板 result.blade.php）、控制器文件 SurveyController.php。页面需要的数据采用硬编码方式，存放在问卷调查控制类的静态属性中。

【效果图】

（1）问卷调查页面：对应模板文件 paper.blade.php

用户访问问卷调查页面，勾选问题答案，点击 “提交” 按钮，如图

（2）调查结果页面：对应模板文件 result.blade.php

接收问卷调查页面提交数据，并进行显示，结果页面效果如图

【问题 1】基于 Laravel 框架，在下列三个红线处补全代码。

1、包管理工具

安装 Laravel 框架，需要使用 Composer 工具：通过命令 “ composer*
create-project laravel/laravel survey --prefer-dist” 创建 survey 工程，创建完毕后，程序目录如图

2、Laravel 框架 MVC 结构

Laravel 遵循 model-view-controller (MVC) 模式，MVC 模式的 3 个组件分别为模型（Model）、视图（View）和控制器（Controller）。

项目核心文件如下表所示，请分析项目相关核心 MVC 文件，使用 MVC 关键词 “Model、View 或 Controller”，在表 1 中两个红线处补全代码。
表 1

文件 说明 MVC 关键词
routes/web.php 应用路由文件
app/Http/Controllers/SurveyController.php 问卷调查控制类 Controller
resources/views/paper.blade.php 问卷调查模板 View
resources/views/result.blade.php 调查结果模板

【问题 2】分析项目路由，在下列两个红线处填写正确选项。

在浏览器中输入网址，访问问卷调查页面，用户填写问卷后，点击“提交”按钮，通过POST方式提交问卷表单，在路由文件web.php中，路由配置如下：

  1. <?php
  2. // 访问问卷调查页面
  3. Route::get("/survey", "SurveyController@paper");
  4. // 提交问卷
  5. Route::post("/finish", "SurveyController@finish");

项目发布在本机上，本机地址为localhost，根据web.php文件中定义的路由信息，当输入下列访问地址时，分析路由情况，根据A至F内容选择相应字母，填到红线处。

在浏览器中输入“http://localhost/survey”时，路由会 *** E ***。

在浏览器中输入“http://localhost/finish”时，路由会 *** B ***。

A. 显示 paper.blade.php 模板。
B. 抛出异常，未定义该方法。
C. 将字符串 “SurveyController@finish” 返回并显示到页面。
D. 将字符串 “SurveyController@paper” 返回并显示到页面。
E. 调用 SurveryController 类的 paper () 方法。
F. 调用 SurveryController 类的 finish () 方法。

【问题 3】分析项目控制器，在下列两个红线处补全代码。

在SurveyController.php文件中，定义SurveyController类，该类继承基类控制器。在SurveyController类中定义静态属性$questions，以硬编码形式保存问卷调查数据，并定义paper()方法，处理访问问卷调查页面请求，使用paper.blade.php模板文件返回问卷调查页面，将$questions传给模板文件。分析控制类SurveyController，并补全代码。

  1. <?php
  2. namespace App\Http\Controllers;
  3. use Illuminate\Http\Request;
  6. class SurveyController extends ***Controller***{
  7.     // 问卷内容，静态
  8.     private static $questions = array(
  9.         "Q1" => array(
  10.             "issue" => "选择你比较熟悉的技术：",
  11.             "type" => "checkbox",
  12.             "options" => array(
  13.                     "PHP",
  14.                     "Laravel",
  15.                     "Restful API",
  16.                     "Bootstrap"
  17.             )
  18.         ),
  19.         "Q2" => array(
  20.             "issue" => "您会制作简单的网页吗？",
  21.             "type" => "radio",
  22.             "options" => array(
  23.                     "会",
  24.                     "不会"
  25.             )
  26.         )
  27.     );
  30.     // 初始问卷调查数据，并跳转到paper页面
  31.     public function paper() {
  32.         return view(" ***paper***", ["questions" => self::$questions]);
  33.     }
  36.     // 处理用户提交的调查问卷
  37.     public function finish(Request $request) {
  38.         $input = $request->all();
  39.         $result = array();
  40.         foreach(self::$questions as $key => $question) {
  41.             if(isset($input[$key])) {
  42.                 array_push($result, array(
  43.                     "issue" => $question["issue"],
  44.                     "answer" => join(",", $input[$key])
  45.                 ));
  46.             }
  47.         }
  48.         return view("result", ["result" => $result]);
  49.     }
  50. }

【问题 4】分析模板文件，在下列第一个红线处补全代码，第二个红线处填写正确选项。
1、问卷调查模板 paper.blade.php

（1）在问卷调查模板文件paper.blade.php中，使用for循环显示问题，显示需要数据由SurveyController类中paper()返回时传递，用户填写完问卷数据后，使用POST方式提交。分析问卷调查模板和web.php中的路由信息，在红线处填写代码。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. </head>
  7. <body>
  8.     <table>
  9.         <form action="***/finish***" method="post">
  10.             【问题】
  11.             @foreach($questions as $key=>$question)
  12.             <tr>
  13.                 <td>
  14.                     <label>{{ ($loop->index+1). "、".$question["issue"] }}</label><br />
  15.                     @foreach($question["options"] as $option)
  16.                     <input type="{{$question['type'@}}"
  17.                     name="{{ $key.'[]'}}" value="{{ $option }}">{{ $option }}</input>
  18.                     <br />
  19.                     @endforeach
  20.                 </td>
  21.             </tr>
  22.             @endforeach
  23.             <tr>
  24.                 <td><input type="submit" value="提交" /></td>
  25.             </tr>
  26.         </form>
  27.     </table>
  28. </body>
  29. </html>

（2）在上述代码中，当使用POST方式提交表单时，Laravel框架需要添加CSRF Token字段。对于代码中【问题】处的下列选项描述，不正确的是 C

A. <input type="hidden" name="_token" value="{{csrf_token()}}">
B. {{ csrf_field() }}
C. {{ csrf@ }}
D. {!! csrf_field() !!}

2、调查结果模板 result.blade.ph

在调查结果模板文件result.blade.php中，使用for循环显示用户填写的问题和答案，显示需要数据由SurveyController类中finish()返回时传递，分析finish()方法和调查结果模板文件，在红线处补全代码。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. </head>
  7. <body>
  8.     <p>
  9.         @foreach($result as $q)
  10.         <label>{{ ($loop->index+1). "、".$q["issue"] }}</label><br />
  11.         <label>***{{$q['answer'] }}***</label><br />
  12.         @endforeach
  13.     </p>
  14. </body>
  15. </html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/818661
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号