Web前端开发初级实操考试

最新推荐文章于 2022-11-07 22:28:01 发布

「已注销」

最新推荐文章于 2022-11-07 22:28:01 发布

阅读量3.7k

点赞数 3

分类专栏： HTML5+CSS3 文章标签： html5 css3

本文链接：https://blog.csdn.net/xinxiaozai/article/details/118392935

版权

这是一份关于Web前端开发初级实操考试的题目集，包括HTML5和CSS3的应用，涉及网页静态和动态效果的实现，如电商网站布局、卡片效果、前端验证、手风琴菜单和底部固定菜单等。

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

考生姓名准考证号

Web前端开发初级实操考试

（考试时间14:00-16:30 共150分钟）

1. 本试卷共5道题，满分100分。

2. 请在指定位置或开发环境下作答。

试题一（22分）

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

【说明】

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

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

【效果图】

【代码：首页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）代码。

【说明】

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

最低0.47元/天解锁文章

「已注销」

关注

3
点赞
踩
45

收藏

觉得还不错? 一键收藏
0
评论
Web前端开发初级实操考试

考生姓名准考证号 Web前端开发初级实操考试（考试时间14:00-16:30 共150分钟）1. 本试卷共5道题，满分100分。2. 请在指定位置或开发环境下作答。试题一（22分）阅读下列说明、效果图和HTML代码，进行静态网页开发，填写（1）至（11）代码。【说明】这是某电商类网站服装商品展示页面局部，该网站正在促销秋冬季...
复制链接

扫一扫

专栏目录