Web前端開發(fā)初級實操考試試卷（一）
時間：2023-09-28 13:48:01 | 來源：網站運營
時間：2023-09-28 13:48:01 來源：網站運營
Web前端開發(fā)初級實操考試試卷（一）：Web前端開發(fā)初級
實操考試試卷
試題一（每空 2 分，共 22 分）
閱讀下列說明、效果圖和 HTML 代碼，進行靜態(tài)網頁開發(fā)，請在紅線處補全代碼。
1.【說明】
這是某電商類網站服裝商品展示頁面局部，該網站正在促銷秋冬季女裝。現在我們需要編寫該網站效果圖部分代碼。
項目名稱為 shopping，包含首頁 index.html、css 文件夾、img 文件夾，其中，css 文件夾包含 index.css 文件；img 文件夾包含 img1.jpg、img2.jpg、img3.jpg、img4.jpg、img5.jpg 圖片。
2.【效果圖】
圖 1-1
3.【代碼：首頁 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">
<!-- 根據上下文填入合適的標簽 -->
< ***ul*** 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>原創(chuàng)設計女裝</p>
</li>
</ ***ul***>
</div>
</div>
</body>
</html>
4.【代碼：CSS 文件 index.css】(提示
* 中間為填空答案 )
body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd{
margin: 0;
padding:0;
}
/*清理默認li樣式*/
ul{
***list-style:none;***
}
/*顯示為塊級元素*/
img{
***display:block;***
}
/*清理左右浮動*/
.clear:after{
content: "";
display: block;
***clear:both;***
}
.box{
width: 100%;
}
.box .con{
width: 1375px;
margin:0 auto;
}
.box .con ul{
padding-top:30px;
}
/*左浮動*/
.box .con ul li{
***float:left;***
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: ***hover***
{
border:1px solid red;
}
試題二（每空 2 分，共 26 分）
閱讀下列說明、效果圖，進行靜態(tài)網頁開發(fā)，請在紅線處補全代碼。
1.【說明】
現接到思極商務有限公司官網頁面開發(fā)的項目，根據業(yè)務需求，需要將業(yè)務列表頁面的每一個業(yè)務以卡片形式展示；同時為提升用戶體驗，要求實現每個卡片在鼠標經過有旋轉和放大效果。
項目名稱為 goods，包含首頁 index.html、css 文件夾、img 文件夾，其中，css 文件夾包含 style.css 文件；img 文件夾包含 icon-img.jpg、icon-img2.jpg、icon-img3.jpg 圖片。
請使用 html+css3 完成以下效果，并在對應代碼處將空缺代碼補全。
2，【效果圖】
（1）圖 2-1 鼠標經過
圖 2-1
（2）圖 2-2 鼠標經過
圖 2-2
3.【代碼：首頁 index.html】 (提示
* 中間為填空答案 )
<!DOCTYPE html>
<html>
<head>
<title>第二題</title>
<meta charset="utf-8">
<!-- 根據說明正確導入當前目錄下css文件夾中的style.css -->
<link rel="stylesheet" type="text/css" href="***css/style.css 或 ./css/style.css***" >
</head>
<body>
<div class="box">
<div class="con">
<ul class="clear">
<li>
<img src="img/icon-img.jpg">
<p>優(yōu)化速度</p>
<span>更多</span>
</li>
<li>
<img src="img/icon-img2.jpg">
<p>營銷分析</p>
<span>更多</span>
</li>
<li>
<!-- 根據上下文填寫正確的標簽 -->
< ***img*** src="img/icon-img3.jpg" >
<***p***>SEO和導入鏈接</p>
<span>更多</span >
</li>
</ul>
</div>
</div>
</body>
</html>
4.【代碼：CSS 文件 style.css】 (提示 * 中間為填空答案 )
/* 注意：此處省略了部分和本題無關的css代碼 */
.box .con ul li{
float:left;
background-color: #fff;
width: 380px;
/*設置li邊框為圓角15px，文字對齊方式為居中。*/
***border-radius:15px;***
***text-align:center;***
overflow: hidden;
}
.box .con ul li:nth-child(2){
margin:0 30px;
}
.box .con ul li img{
margin:50px auto 0;
/*此處設置圖片的過渡效果為0.8秒*/
***transition***：0.8s;
}
.box .con ul li p{
/*設置內邊距上下為0，左右為15px*/
***padding:0 15px;***
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秒*/
***transition***：0.8s;
}
/*用CSS3的實現鼠標經過圖片旋轉360度，放大1.3倍，離開再旋轉還原。*/
.box .con ul li:hover img{
***transition:rotate(360deg) scale(1.3);***
}
.box .con ul li:hover span{
background-color: #f7c324;
font-weight: 600;
}
試題三（每空 2 分，共 20 分）
閱讀下列說明、效果圖和代碼，進行靜態(tài)網頁開發(fā)，請在紅線處補全代碼。
1.【說明】
現接到某電商網站注冊、登錄頁面開發(fā)的項目，在注冊頁面需要做前端驗證。具體要求：用戶名長度和格式驗證、郵箱格式驗證、密碼長度和格式驗證、密碼與重復密碼一致性驗證。
項目名稱為 verify，包含首頁 index.html、css 文件夾、js 文件夾，其中，css 文件夾包含 style.css 文件，js 文件夾包含 index.js 文件。
2.【效果圖】
圖 3-1
3.【代碼：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>
4.【代碼：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("***Username***");
//通過id獲取元素
var email = document.***getElementById***("email");
//根據表單控件pwd的id填寫
var pwd = document.getElementById("***pwd***");
//通過id獲取元素
var pwdOK = document.***getElementById***("pwdOK");
//通過標簽名獲取元素
var form = document.***getElementsByTagName***("form")[0];
//表單提交
form.***onsubmit***= function () {
//使用自定義方法驗證用戶名、驗證郵箱
if (validate_strLenght(***username.value***) && ***validate_email***
(email.value) && validate_pwd(pwd.value) && checkOk()) {
console.log(username.value)
console.log(email.value)
console.log(pwd.value)
return false;
} else {
//控制臺輸出
***console***.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.***onblur***= 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
試題四（每空 4 分，共 16 分）
閱讀下列說明、效果圖和代碼，進行動態(tài)網頁開發(fā)，請在紅線處補全代碼。
1.【說明】
某公司要制作自己的官網首頁，經過研究，側邊欄采用手風琴菜單效果?，F在我們需要編寫該網站效果圖部分的代碼。
項目名稱為 accordion，包含首頁 index.html、css 文件夾、js 文件夾，其中，css 文件夾包含 style.css 文件；js 文件夾包含 jquery.min.js 和 index.js。
2.【效果圖】
圖 4-1
3.【代碼 首頁 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>
4.【代碼 index.js】 (提示 * 中間為填空答案 )
$(".box ul li h2").click(function(e){
e.stopPropagation();
//被點擊的h2的next的div下拉展開，其余的li內部的div上拉收起，時間800毫秒。
$(this).next().stop().***slideDown(800)***.parents("li").siblings().find("div").
stop().***slideUp(800)***;
$(this).parent().stop().addClass("cur").siblings().stop().removeClass("cur");
})
//點擊事件
$(document).***click***(function(){
//所有div上拉收起，時間800毫秒。
$(".box ul li").find("div").***slideDown(800)***
;
})
試題五（每空 2 分，共 16 分）
閱讀下列說明、效果圖和代碼，進行靜態(tài)網頁開發(fā)，請在紅線處補全代碼。
1.【說明】
某互聯網公司開發(fā)官網的首頁，為了適配移動端，決定菜單采用底部固定形式。現在需要編寫代碼實現效果。
項目名稱為 menu，包含首頁 index.html、css 文件夾、js 文件夾，其中，css 文件夾包含 style.css 文件；js 文件夾包含 jquery.min.js 和 index.js。
2.【效果圖】
圖 5-1
3.【代碼 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>
4.【代碼 index.css】 (提示 * 中間為填空答案 )
a {
text-decoration: none;
color: #333;
}
/*固定定位*/
.layout-footer {
position:***fixed***;
z-index: 9999;
/*左邊距離0px，底邊距離0px*/
left:***0px**;
bottom: ***0px***;
/*實現flex布局，主軸對齊方式是兩端對齊，項目之間的間隔都相等。*/
display:***flex***;
justify-content:***space-between***;
width: 100%;
height: 50px;
border-top: 1px solid gainsboro;
color: black;
text-align: center;
background-color: #f2f2f2;
}
/*此處省略部分與本題無關的css*/
5.【代碼 index.js】 (提示 * 中間為填空答案 )
$(".bottom_nav a").click(function (e) {
e.stopPropagation();
//被點擊a的上一個div元素樣式設置為block，其余項目的div的隱藏。
$(this).prev().stop(). ***css('display','block')***.parent().siblings()
.children(".layout-submenu").stop(). ***css('display','none')***;
})
$(document).click(function () {
//點擊頁面的任意地方，二級菜單全部取消
$(".box ul li").find("div"). ***css('display','block')***;
})
在線咨詢
