【1+X Web前端开发初级】样题一（理论+实操）

最新推荐文章于 2022-11-09 20:28:42 发布

孑然R

最新推荐文章于 2022-11-09 20:28:42 发布

阅读量5.4k

点赞数 2

分类专栏： 1+X WEB前端开发文章标签：前端

原文链接：http://www.eduiit.cn/resources/download?type=web&page=2&page_size=30

版权

1+X WEB前端开发专栏收录该内容

3 篇文章 7 订阅

订阅专栏

下载连接：Web前端开发初级样题一理+实.zip

理论部分

一、单选题（每小题2分，共30小题，共60分）
1-5
C	B	C	C	A
6-10
D	B	A	A	B
11-15
C	B	C	A	A
16-20
A	B	D	A	C
21-25
C	D	C	B	A
26-30
D	C	C	A	C

二、多选题（每小题2分，共15小题，共30分）
1-5
AB	ACDE	BCD	AC	AC
6-10
AB	AD	BCD	ACD	ABCD
11-15
AC	ABCD	ABCD	ABC	BCD

三、判断题（每小题2分，共5小题，共10分）
1-5
×	×	√	×	×


1. 本试卷共3道大题，满分100分。
2. 请在指定位置作答。

一、单选题（每小题2分，共30小题，共60分）
1、在HTML中，(    )用来表示特殊字符引号		
A、&reg            B、&copy             C、&quot            D、&nbsp	

2、下面关于文件路径的说法错误的是（  ）。	
A、“../”是返回当前目录的上一级目录
B、“../”是返回当前目录的下一级目录
C、访问下一级目录直接输入相应的目录名即可
D、文件路径指文件存储的位置

3、下列选项中定义标题最合理的是(      )		 
A、<span class="header">文章标题</span>
B、<p><b>文章标题</b></p>
C、<h2>标题</h2>                     
D、<div>文章标题</div>

4、关于引入样式的优先级说法正确的是（      ）		
A、内联样式>!important>内部样式>外部样式>!important
B、!important>内联样式>内部样式>外部样式
C、以上都不正确

5、在HTML中，下面（     ）不属于HTML文档的基本组成部分。	
A、<STYLE></STYTLE>        B、<BODY></BODY>
C、<HTML></HTML>         D、<HEAD></HEAD>

6、在HTML中，下列有关邮箱的链接书写正确的是（         ）		
A、<A href="telnet:zhangming@aptech.com">发送邮件</A>
B、<A href="mail:zhangming@aptech.com">发送邮件</A>
C、<A href="ftp:zhangming@aptech.com">发送邮件</A>
D、<A href="mailto:zhangming@aptech.com">发送邮件</A>

7、在HTML5中，哪个属性用于规定输入字段是必填的？		
A、readonly    B、required   C、validate   D、placeholder

8、HTML5的正确doctype是(        )
A、<!DOCTYPE html>
B、<!DOCTYPE HTML5>
C、<!DOCTYPE HTML PUBLIC "-
D、//W3C//DTD HTML 5.0//EN" "http://www.w3.org/TR/html5/strict.dtd">

9、以下说法不正确的是（      ）		
A、HTML5 标准还在制定中        B、HTML5兼容以前HTML4下浏览器
C、<canvas>标签替代Flash        D、简化的语法

10、设定一个元素按规定的动画执行，你需要运用什么规则？
A、animation   B、keyframes   C、flash   D、transition

11、每段文字都需要首行缩进两个字的距离，该设置什么属性（      ）		
A、text-transform   B、text-align   C、text-indent   D、text-decoration

12、关于box-shadow说法正确的是（       ）		 
A、设置文字投影              B、第一个值是设置水平距离的
C、第二个值是设置水平距离的  D、第三个值是设置投影颜色的

13、设置盒子圆角的属性是（         ）		
A、box-sizing  B、box-shadow  C、border-radius   D、border

14、将div类名以'c'开头元素添加文字为红色，书写正确的是（        ）
A、div[class=^c]{color:red}        B、div[class=$c]{color:red}
C、div[class=c]{color:red}       D、div[class=*c]{color:red}

15、在HTML中，通过( )可以实现鼠标悬停在div上时，元素执行旋转45度效果
A、div:hover{transform:rotale(45deg)}
B、div:hover{transform:tanslate(50px)}
C、div:hover{transform:scale(1.5)}
D、div:hover{transform:skew(45deg)};

16、关于flex说法正确的是（      ）		
A、flex 属性用于指定弹性子元素如何分配空间  B、flex:1应该写在弹性元素上
C、设置flex:1无意义                         D、flex是指设置固定定位

17、让一个动画一直执行的属性是（       ）		
A、animation-direction           B、animation-iteration-count       
C、animation-play-state          D、animation-delay

18、以下不属于background-clip的值的是（         ）		
A、border-box   B、padding-box  C、content-box  D、none

19、以下哪条语句会产生运行错误（        ）		
A、var obj = ();  B、var obj = {};  C、var obj = [];  D、var obj = //;

20、请选择结果为真的表达式（       ）		
A、null instance of Object      B、null === undefined
C、null == undefined         D、NaN == NaN 

21、下面代码输出什么(       )
var a=0,b=0;
    for(;a<10,b<7;a++,b++){
        g=a+b;
    }
 console.log(g);"		
A、16     B、10     C、12     D、6

22、下列表达式成立的是(        )		
A、parseInt(12.5)==parseFloat(12.5)
B、Number("123abc")==parseFloat("123abc")
C、isNaN("abc")==NaN
D、typeof NaN=="number"

23、在JavaScript中，执行下面的代码后，num的值是(        )
var str = ""wang.wu@gmail.com"";
var num = str.indexOf(""."");"		
A、-1    B、0    C、4    D、13

24、阅读下面的JavaScript代码，输出结果是（         ）
function f(y) {
   var x=y*y; 
return x;
  }  
for(x=0;x< 5;x++) { 
y=f(x); 
document.writeln(y); 
} "		
A、0 1 2 3 4    B、 0 1 4 9 16    C、0 1 4 9 16 25    D、以上答案都不对   

25、在Java script中，运行下面代码的结果是
function foo(x){
        var num=5;
        bar=function(y){
          return (x+y+(++num));
        } 
 }
 console.log(foo(2));
 console.log(bar(10));
 console.log(bar(10));"		
A、undefined,18,19   B、17,18,19   C、5,18,19   D、undefined,18,18

26、下面代码输出正确的是(       )
parseInt(3, 8)
parseInt(3, 2)
parseInt(3, 0) "		
A、3, 3, 3    B、3, 3, NaN    C、3, NaN, NaN    D、other

27、在以下选项中，关于JavaScript的Date对象描述正确的是		
A、getDay( )方法能返回Date对象的一个月中的一天，其值为1~31
B、getDate( )方法能返回Date对象的一周中的一天，其值为0~6
C、getTime( )方法能返回某一时刻(1970年1月1日)依赖的毫秒数
D、getYear( )方法只能返回4位年份，长用于获取Date对象的年份

28、以下关于jQuery 节点的说法中错误是		
A、jQuery中用$(".box").insertBefroe(ele1,ele2)给指定ele2前添加ele1元素
B、jQuery中用$(".box").append(ele)给box类后添加ele元素
C、jQuery中用$(".box").appendTo(ele)给box类后添加ele元素
D、jQuery中用$(".box").insertAfter(ele1,ele2)给ele2后添加ele1元素

29、在jQuery中，下列关于事件的说法错误的是（      ）		
A、jQuery中用onclick绑定点击事件
B、jQuery中用on来给未来元素绑定事件
C、jQuery中用hover来绑定鼠标经过事件
D、jQuery中存在冒泡事件，故需要阻止冒泡

30、在jQuery中，能够操作HTML代码及其文本的方法是（     ）
A、attr()    B、text()    C、html()	    D、val()

二、多选题（每小题2分，共15小题，共30分）
1、在JavaScript语法中，下列说法正确的是		 
A、parseInt(43.12)返回值为43
B、parseInt('abc43.12')返回值为NaN
C、parseFloat('43.13abc')==parseInt(43.12) 返回true
D、isNaN(parseFloat('45.13abc'))返回true

2、下面哪些是JavaScript中document的方法？	
A、getElementById            B、getElementsById  
C、getElementsByTagName     D、getElementsByName  
E、getElementsByClassName

3、关于JavaScript事件说法不正确的是（       ）		
A、事件由事件函数、事件源、事件对象组成
B、当前事件作用在哪个标签上,哪个标签就是事件源
C、onclick 就是一个事件对象
D、图片切换使用JavaScript的change事件 

4、下列关于获取页面元素说法正确的是(       )		
A、document.getElementById(‘a’)是通过id值为a获取页面中的一个元素
B、document.getElementsByName(“na”)是通过name属性值为na获取页面中的一个元素
C、document.getElementsByTagName(“div”)是通过标签名获取去所有div;
D、以上说法都不正确; 

5、下列选项中属于jQuery属性选择器的是（       ）		
A、$("img[src$='.gif ']")   B、$("img")   C、$("[class][title]")   D、$("div>span")

6、网页的<body>元素中包含以下HTML代码： 
<div id=""box"">
     <h2 id='top1' name='header1'>标题1</h2>
     <h2 id='top2' name='header2'>标题2</h2>
</div>
下列能弹出""标题1""的jQuery代码是（        ）。	
A、alert($('#top1').text());               B、alert($('[name=header1]').text());
C、alert($('[name='header1']').text());     D、alert($('#header1').text());

7、以下（     ）是块级元素		
A、div    B、img    C、input    D、p

8、以下标签书写正确的是(      )		
A、<p/>    B、<br/>    C、<hr/>    D、<img/>

9、嵌入在HTML文档中的图像格式可以是(    )		
A、*.gif    B、*.tif    C、*.bmp    D、*.jpg

10、请选出正确的选项(        )  		
A、属性要在开始标签中指定，用来表示该标签的性质和特性
B、通常都是以“属性名=“值””的形式来表示
C、一个标签可以指定多个属性
D、指定多个属性时不用区分顺序。

11、下面哪些是HTML5 新增的表单元素？		
A、datalist    B、optgroup    C、output    D、legend

12、关于media说法正确的是（      ）		
A、@media 查询，你可以针对不同的媒体类型定义不同的样式
B、@media 可以设计响应式页面
C、当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
D、可以用media属性在link中使用

13、文字溢出显示省略号应该拥有那些属性（       ）		
A、overflow: hidden;           B、white-space: nowrap;
C、text-overflow: ellipsis;       D、width:500px

14、关于语义化说法不正确的是（        ）		
A、语义化的HTML有利于机器的阅读
B、Table 属于过时的标签，遇到数据列表时，需尽量使用 div 来模拟表格
C、语义化是HTML5带来的新概念，此前版本的HTML无法做到语义化
D、Header、article、address都属于语义化明确的标签

15、background-origin的值有哪些（       ）		
A、none    B、border-box    C、content-box    D、padding-box

三、判断题（每小题2分，共5小题，共10分。在每小题后对应括号内填入判断结果，正确的选项填写“√”，错误的选项填写“×”）
1、H5就是HTML5的简称。	（     ）	

2、CSS Sprites整理起来更为方便，同一个按钮不同状态的图片也不需要一个个切割出来并个别命名。（     ）		

3、slideUp()方法通过高度变化（向上减小）来动态地隐藏所有匹配的元素。（     ）

4、在jquery中addClass()可以增加多个样式，各个样式间用：隔开。（     ）

5、padding:10px;只设置上边填充为10像素，其它三边为零像素。（     ）

实操部分

评分细则

试题一（22分）
【问题】（22分）
（1）ul
（2）ul
（3）list-style
（4）none
（5）display
（6）block
（7）clear
（8）both
（9）float
（10）left
（11）hover
（每空2分，共22分）

试题二（26分）
【问题】（26分）
（1）css/style.css  或者 ./css/style.css 
（2）img
（3）p
（4）border-radius
（5）15px
（6）text-align
（7）center
（8）transition
（9）padding
（10）0 15px  或者 0px 15px  或者 0 15px 0 15px  或者 0px 15px 0px 15px
（11）transition
（12）transform
（13）rotate(360deg)  scale(1.3) 或者scale(1.3)  rotate(360deg)
（每空2分，共26分）

试题三（20分）
【问题】（20分）
（1）username
（2）getElementById
（3）pwd
（4）getElementById
（5）getElementsByTagName
（6）onsubmit
（7）username.value
（8）validate_email
（9）console
（10）onblur
（每空2分，共20分）

试题四（16分）
【问题】（16分）
（1）slideDown(800)
（2）slideUp(800)
（3）click
（4）slideDown(800)
（每空4分，共16分）

试题五（16分）
【问题】（16分）
（1）fixed
（2）0 或者 0px
（3）0 或者 0px
（4）flex
（5）space-between
（6）css("display", "block")
（7）css("display", "none")
（8）css("display", "block")
（每空2分，共16分）

试题一（22分）
阅读下列说明、效果图和HTML代码，进行静态网页开发，填写（1）至（11）代码。
【说明】
这是某电商类网站服装商品展示页面局部，该网站正在促销秋冬季女装。现在我们需要编写该网站效果图部分代码。
项目名称为shopping，包含首页index.html、css文件夹、img文件夹，其中，css文件夹包含index.css文件；img文件夹包含img1.jpg、img2.jpg、img3.jpg、img4.jpg、img5.jpg图片。
【效果图】
在这里插入图片描述

图1-1

【代码：首页index.html】

<!DOCTYPE html>
<html>
<head>
	<title>商品展示</title>
	<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
<body>
<div class="box">
	<div class="con">
<!-- 根据上下文填入合适的标签 -->	
<   （1）    class="clear">
			<li>
				<img src="img/img1.jpg">
				<p>微胖连衣裙</p>
			</li>
			<li>
				<img src="img/img2.jpg">
				<p>2019网红初秋女装</p>
			</li>
			<li>
				<img src="img/img3.jpg">
				<p>黑色休闲裤</p>
			</li>
			<li>
				<img src="img/img4.jpg">
				<p>韩版学生女装</p>
			</li>
			<li>
				<img src="img/img5.jpg">
				<p>原创设计女装</p>
			</li>
		</   （2）   >
	</div>
</div>
</body>
</html>

【代码：CSS文件index.css】

body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd{
	margin: 0;
	padding:0;
}
/*清理默认li样式*/
ul{
（3）  : （4） ;
}
/*显示为块级元素*/
img{
	(5)  :   (6)   ;
}
/*清理左右浮动*/
.clear:after{
	content: "";
	display: block;
	（7）  :   （8）  ;
}
.box{
	width: 100%;
}
.box .con{
	width: 1375px;
	margin:0 auto;
}
.box .con ul{
	padding-top:30px;
}
/*左浮动*/
.box .con ul li{
	（9）  :  （10）  ;
	width: 250px;
	margin:0 22px 22px 0;
	border:1px solid #eee;
}
.box .con ul li img{
	margin:15px auto 0;
}
.box .con ul li p{
	padding:15px;
}
/*设置鼠标移入添加红色边框*/
.box .con ul  li:   （11）   {
	border:1px solid red;
}

【问题】（22分，每空2分）
进行静态网页开发，补全代码，在（1）至（11）处填入正确的内容。

试题二（26分）
阅读下列说明、效果图，进行静态网页开发，填写（1）至（13）代码。
【说明】
现接到思极商务有限公司官网页面开发的项目，根据业务需求，需要将业务列表页面的每一个业务以卡片形式展示；同时为提升用户体验，要求实现每个卡片在鼠标经过有旋转和放大效果。
项目名称为goods，包含首页index.html、css文件夹、img文件夹，其中，css文件夹包含style.css文件；img文件夹包含icon-img.jpg、icon-img2.jpg、icon-img3.jpg图片。
请使用html+css3完成以下效果，并在对应代码处将空缺代码补全。
【效果图】
（1）图2-1鼠标经过前
在这里插入图片描述
图2-1
（2）图2-2鼠标经过

图2-2

【代码：】

<!DOCTYPE html>
<html>
<head>
	<title>第二题</title>
	<meta charset="utf-8">
<!-- 根据说明正确导入当前目录下css文件夹中的style.css -->
<link rel="stylesheet" type="text/css"  href="     （1）        " >
</head>
<body>
<div class="box">
	<div class="con">
		<ul class="clear">
			<li>
				<img src="img/icon-img.jpg">
				<p>优化速度</p>
				<span>更多</span>
			</li>
			<li>
				<img src="img/icon-img2.jpg">
				<p>营销分析</p>
				<span>更多</span>
			</li>
			<li>
<!-- 根据上下文填写正确的标签 --> 
				<     （2）      src="img/icon-img3.jpg" >
				<     （3）      >SEO和导入链接</p>
				<span>更多</span >
			</li>
		</ul>
	</div>
</div>
</body>
</html>

【代码】

/* 注意：此处省略了部分和本题无关的css代码 */
.box .con ul li{
	float:left;
	background-color: #fff;
	width: 380px;
/*设置li边框为圆角15px，文字对齐方式为居中。*/ 
	   （4）     ：  （5）      ;
	     （6）   ：   （7）      ;
	overflow: hidden;
}
.box .con ul li:nth-child(2){
	margin:0 30px;
} 
.box .con ul li img{
	margin:50px auto 0;
/*此处设置图片的过渡效果为0.8秒*/
	     （8）     ：0.8s;
}
.box .con ul li p{
/*设置内边距上下为0，左右为15px*/
	    （9）     ：  （10）      ;
	line-height: 140px;
	border-bottom:1px solid #ddd;
	font-weight: 600;
	color:#555;
}
.box .con ul li span{
	display: block;
	width: 100%;
	height:60px;
	line-height: 60px;
/*此处设置文字的过渡效果为0.8秒*/
	      （11）     ：0.8s;                  
}
/*用CSS3的实现鼠标经过图片旋转360度，放大1.3倍，离开再旋转还原。*/
.box .con ul li:hover img{
	     （12）     ：             （13）             ;
}
.box .con ul li:hover span{
	background-color: #f7c324;
	font-weight: 600;
}

【问题】（26分，每空2分）
进行静态网页开发，补全代码，在（1）至（13）处填入正确的内容。

试题三（20分）
阅读下列说明、效果图和代码，进行静态网页开发，填写（1）至（10）代码。
【说明】
现接到某电商网站注册、登录页面开发的项目，在注册页面需要做前端验证。具体要求：用户名长度和格式验证、邮箱格式验证、密码长度和格式验证、密码与重复密码一致性验证。
项目名称为verify，包含首页index.html、css文件夹、js文件夹，其中，css文件夹包含style.css文件，js文件夹包含index.js文件。
【效果图】
在这里插入图片描述
【代码：index.html】

<!DOCTYPE html>
<html>
<head>
	<title>登录</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
	<div class="box" id="box">
		<h2>注册</h2>
		<form action="" method="post">
			<ul>
				<li>
					<label><span>*</span>用户名：</label>
					<input type="text" name="username" placeholder="只能输入6-20个字母、数字、下划线" id="username">
				</li>
				<li>
					<label><span>*</span>电子邮箱：</label>
					<input type="text" name="email" placeholder="输入正确的电子邮箱地址" id="email">
				</li>
				<li>
					<label><span>*</span>密码：</label>
					<input type="password" name="pwd" placeholder="由字母开头,包含字母、数字、下划线,6-16位" id="pwd">
				</li>
				<li>
					<label><span>*</span>确认密码：</label>
					<input type="password" name="pwdOk" placeholder="确认密码必须与密码一致" id="pwdOK">
				</li>
			</ul>
			<button name="submit">提交</button>
		</form>
	</div>
<script src="js/index.js"></script>
</body>
</html>

【代码：index.js】

		//自定义验证用户名的方法
function validate_strLenght(str) {
			var regExp = /^(\w){6,20}$/;
			return regExp.test(str);
		}
	  //自定义的验证email方法	
function validate_email(str) {
			var regExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
			return regExp.test(str);
		}
//自定义验证密码的方法
		function validate_pwd(str) {
			var regExp = /^[a-zA-Z]\w{5,15}/;
			return regExp.test(str);
		}
//根据表单控件user的id填写
		var username = document.getElementById("     （1）     ");
//通过id获取元素
		var email = document.       （2）      ("email");
//根据表单控件pwd的id填写
		var pwd = document.getElementById("    （3）     ");
        //通过id获取元素
		var pwdOK = document.       （4）       ("pwdOK");
        //通过标签名获取元素
		var form = document.        （5）         ("form")[0];
        //表单提交
		form.      （6）        = function () {
            //使用自定义方法验证用户名、验证邮箱
			if (validate_strLenght(      （7）      ) &&      （8）     (email.value) && validate_pwd(pwd.value) && checkOk()) {
				console.log(username.value)
				console.log(email.value)
				console.log(pwd.value)
				return false;
			} else {
               //控制台输出
				     （9）        .log("验证失败")
				return false;
			}
		}
		// 检查用户名
		username.onblur = function () {
			if (validate_strLenght(username.value)) {
				console.log("用户名符合要求")
			} else {
				console.log("用户名不符合要求")
			}
		}
		//检查meil
		email.onblur = function () {
			if (validate_email(email.value)) {
				console.log("邮箱格式符合要求")
			} else {
				console.log("邮箱格式不符合要求")
			}
		}
		// 密码框失去焦点的时候
		pwd.     （10）       = function () {
			if (validate_pwd(pwd.value)) {
				console.log("密码符合要求")
			} else {
				console.log("密码不符合要求")
			}
		}
		function checkOk() {
			if (pwd.value == pwdOK.value) {
				console.log("密码与重复密码一致")
				return true
			} else {
				console.log("密码与重复密码不一致")
				return false
			}
		}
		pwdOK.onkeyup = checkOk

【问题】（20分，每空2分）
根据注释，补全代码，在（1）至（10）处填入正确的内容。

试题四（16分）
阅读下列说明、效果图和代码，进行动态网页开发，回答问题1至问题4。
【说明】
某公司要制作自己的官网首页，经过研究，侧边栏采用手风琴菜单效果。现在我们需要编写该网站效果图部分的代码。
项目名称为accordion，包含首页index.html、css文件夹、js文件夹，其中，css文件夹包含style.css文件；js文件夹包含jquery.min.js 和index.js。
【效果图】
在这里插入图片描述
【代码首页index.html】

<!DOCTYPE html>
<html>
<head>
	<title>手风琴效果</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<script src="js/jquery.min.js"></script>
</head>
<body>
<div class="box">
	<ul>
		<li>
			<h2>要求<span></span></h2>
			<div><p>要求要求要求要求要求要求要求要求要求要求要求要求要求要求要求要求要求</p></div>
		</li>
		<li>
			<h2>信念<span></span></h2>
			<div><p>信念信念信念信念信念信念信念信念信念信念信念信念信念信念信念信念信念信念信念信念信念信念</p></div>
		</li>
		<li>
			<h2>接受<span></span></h2>
			<div><p>接受接受接受接受接受接受接受接受接受接受接受接受接受接受接受接受接受接受接受接受接受接受接受</p></div>
		</li>
		<li>
			<h2>现实<span></span></h2>
			<div><p>现实现实现实现实现实现实现实现实现实现实现实现实现实现实现实现实现实现实现实现实现实现实现实现实现实现实现实现实现实</p></div>
		</li>
	</ul>
</div>
<script src="js/index.js"></script>
</body>
</html>

【代码 index.js】

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

【问题】（16分，每空4分）
根据注释，补全代码，在（1）至（4）处填入正确的内容。

试题五（16分）
阅读下列说明、效果图和代码，进行静态网页开发，回答问题1至问题8。
【说明】
某互联网公司开发官网的首页，为了适配移动端，决定菜单采用底部固定形式。现在需要编写代码实现效果。
项目名称为menu，包含首页index.html、css文件夹、js文件夹，其中，css文件夹包含style.css文件；js文件夹包含jquery.min.js 和index.js。
【效果图】
在这里插入图片描述

【代码 index.html】

<!DOCTYPE html>
<html>
<head>
    <title>底部菜单</title>
    <meta charset="utf-8">
 <metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<link rel="stylesheet" href="css/style.css">
    <script src="js/jquery.min.js"></script>
</head>
<body>
    <div class="layout-footer">
        <div class="bottom_nav">
            <a href="">首页</a>
        </div>
        <div class="bottom_nav">
            <div class="layout-submenu">
                <div class="sub_menu" style="border-bottom: 1.5px solid #F2F2F2"><a>项目</a></div>
                <div class="sub_menu">项目</div>
            </div>
            <a>服务</a>
        </div>
        <div class="bottom_nav">
            <div class="layout-submenu">
                <div class="sub_menu" style="border-bottom: 1.5px solid #F2F2F2"><a>中心公告</a></div>
                <div class="sub_menu">中心资讯</div>
            </div>
            <a>资讯</a>
        </div>
        <div class="bottom_nav">
            <a>我的账户</a>
        </div>
</div>
<script src="js/index.js"></script>
</body>
</html>

【代码 index.css】

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

【代码 index.js】

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

【问题】（16分，每空2分）
根据注释，补全代码，在（1）至（8）处填入正确的内容。

孑然R

关注

2
点赞
踩
46

收藏

觉得还不错? 一键收藏
0
评论
【1+X Web前端开发初级】样题一（理论+实操）

考生姓名准考证号2019年下半年 Web前端开发初级理论考试（考试时间9:00-11:30 共150分钟）本试卷共3道大题，满分100分。请在指定位置作答。一、单选题（每小题2分，共30小题，共60分）1、在HTML中，( )用来表示特殊字符引号 A、&reg B、&copy C、&quot D、&nbsp2、下面关于文件路径
复制链接

扫一扫