网页设计模拟题

最新推荐文章于 2024-04-16 23:19:04 发布
最新推荐文章于 2024-04-16 23:19:04 发布
阅读量1k 收藏 19
点赞数 6
分类专栏： 笔记 文章标签： html css js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46419890/article/details/111016708
版权

临近期末考试，我们网页设计老师发给了我们一套考试题，做做做！

一、先让我们快来看看考试页面。
在这里插入图片描述
二、第一题：表格设计与实现
先让我们来看看第一题，这一题主要就是要求我们会用colspan和****这两个属性。
在这里插入图片描述
下面是完整的这个网页代码（已把答案完成）

<!DOCTYPE	html PUBLIC	"-//W3C//DTD XHTML 1.0 transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html	xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"	/>
 <title>  上机考试操</title>
 
 <style type="text/css">
th,td{
	font-size: 20px;
}

 </style>
</head>
<body> 
	<div>
		<iframe id="header" src="header.html" scrolling="no"  width="100%" height="700px"></iframe>
	</div>
		<div id="content">
	<center>	
		<p style="font-size:24px;">按照下面图示的表格，请在本图片下编写HTML代码实现这个课程表。</p>
			<p><a href="index.htm" style="background-color:#FF3399; font-size:24px">返回考试首页</a></p>
	<p style="font-size:40px;">课程表</p>
	<img src="images/table.jpg"  />
	</center>
<br>

<table border = "3px" bordercolor = "0x4C96FF" align = "center">
//下面是你需要填的代码：
<tr>
<th style="text-align: center;">星期</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
<th>星期六</th>
<th>星期日</th>
</tr>
<tr>
<td rowspan="4" style="text-align: center;">上午<br/>8:00-12:00</td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
<td>星期六</td>
<td rowspan="8">休息</td>
</tr>
<tr>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
<td>星期六</td>
</tr>
<tr>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
<td>星期六</td>
</tr>
<tr>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
<td>星期六</td>
</tr>
<tr>
<td rowspan="2" style="text-align: center;">下午<br/>14:00-18:00</td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
<td>星期六</td>
</tr>
<tr>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
<td>星期六</td>
</tr>
<tr>
<td rowspan="2" style="text-align: center;">晚上<br/>19:00-21:00</td>
<td>自由</td>
<td>自由</td>
<td>自由</td>
<td>自由</td>
<td>自由</td>
<td>自由</td>
</tr>
<tr>
<td>自由</td>
<td>自由</td>
<td>自由</td>
<td>自由</td>
<td>自由</td>
<td>自由</td>
</tr>
//到这里为止！
</table>

 </div> <!--content end-->				
         
	<div style="margin:10px;">	
	<center>
     		<iframe runat="server" src="footer.html" width="980" height="150" frameborder="0" scrolling="no"></iframe>
	</center>
	</div>	
</body>
</html>

总结：只要你善于运用colspan和rowspan,以及**text-align: center;**其实就并不难。
三、表单设计与实现
这个题主要就是要求你要学会灵活运用form这个标签，以及里面的type="checkbox"属性和type=“radio”
在这里插入图片描述
然后我们看看代码：

<!DOCTYPE	html PUBLIC	"-//W3C//DTD XHTML 1.0 transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html	xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"	/>
 <title>  上机考试操</title>

</head>
<body> 
	<div>
		<iframe id="header" src="header.html" scrolling="no"  width="100%" height="700px"></iframe>
	</div>
		<div id="content">
	<center>	
		<p style="font-size:24px;">按照下面图示的表单各项，请在本图片下编写HTML代码实现这个表单效果。</p>
			<p><a href="index.htm" style="background-color:#FF3399; font-size:24px">返回考试首页</a></p>
	<p style="font-size:40px;">我的表单</p>
	<img src="images/form.jpg"  />
<br>
<hr/>

 <form action="no" method="get">
 <div style="text-align: center; font-size: 36px">我的表单</div>
 //下面需要你自己填
 <form>
 账号:<input type="text" name="username"> </br>
 密码:<input type="password" name="userpassword">
 </form>
 <form>
 <div>爱好:<input type="checkbox" name="vehicle" value="Bike">体育
<input type="checkbox" name="vehicle" value="car">唱歌
<input type="checkbox" name="vehicle" value="1">阅读
<input type="checkbox" name="vehicle" value="c2">旅游</div>
 </form>
 <form>
 <div>性别：
<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="male">女
</div>
 </form>
 <form>
<div>自我介绍:
<textarea rows="10" cols="60">
这里是自我介绍。
</textarea>
</div>
 </form>
 <form><div>地址：
<select>
<option value="biejing">北京</option>
<option value="1">上海</option>
<option value="2">广州</option>
<option value="3">深圳</option>
<option value="4">河北</option>
<option value="5">天津</option>
<option value="6">重庆</option>
<option value="7">河南</option>
</select>
</div>
 </form>
 <form>
<input type="button" name="tijiao" value="提交">
<input type="button" name="chongzhi" value="重置">
<input type="button" name="anniu" value="按钮">
 </form>
 //到这里为止
	<div style="margin:10px;">	
	<center>
     		<iframe runat="server" src="footer.html" width="980" height="150" frameborder="0" scrolling="no"></iframe>
	</center>
	</div>		
</body>
</html>

总结：

  1. 多选标签type=“checkbox”
  2. 单选标签type=“radio”
  3. 按钮标签type=“button”
  4. 账号标签type=“text”
  5. 密码标签type=“password”
  6. 输入框标签textarea rows="##" cols="##"

四、JavaScript算法设计
这一题就是类似于java，思想都是一样的，这方面的知识点特别多。
在这里插入图片描述
这个就要求实现题目要求的功能，如下效果
在这里插入图片描述
下面我们来看看这道题的代码：

<!DOCTYPE	html PUBLIC	"-//W3C//DTD XHTML 1.0 transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html	xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"	/>
	<title>  上机考试操JS部分</title>
	<style type="text/css">
		p{
			font-size:24px;
		}
		.xianshi{
			font-size:36px;
			background:#99CC33;
			width:200px;
		}

	</style>
	<script type="text/javascript">
 //此处编写JS代码实现题目要求
 function qiu(){
 	 var w=document.getElementById("kuan").value;
 	 var l=document.getElementById("chang").value;
 	var h=document.getElementById("gao").value;
 	var w1=parseInt(w);
 	 var l1=parseInt(l);
 	var h1=parseInt(h);
 	s=2*(l1*w1+l1*h1+w1*h1);
 	v=w1*l1*h1;
 	document.getElementById("biaomianji").innerHTML=s;
 	document.getElementById("tiji").innerHTML=v;
 	}//到这里为止
 </script>
</head>
<body> 
	<div>
		<iframe id="header" src="header.html" scrolling="no"  width="100%" height="700px"></iframe>
	</div>
	<div id="content">
		<center>	
			<p style="font-size:24px;">按照下面表单各项，请实现当输入长方体的长，宽，高时，在相应的元素中显示出长方体的<b>表面积和体积</b></p>
			<p><a href="index.htm" style="background-color:#FF3399; font-size:24px">返回考试首页</a></p>
			<p style="font-size:40px;">我的JavaScript代码设计</p>

			<br>
			<hr/>

			<p>长：<input id = "chang" type="text" name="chang" value="" size="10"/>
				<br><br>
				宽：<input type="text" id = "kuan" name="宽" value="" size="10"/>
				<br><br>
				高：<input type="text" name="高"  id = "gao" value="" size="10"/>
				<br />
				<br/>
				<input type="button" name="jisuan"  value="计算体积和表面积" onclick="qiu()"/>
				<br><br>
			</p>
			<p id="biaomianji"  class="xianshi" style="font-size:18px;" >此处显示表面积</p>
			<p id="tiji"  class="xianshi"  style="font-size:18px;">此处显示体积</p>


			<div style="margin:10px;">	
				<center>
					<iframe runat="server" src="footer.html" width="980" height="150" frameborder="0" scrolling="no"></iframe>
				</center>
			</div>		
		</body>
		</html>

总结：要求灵活运用函数，以及变量的创建还有使用。
五、JQuery设计与实现
这一题就是老师会给你一个jquery-3.4.1.min.js文件，要求你自己会链接以及灵活使用这个文件里的函数，使你能够实现你所想的样式。
在这里插入图片描述
代码如下：

<!DOCTYPE	html PUBLIC	"-//W3C//DTD XHTML 1.0 transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html	xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"	/>
 <title>  上机考试操JQuery部分</title>
 <style type="text/css">
p{
font-size:24px;
}
.xianshi{
font-size:36px;
background:#99CC33;
width:200px;
}

 </style>

</head>
<body> 
	<div>
		<iframe id="header" src="header.html" scrolling="no"  width="100%" height="700px"></iframe>
	</div>
		<div id="content">
	<center>	
		<p style="font-size:24px;">请设计代码实现：点击按钮时以下三个色块淡入淡出<b>要求函数应用JQuery（注：相应的文件在js文件夹中）</b></p>
			<p><a href="index.htm" style="background-color:#FF3399; font-size:24px">返回考试首页</a></p>
	<p style="font-size:40px;">我的JQuery效果展示</p>

<br>
<hr/>
<script src="js/jquery-3.4.1.min.js">

</script>
//下面填答案
<script >
$(document).ready(function(){
	$("button").click(function(){
		$("#div1").fadeToggle();
		$("#div2").fadeToggle("slow");
		$("#div3").fadeToggle(1000);
	});
});
</script>
//到这里为止
</head>

<body>

<button>点击按钮观察淡入淡出下面的色块。</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

		 
		
	<div style="margin:10px;">	
	<center>
     		<iframe runat="server" src="footer.html" width="980" height="150" frameborder="0" scrolling="no"></iframe>
	</center>
	</div>		
</body>
</html>

总结：学会灵活运用fadeToggle，以及其他的js函数库里的函数。
六、样式表单考察
这个题就没啥好考的，就考了一点，css样式表，要求你会在css文件里写样式表，并将css文件与html文件链接起来。
题目如下：
在这里插入图片描述
他改的就是这个主页的样式，代码如下：

<!DOCTYPE	html PUBLIC	"-//W3C//DTD XHTML 1.0 transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html	xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"	/>
 <title>  上机考试操</title>
 <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body> 
	<div>
		<iframe id="header" src="header.html" scrolling="no"  width="100%" height="600px"></iframe>
		
		</div>
		<div id="content">
    			<ul>
					<h1>表格设计与实现</h1>
					<li><a href="table.html" style="font-size:18px; background:#00FFFF;">点击链接，按照页面显示的表格样式，在其下方设计并实现表格（10分）</a></li>
					<h1>表单设计与实现</h1>
					<li><a href="form.html" style="font-size:18px; background:#00FFFF;">点击链接，按照页面显示的表单样式在其下方设计并实现表单（10分）</a></li>
					<h1>JavaScript算法设计</h1>
					<li><a href="js.html" style="font-size:18px; background:#00FFFF;">点击链接，按照页面要求实现算法设计（10分）</a></li>
					<h1>JQuery设计与实现</h1>
					<li><a href="jquery.html" style="font-size:18px; background:#00FFFF;">点击页面链接按照页面要求实现操作效果（5分）</a></li>
					<h1>样式表单考察</h1>
					<li><a href="css/index.css" style="font-size:18px; background:#00FFFF;">将当前页面<b>li标签的行内样式</b>放入命名为“index.css”的文件，并实现外部文件引用不改变本页显示效果(5分)</a></li>
					
								
				</ul>
				
			
   		 </div> <!--cat end-->				
         
	</div>	<!--main end-->
	<center>
     		<iframe id="footer" runat="server" src="footer.html" width="980" height="150" frameborder="0" scrolling="no"></iframe>
	</center>
	</div><!--container	end-->		
</body>
</html>

css代码在这里：

li{
	font-size:18px; background:#00FFFF;
}

你看的没错，这道题只需要把这个样式写在css里，这就是送分题！

猪萌萌
关注
  • 6
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
东北大学_研究生_期末考试之分布式系统及应用
12-21
主要包括2019年、2020年期末考试试题，以及书后习题答案。
网页设计综合题（含解析）
时刻总结
06-10 2121
复习题
期末考试
LiMaoLin1999的博客
12-23 312
表格： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <...
大学生网页设计作业——公益校园网站设计与实现(HTML+CSS+JavaScript)
qq_524614081的博客
01-12 699
👨‍🎓学生HTML静态网页基础水平制作👩‍🎓，页面排版干净简洁。使用HTML+CSS页面布局设计,web大学生网页设计作业源码，这是一个不错的旅游网页制作，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用, 这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例】 一、👨‍🎓
制作一个简单HTML中华传统文化网页（HTML+CSS）
热门推荐
HTML网页设计
08-02 1万+
📔网站布局方面计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面网站系统文件种类包含html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；...
Dreamweaver网页设计模拟试题及参考答案.pdf
04-08
《Dreamweaver网页设计模拟试题及参考答案》的文档涵盖了Dreamweaver网页设计的基本操作和概念，主要涉及以下几个方面： 1. **站点管理**：在Dreamweaver中，站点管理是通过标志4指向的浮动面板组进行的，这包括...
Dreamweaver网页设计模拟试题.pdf
10-08
【Dreamweaver网页设计模拟试题】是一份针对Adobe Dreamweaver网页设计软件的测试资料，主要涵盖HTML基础知识、Dreamweaver使用技巧以及网页元素的编辑和管理等方面的知识点。 1. 站点设置：在Dreamweaver中，站点...
Dreamweaver网页设计模拟试题.doc
12-23
这份模拟试题涵盖了Dreamweaver的基础知识和网页设计的基本概念，主要包括以下几个方面： 1. **新建文档页面**：在Dreamweaver中，创建一个完全空白的静态HTML页面应该选择基本页类别中的“HTML”选项，而不是HTML...
Dreamweaver网页设计模拟试题(1).doc
12-23
【Dreamweaver网页设计模拟试题】是一份针对网页设计与制作——Dreamweaver8课程的考试练习，旨在检验学生对软件的掌握程度。试题涵盖了选择题、填空题、简答题和问答题，内容涉及Dreamweaver的基础操作、网页元素、...
Dreamweaver网页设计模拟试题一五.pdf
10-08
【Dreamweaver网页设计模拟试题解析】 1. 在Dreamweaver中，如果属性面板未显示，可以通过执行“窗口”菜单中的“属性”命令将其打开。这表明Dreamweaver的界面包含多个可自定义的面板，其中属性面板是用于查看和...
网页设计试题
08-12
html，css,javascript技术试卷，主要设计的网页前端开发技术
网页制作实操考试题目及素材
12-26
考查的是DREAMWEAVER的基础操作知识，考试题目已经包括考试要求及考试素材。
web前端期末大作业——HTML+CSS简单的旅游网页设计与实现
最新发布
HTML网页设计
04-16 1992
👨‍🎓静态网站的编写主要是用 HTML DⅣV+ CSSJS等来完成页面的排版设计👩‍🎓，一般的网页作业需要融入以下知识点：div布局、浮动定位、高级css、表格、表单及验证、js轮播图、音频视频Fash的应用、uli、下拉导航栏、鼠标划过效果等知识点，学生网页作业源码，制作水平和原创度都适合学习或交作业用，记得点赞。 🏀 精彩专栏推荐👇🏻👇🏻👇🏻 💝 【作者主页——🔥获取更多优质源码】 💝 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】 文章目录🌰一、网站题目👨‍🎓二、网站
HTML和CSS面试题—整理过的48题，关注收藏，持续更新
王春燕的博客
04-15 6042
主流浏览器的内核分别是什么？ IE：trident内核[‘traidnt ] Firefox：gecko 内核[ˈɡekəʊ] Safari：webkit 内核 Chrome,Opera：Blink内核(基于webkit) 2:每个HTML文件开头都有<!DOCTYPE html>，它的作用是什么 <!DOCTYPE html>声明位于文档中的最前面的位置，此标签告知浏览器文档使用哪种HTML或XHTMl规范（重点：告诉浏览器按照何种规范解析页面） ......
HTML网页设计综合题,网页设计（Html5）试题C卷
weixin_39719585的博客
06-07 2029
网页设计期末试题试卷(B卷) 年 月考试级 专业一、单项选择题(本大题共 25小题，每小题1分，共25分)1.HTML 语言中，设置链接颜色的代码是(　　　)A. B.C. D.2. 下列标记中，属于单边标记的是(　　　)A. B.C. D.3.HX 标记可以有对齐属性， 不属于 该标记对齐属性的是(　　　)A.LEFT B.CENTERC.RIGHT D...
HTML-表格
weixin_43731527的博客
02-28 477
一、表格的基本构成 1.“table”标签用来创建表格。 <table border="N"> 。。。 。。。 </table> 注：border属性表示给表格添加边框，它的值2表示边框的宽度为2px。 2.“tr”标签用来创建行。 <table border="xx"> <tr> 。。。 </tr> &...
HTML网页设计期末考试题库,网页设计题库含参考 答案.doc
weixin_35651191的博客
06-05 5124
网页设计题库(含参考答案)第1题 判断正误HTML标记符的属性一般不区分大小写HTML标记符通常不区分大小写，但标记符属性区分大小写。(错)网站就是一个链接的页面集合。将网页上传到Internet时通常采用FTP方式。所有的HTML标记符都包括开始标记符和结束标记符。(错)可以用文本编辑器编辑HTML文件。文本编辑器和HTML编辑器软件都可以用来编辑HTML文件。TITLE 标记符通常位于BODY...
网页设计面试题
缘 源 园
04-21 1851
常见面试题及解答 1、能编辑HTML的文件是记事本，写字板，word，DW. 2、Html是指超文本标记语言 它主要告诉浏览器该如何显示其中的内容（如，文字如何处理，画面如何安排，画面如何显示等等） 3."欢迎访问我的主页!"要求字体为隶书,字体大小为6 < P > < FONT SIZE = 6 FACE =“隶书”> 欢迎访问我的土页！< /FONT > </P> 4.（<PRE>）标记用于以预定义的格式显示文本，即文本在浏览器中显.
2020-10-26
dskcder的博客
10-26 4828
1.编写HTML代码，实现如图11-12所示页面效果。要求使用CsS样式表统一定义table和td标记样式，分别如下: ●table 标记样式:边框为8px、 线型为双线、颜色为0000ff。 ●td标记样式:边框为1px、 线型为solid、 颜色为black、 水平居中对齐。 , 两个嵌套表格背景颜色分别为fffee和#fefefe。 外表宽度为300px、居中对齐、单元间距和单元格边距均为0。 两个子表宽度为80%、居中对齐、边框为1px。 ...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

猪萌萌

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值