nbsczy

每天都要做的更好

已于 2023-06-19 13:49:43 修改

阅读量812

点赞数 1

文章标签：算法

于 2023-06-19 13:48:12 首次发布

本文链接：https://blog.csdn.net/m0_63715487/article/details/131286149

版权

文章提供了三个编程题目，分别涉及静态网页开发、网页动态页面样式开发和移动端静态网站案例分析。第一题是关于搜索引擎网站的开发，包括搜索主页、标签页和图片资源。第二题是Web技术社区网站的首页样式设计，要求包括页面布局、颜色、字体和动画效果。第三题是移动端智慧物业网站的首页和报事报修页面设计，涉及到HTML和CSS的使用，以及表单交互和页面响应式设计。

摘要由CSDN通过智能技术生成

试题一（20分）

阅读下列说明、效果图和HTML代码，进行静态网页开发，填写（1）至（10）代码。

【说明】

在当今互联网技术高速发展的时代，搜索引擎是用户使用率最高的网络服务工具之一。本项目为“搜索引擎”网站。

项目名称为Search，包括搜索主页面index.html、第一个标签页tab1.html、第二个标签页tab2.html和img文件夹，其中，img文件夹包括图片logo.png。

页面布局和内容为：

（1）index.html为搜索主页，分为三部分，自上而下依次是：搜索框、分类标签和搜索结果。其中，搜索结果使用iframe标签定义，显示tab1.html或tab2.html。

（2）tab1.html为搜索结果页，是“标签页1-网页”的搜索结果，第一部分是搜索结果列表，第二部分是分页页码。其中，使用2个table进行布局。

（3）tab2.html为搜索结果页，是“标签页2-资讯”的搜索结果，第一部分是搜索结果列表，第二部分是分页页码。其中，使用1个table进行布局。

选择不同的类别标签，会显示该类别下的搜索结果。

【效果图】

（1）打开index.html效果如图1所示。

图1-1

（2）点击“标签页2-资讯”，搜索结果显示为tab2.html，效果如图2所示。

图1-2

【代码：搜索主页index.html】

<! DOCTYPE html>

<html>

<head>

<style>

.search_val {width: 400px;margin-bottom: 20px;}/*设置搜索框为400px，底部外边距为20px*/

a{margin-right: 20px}/*设置a链接的右边距为20px*/

</style>

</head>

<body>

</form>

</table>

<hr/>

frameborder="0" ></iframe>

</body>

</html>

【代码：第一个标签页tab1.html】

<!DOCTYPE html>

<html>

<head>

<style>

body {font-size: 13px;}/*设置页面字体大小为13px*/

p {width: 380px;}/*设置p元素的宽度为380px*/

p,h3 {margin: 0;padding: 0;}/*设置内边距和外边距均为0 */

.noPic{width: 460px;}/*设置类名为noPic的元素的宽度为460px*/

img{ padding: 10px;}/*设置图片的内边距为10px*/

</style>

</head>

<body>

<table>

</td></tr>

<td><p>超文本标记语言，标准通用标记语言下的一个应用。“超文本”就是指页面内可以包含图片、链接等...</p>

</td></tr>

</table>

</td></tr>

<h3>HTML Standard</h3>

<p class="noPic">1.2 Is this HTML5?This section is non-normative.In short: Yes.In more length: the term "HTML5" is widely used as a buzzword to refer ...</p>

<a href="#">http://HTMLStudy.com</a>

</td></tr>

</table>

</body>

</html>

【代码：第二个标签页tab2.html】

<!DOCTYPE html>

<html>

<head>

<style>

body {font-size: 13px;}/*设置页面字体大小为13px*/

td {padding: 10px;}/*设置td单元格的内边距为10px*/

p {width: 450px;}/*设置p元素的宽度为450px*/

p,h3 { maragin:0;padding:0; }/*设置内边距和外边距均为0 */

</style>

</head>

<body>

<tr><td><h3>实现实时Html编辑器</h3>

<p>给大家介绍一种很简单的无限制在线Html编辑器,实现所写即所得UI和样式实时刷新,JS代码也能进行热加载执行重新渲染,而且这些实现都非常简单...</p>

<tr><td><h3>html中q标签(短的引用)的详细介绍</h3>

<p>本篇将介绍html中q标签(短的引用)的详细用法,有兴趣的朋友可以了解一下! 学习html其实就是学习标签的用法,今天小编要介绍的是... </p>

<a href="#">http://HTMLStudy.com</a></td></tr>

</table>

</body>

</html>

【问题】（20分，每空2分）

进行静态网页开发，补全代码，在（1）至（10）处填入正确的内容。

试题二（30分）

阅读下列说明、效果图、HTML代码和CSS代码，开发网页动态页面样式，填写（1）至（15）代码。

【说明】

这是“Web技术社区”网站，该网站致力于推广和分享各种前端技术，如HTML、CSS、JavaScript和jQuery，现在我们需要编写该网站首页样式。

项目名称为web_skill，包含首页index.html、css文件夹和img文件夹，其中，css文件夹包含index.css文件，img文件夹包含html.png、css.png、js.png和jquery.png图片。

首页（index.html）内容分为两部分，一是【网站介绍】，位于页面上端，内容为【欢迎语】和【网站内容介绍】，以文字的形式展示；二是【技术介绍】，位于页面下端，展示四项【技术】，每项都包括【技术logo】和【技术特点】，以图片和列表的形式展示。

对页面样式进行设计，要求为：

（1）页面全局样式：设置页面全局属性，页面外边距和内边距为“0”，字体为“宋体”，字体大小为“35px”。为页面设置透明度动画，在页面加载时执行，透明度从“0”到“1”，动画持续时间为“1s”，动画次数为“1”次。

（2）【网站介绍】样式：为页面上端【网站介绍】部分添加背景颜色“#000000”，并设置宽度为“100%”、高度为“400px”、字体颜色为“#FFFFFF”。另外，为【欢迎语】和【网站内容介绍】内容设置“绝对布局”、距顶部边缘“16%”、距左边缘“16%”、宽度为“68%”、文本内容“居中”。

（3）【技术介绍】样式：为页面下端【技术介绍】设置“弹性布局”、文本内容“居中”。另外，为【技术】设置宽度为“17%”、外边距为“4%”；为【技术logo】设置高度为“200px”、宽度为“200px”、边框颜色为“#000000”、边框为“1px、实线”、边框设置“20px圆角”；为【技术特点】中列表设置文本内容“居左”。

【效果图】

图2-1

【代码：首页index.html】

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Web技术社区</title>

</head>

<body>

<h2>欢迎来到XX网</h2><br />

<p>本站包括了HTML、CSS、Javascript、jQuery等各种基础编程教程。</p>

<p>本站致力于推广各种前端技术，所有资源...</p>

</div>

</div><br /><br />

<ul>

<li>HTML 指的是超文本标记语言</li>

/* ...省略其它li，参见【效果图】内容 */

</ul>

</div>

<ul>

<li>CSS 指层叠样式表</li>

/* ...省略其它li，参见【效果图】内容 */

</ul>

</div>

<ul>

<li>JavaScript 是一种轻量级的编程语言</li>

/* ...省略其它li，参见【效果图】内容 */

</ul>

</div>

<ul>

<li>jQuery是一个JavaScript函数库</li>

/* ...省略其它li，参见【效果图】内容 */

</ul>

</div>

</body>

</html>

【代码：CSS文件index.css】

* {

margin: 0;

Padding:0 ;/* 内边距 */

Font-fomaily ;/* 字体 */

font-size: 35px;

}

body {

animation-name: fadeIn;

Animation-duratin:1s ;

animation-iteration-count: 1;

}

@Keyframes fadeIn {

from {opacity: 0;}

to {opacity: 1;}

}

#introduction {

Background-color:#000000 ;/* 背景颜色 */

width:100%;

height:400px;

Color:#FFFFFF ;/* 字体颜色 */

}

#content {

Position:absolute ;/* 绝对布局 */

Top:16% ;/* 顶部边距 */

left: 16%;

width: 68%;

text-align: center;

}

#main {

Display:flex ;

text-align: center;

}

#main img {

Border:1px solid #000000 ;

border-radius: 20px;

height: 200px;

width: 200px;

}

.card {

width: 17%;

margin: 4%;

}

.card {/* 列表样式，以class加子元素选择器的方式填写 */

Tetx-algin:left ;

}

【问题】（30分，每空2分）

开发网页动态页面样式，补全代码，在（1）至（15）处填入正确的内容。

试题三（30分）

阅读下列说明、效果图和HTML代码，进行网页编程，回答问题1至问题5。

【说明】

随着个性化服务发展，学校、街边、社区等都流行将水果等商品洗净、切好，并装盒，按份出售。现开发一个“社区便利店收银系统”，店中每天提供固定种类的水果，装盒后，标记每一份价格，按份进行销售。在系统中，打开收银网页（casher.html），点击“+”添加销售水果，点击“结账”进行购买水果结算，点击“完成交易”进行下一个新用户购买。

项目名称为casher，包含收银网页casher.html和js文件夹，其中，js文件夹包含jquery-3.3.1.min.js文件。

收银网页分为三个区域：上端内容为“标题”和一个不可编辑的“文本框”，“文本框”用来显示结账金额；中间内容为水果商品表格，在表格每一行中，点击一次“+”按钮，则添加一份，点击多次，则添加多份；下端内容为“结帐”和“完成交易”按钮。

【效果图】

（1）收银网页casher.html效果如图3-1所示。

图3-1 初始化状态

（2）在表格每一行中，点击水果名称后的“+”按钮，则将该水果的价格显示到上方的“文本框”中。若购买多份水果时，每份水果的价格之间使用“+”连接，如图3-2所示。

图3-2 添加水果

（3）点击“结帐”按钮，将“文本框”中价格进行计算，设置“文本框”显示内容为“总金额:xxx”；将“结帐”按钮设置为“禁用”；使用jQuery动画，将中间的表格透明度设为“0.3”，动画持续时间为“1s”。如图3-3所示。

图3-3 结帐

（4）点击“交易完成”按钮，重新加载网页，恢复到网页的初始状态。

【代码：收银网页casher.html】

<!DOCTYPE html>

<html>

<head>

<title>社区便利店收银系统</title>

<style>

body{

text-align:center;

font-size:13px;

}

table{

margin:10px auto;

}

#result{

width:245px;

height:40px;

}

</style>

</head>

<body>

<h2>社区便利店收银系统</h2>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

功能：使用Javascript编写代码，点击“+”按钮触发，修改“文本框”值为购买的水果价格，多次点击，以“+”连接各价格

参数：price 为添加水果的价格

返回：无

编写代码提示：

（1）获得“文本框result”值

（2）判断“文本框result”值是否为””：

（3）若为””，则将当前price赋值给“文本框”

（4）若不为""，则先在“文本框”已有值后添加一个“+”，再添加此次价格price

function addClick(price) {

// 编写代码

var result = document.getElementById(‘result’).value;

if(result = =””){

document.getElementById(result’).value = price;

}

else{

document.getElementById(‘result’).value = result+ “+”+price;

}

功能：使用Javascript编写代码，点击“结账”按钮触发，计算所购水果的总金额，并将结果显示在“文本框”result上。

参数：无

返回：无

编写代码提示：

（1）获得“文本框result”值

（2）使用“+”分隔出“文本框result”值中每一个价格，存放到Array对象中

（3）使用for循环遍历数组对象，将每个价格相加得到总金额

（4）设置“文本框result”值为“总金额:xxx”

（5）调用disabledBtn()函数禁用“结帐”按钮

（6）调用transparency()函数设置水果商品表格的透明度

function checkoutClick() {

// 编写代码

var result = document.getElementById(‘result’).value;

if(result = =””){

return;

}

Var pices = result.split(“+”);

Var total = 0.0;

}

功能：使用jQuery库编写代码，将“结帐”按钮设为禁用

参数：无

返回：无

function disabledBtn() {

// 编写代码

$(“btn_checkout”).attr(“disabled”,”disabled”);

}

功能：使用jQuery库编写代码，将水果商品表格透明度设为0.3，动画持续时间为1s

参数：无

返回：无

编写代码提示：使用jQuery的动画函数实现。

function transparency() {

// 编写代码

$(“table”).animate(

{opactity:’0.3’},1000);

}

功能：点击“交易完成”按钮触发，重新加载当前页面，初始页面状态

参数：无

返回：无

function reloadClick() {

// 编写代码

window.location.reload();

}

</script>

</body>

</html>

【问题1】（7分）

使用JavaScript编写addClick()函数，并调试运行，满足功能要求。

【问题2】（10分）

使用JavaScript编写checkoutClick()函数，并调试运行，满足功能要求。

【问题3】（5分）

使用jQuery编写disabledBtn()函数，并调试运行，满足功能要求。

【问题4】（5分）

使用jQuery编写transparency()函数，并调试运行，满足功能要求。

【问题5】（3分）

编写reloadClick()函数，并调试运行，满足功能要求。

试题四（20分）

阅读下列说明、效果图和HTML代码，进行移动端静态网站案例分析，回答问题1至问题3。

【说明】

某公司开发了一款移动端“智慧物业”网站，为业主和物业搭建便捷平台。对业主方而言，可以查阅相关社区基本信息、物业服务、在线缴费和报事报修等；对物业方而言，可以加强与物业之间的交流，收集业主的意见和建议，在线进行沟通和处理相关物业事宜等。

现在我们需要设计和编写“智慧物业”网站中的“首页”和“报事报修”页面。

项目名称为IComMobile，包括首页index.html、报事报修repair.html、img文件夹和font文件夹，其中，img文件夹包含页面所需图片资源，font文件夹包含自定义字体。

（1）首页（index.html）：内容分为四个部分，一是【标题栏】，位于页面上端，内容为社区名称，以文字的形式展示；二是【轮播图】，位于【标题栏】下方，内容为主题图片，以图片展示；三是【功能列表】，位于【轮播图】下方，内容包括社区中心、报事报修、物管窗口、物业交费四个功能，以图片按钮的形式展示；四是【底部导航栏】，位于页面最下端，内容为导航按钮，每个导航按钮以图标和文字展示。

（2）报事报修页面（repair.html）：内容为一个表单，内容包含“地址”、“联系人”、“联系电话”、“预约时间”、“报修详情”五个表单项，每一项必填，以及“保存”按钮和“放弃”按钮，业主在首页上点击“报事报修”进入该页面，填写相关表单信息，点击“保存”按钮提交表单，点击“放弃”按钮则放弃提交当前表单内容。

【效果图】

首页效果如图4-1，事报修效果如图4-2，在首页点击“报事报修”进入图4-2页面。

【代码：首页index.html】

<!DOCTYPE html>

<html>

<head>

* {margin: 0;padding: 0;}

ul,li {list-style: none;}

@font-face {font-family: myFont;/*自定义字体名*/

src:url('font/STFANGSO.TTF')/*自定义字体路径*/}

header {font-family: myFont;/*使用自定义字体*/

font-size: 25px; text-align: center;}

section ul,footer ul {

display: flex;

flex-wrap: wrap ;/*弹性布局*/

}

section ul li {

border-radius : 5px;/*圆角边框*/

Background-color : #FFFFFF;/*背景颜色*/}

footer{ position: fixed;bottom: 0; width: 100%;

border-top: 1px #eee solid;}

footer ul li {flex: 1;text-align: center;padding-top: 5px;}

footer ul li a{display: block;font-size: 14px;color: black;}

/*第一个li字体加粗*/

footer ul li: first-child { font-weight: bold;}

a{text-decoration: none;}

section div{

text-align: center;

margin: 10px 0;

font-size: 14px;

}

section div span{ margin-right: 25px;}

#slider{ text-align: center;}

.list_group{ justify-content: center;}

</style>

</head>

<body>

<header>美好生活小区</header>

<div><span>物业公告：</span><span>感恩回馈预存有礼</span></div>

</ul>

</section>

<ul>

</ul>

</footer>

</body>

</html>

【代码：报事报修页面repair.html】

<!DOCTYPE html>

<html>

<head>

body{margin: 0;padding: 0;}

h3{margin: 0;padding: 5px;}

header{background: #767676;color: white;}

.add div{padding: 4%;}

.add label{width: 30%; display: inline-block;}

textarea{ width: 90%;}

div:after{content: "*";}

input[type="submit"],input[type="button"]{

width: 20%;

height: 30px;

margin: 4% 0 0 20%;

}

</style>

</head>

<body>

<div>报修详情：

<textarea id="infoDetailed" cols="50" rows="5"

placeholder="请输入..." required="required"></textarea>

</div>

</form>

</article>

/*duties构造方法*/

function duties() {

/*data对象存储表单数据*/

this.data= {address: "",callName: "",

callNum: "",time: "",infoDetailed: ""};

/*向data对象赋值*/

this.setFormInfo=function() {

this.data.address = document.getElementById("address").value;

this.data.callName = document.getElementById("callName").value;

this.data.callNum = document.getElementById("callNum").value;

this.data.time = document.getElementById("time").value;

this.data.infoDetailed =

document.getElementById("infoDetailed").value;

}

/*实例化duties对象*/

var form1 = new duties();

/*此处通过模拟调试向控制台输出表单输入信息*/

function printForm() {

form1.setFormInfo()

var infoStr = "地址:" + form1.data.address + "#" + "联系人:" +

form1.data.callName + "#" + "联系电话:" + form1.data.callNum + "#"

+ "预约时间:" + form1.data.time + "报修详情:"

+ form1.data.infoDetailed;

/*console.log()是一个向控制台输出结果的方法，参数可以为字符串*/

console.log(infoStr);

}

</script>

</body>

</html>

【问题1】（8分，每空1分）

阅读和分析上述移动端“智慧物业”网站，回答下列问题，填写（a）～（h）。

1、移动端页面视区

若要使页面适应移动端设备，需要设置meta标签的name值为 viewport ，该值是用户网页的可视区域，即“视区”。

其中content中参数 width 可以设置控制视区的宽度，可以指定的一个值，如 600，或者特殊的值。若要设置页面的初始缩放比例，需要设置content中参数 initial-scale 。

2、HTML5语义化元素

在HTML5中用于定义文档的页眉的标签是 header ；用于定义文档或节的页脚的标签是 footer ；用于定义文档中的节的标签是 section 。

3、CSS3特性应用

网站首页的标题使用了自定义字体myFont，定义自定义字体需要css的 @font-face 规则。

4、表单属性应用

在该网站的页面中，对表单“输入元素”中的内容进行非空验证，可在表单“输入元素”中加入 required 属性。

【问题2】（8分，每空2分）

阅读和分析首页index.html代码，正确选用下列代码1至代码8，补全填写index.html中（1）至（4）处代码。

代码1：first-line

代码2：wrap

代码3：background-color

代码4：border-radius

代码5：nowrap

代码6：first-child

代码7：border-right

代码8：backgroud-clip

【问题3】（4分）

阅读和分析报事报修页面repair.html中代码，回答下面的问题，填写输出内容。

（1）在报事报修页面repair.html的表单中输入各表单项的值：

“地址”值:13栋201室

“联系人”值:张三

“联系电话”值:12345678

“预约时间”值:2019-07-01

“报修详情”值:管道堵塞

（2）点击“保存”按钮调用printForm()方法后，在该方法中使用“console.log(infoStr)”，请填写该语句向控制台输出的内容是（）