前端过程性考核，肝了一宿终于肝出来了!!!

快来打我* 2024-05-05 07:41 6阅读 0赞

第二天要交过程性考核，熬夜一宿肝出来了，有些样式细节还没有完善的，前端也学的不是特别明白，不要拍砖😭啊啊啊。

--------------------

### 题目 1 ###

请编写 html 和 CSS,实现如下页面效果。图中数字为元素高度、宽度和元素间间距。  
![在这里插入图片描述][20210512015133516.png_pic_left]

**代码如下：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body{
         
                padding: 0;
                margin: 0;
                color: white;
            }
            #box-1{
         
                margin-bottom: 10px;
            }
            #box-1, #box-2{
         
                display: flex;
            }
            #logo{
         
                width: 277px;
                height: 103px;
                background: red;
            }
            #box-1>.right{
         
                position: relative;
                left: 14px;
                width: 679px;
            }
            #language{
         
                width: 137px;
                height: 49px;
                background: green;
                position: absolute;
                right: 0;
            }
            #nav{
         
                width: 679px;
                height: 46px;
                background: green;
                position: absolute;
                top: 57px;
                right: 0;
            }
            #advertisement{
         
                width: 310px;
                height: 435px;
                background: yellow;
                margin-right: 10px;
            }
            #content{
         
                width: 650px;
                height: 435px;
                background: pink;
            }
        </style>
    
    </head>
    <body>
    
    <div id="main">
       <div id="box-1">
            <div class="left">
                <div id="logo">
                   logo
                </div>
            </div>
            <div class="right">
               <div id="language">
                   language
               </div>
                <div id="nav">
                    导航条
                </div>
            </div>
       </div>
    
        <div id="box-2">
            <div class="left">
                <div id="advertisement">
                    大广告
                </div>
            </div>
            <div class="right">
                <div id="content">
                    内容区
                </div>
            </div>
        </div>
    </div>
    
    </body>
    </html>

**样式如下：**  
![在这里插入图片描述][20210512015506679.png_pic_left]

--------------------

### 题目 2 ###

题目主要测试：

1.  CSS 样式添加方法；
2.  CSS 样式的基本使用方法
3.  CSS 样式采用内嵌样式完成。
4.  网站实现如下内容（见图 1，图 2）：  
    （1）包含 1 个网页。  
    （2）网页中要用到表格，  
       a) 表格分成 2 行，第一行包含表头单元格  
       b) 第二行包含普通单元格  
       c）表格宽度 300px  
    （3）表格第一行  
       a) 有背景颜色\#3cc  
       b) 文本居中对齐  
       c) 文字 18 个像素大小  
       d）行高 3 字符  
    （4）表格第二行单元格  
       a) 文字白色，背景黑色，字号 12 像素大小  
       b）包含一个无序列表，无列表标号  
    （5）无序列表中是 10 个超链接  
       a) 超链接无下划线  
       b）默认超链接文字白色  
       c）鼠标悬停超链接背景颜色变白，文字颜色变黑  
        
      ![在这里插入图片描述][20210512020744835.png_pic_left]

**代码如下：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body{
        
                padding: 0;
                margin: 0;
            }
            ul{
        
                list-style: none;
            }
            #table{
        
                width: 300px;
            }
            thead tr{
        
                background: #3cc;
                text-align: center;
                font-size: 18px;
                line-height: 3;
            }
            tbody tr{
        
                font-size: 12px;
                color: white;
                background: black;
            }
            a{
        
                color: white;
                text-decoration: none;
            }
            a:hover{
        
                background: white;
                color: black;
            }
    
        </style>
    </head>
    <body>
    <div>
        <table id="table">
            <thead>
                <tr>
                    <th>
                        国外最经典的文学名著
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <ul>
                            <li><a href="#">希腊神话——古希腊文明的瑰宝</a></li>
                            <li><a href="#">伊索寓言——部经典的寓言故事集</a></li>
                            <li><a href="#">荷马史诗——横亘千古的文学瑰宝</a></li>
                            <li><a href="#">俄狄浦斯王——古希腊悲剧的典范</a></li>
                            <li><a href="#">圣经——基督教的经典茗作</a></li>
                            <li><a href="#">源氏物语——日本古典文学的瑰宝</a></li>
                            <li><a href="#">神曲——中世纪的伟大诗作</a></li>
                            <li><a href="#">十日谈——欧洲第一部现实主义小说</a></li>
                            <li><a href="#">列那狐的故事——法国伟大的民间长篇故事诗</a></li>
                            <li><a href="#">巨人传——部荒诞不经的幽默小说</a></li>
                        </ul>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    </body>
    </html>

**效果图如下：**  
![在这里插入图片描述][20210512020226159.png_pic_left]

--------------------

### 题目 3 ###

题目主要测试：

1.  CSS 布局与定位基本用法
2.  层定位
3.  CSS 样式采用内嵌样式完成。
4.  浮动定位实现如下内容（如图 3 所示）：  
    （1）有外层容器盒子，居中，宽度为页面的 70%宽。  
    （2）内层盒子宽度相等，灰色背景。  
    （3）2 个内层盒子分为 2 列，两个盒子之间有 15px 空隙。  
    （4）每列均有 h2 标题和一个段落构成（内容不限）  
    ![在这里插入图片描述][20210512020339460.png_pic_left]

**代码如下：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body{
         
                padding: 0;
                margin: 0;
            }
            #container{
         
                width: 70%;
                margin: 10px auto;
            }
            #box-1, #box-2{
         
                background: #EFEEEC;
                width: 350px;
                float: left;
            }
            #box-2{
         
               margin-left: 10px;
            }
    
            .header{
         
                margin-bottom: 15px;
            }
    
        </style>
    </head>
    <body>
    
    <div id="container">
        <div id="box-1">
            <h2 class="header">
                HTML
            </h2>
            <p class="bottom">
                超文本标记语言(Hyper Text Markup Language)。标准通用标记语言下的一个应用。HTML不是一种编程语言,而是—种标记语言(markup language)，是网页制作所必备的“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。超文本标记语言的结构包括“头”部分(英语:Head)、和“主体”部分(英语:Body)，其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
            </p>
        </div>
        <div id="box-2">
            <h2 class="header">
                CSS
            </h2>
            <p class="bottom">
                层叠样式表(英文全称:Cascading Style Sheets)是—种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
            </p>
        </div>
    </div>
    </body>
    </html>

**效果图如下：**  
![在这里插入图片描述][20210512020619833.png_pic_left]

--------------------

### 题目 4 ###

题目主要测试：

1.  JS 基本语法
2.  JS 的 DOM、BOM 操作  
    要求：  
    （1）创建网页并编写 HTML 基本结构  
    （2）（2）提示用户输入 7 个学生成绩，保存在数组中  
    （3）计算总分，并在页面上显示  
    （4）计算平均分，并在页面上显示  
    （5）计算有几个成绩不及格，并在页面上显示（即<60 分）

注：我用的 jquery 没用原生 js…

**代码如下：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #main{
         
                width: 1000px;
                margin-left: 300px;
            }
            .scorePart{
         
                display: flex;
                margin-top:5px;
            }
        </style>
    </head>
    <body>
    
    <div id="main">
        <form id="form">
            <div class="scorePart">
                <label>学生1：</label>
                <input type="text" placeholder="输入成绩" class="score" />
            </div>
            <div class="scorePart">
                <label>学生2：</label>
                <input type="text" placeholder="输入成绩" class="score" />
            </div>
            <div class="scorePart">
                <label>学生3：</label>
                <input type="text" placeholder="输入成绩" class="score" />
            </div>
            <div class="scorePart">
                <label>学生4：</label>
                <input type="text" placeholder="输入成绩" class="score" />
            </div>
            <div class="scorePart">
                <label>学生5：</label>
                <input type="text" placeholder="输入成绩" class="score" />
            </div>
            <div class="scorePart">
                <label>学生6：</label>
                <input type="text" placeholder="输入成绩" class="score" />
            </div>
            <div class="scorePart">
                <label>学生7：</label>
                <input type="text" placeholder="输入成绩" class="score" />
            </div>
        </form>
        <div class="scorePart">
            <button id="staticButton">统计</button>
        </div>
        <div id="result">
            <ul id="resultUl">
            </ul>
        </div>
    </div>
    
    </body>
    </html>
    
    <script src="jquery-3.4.1.min.js"></script>
    
    <script>
        $(function (){
         
    
            $('#staticButton').on('click', function (){
         
    
                let val, grades = [];
                let count = 0;
                $(".score").each(function(index,item){
         
                    val = $(this).val();
                    if(val <= 60)//获取value值4
                        count = count+1;
                    grades.push(val)
                });
                console.log(grades);//打印成绩
                var gradeAll = eval(grades.join("+"));
    
                //成绩总分显示
                var re1 = $("<li>总成绩为：" + gradeAll + "</li>");
                var re2 = $("<li>平均成绩为：" + gradeAll/7 + "</li>");
                var re3 = $("<li>不及格的人数为：" + count + "</li>");
                $('#resultUl').append(re1);
                $('#resultUl').append(re2);
                $('#resultUl').append(re3);
            })
    
        })
    </script>

**效果图如下：**  
![在这里插入图片描述][20210512021505485.gif_pic_left]

*  js中设置了小于等于60分，其实应该是小于60，笔误笔误…

--------------------

### 题目 5 ###

请列举 CSS3 中有关动画制作的属性，并且按要求实现如下页面的动画。  
(1）页面中所有齿轮的 class 属性为 wheel，请编写 CSS 样式为所有齿轮添加逆时针旋转的动画， 要求以低速开始和结束，每 8 秒钟转一圈，重复播放。  
(2）页面中水滴的 class 属性为 water,请编写 CSS 样式为水滴添加下落的动画，水滴重复在 4 秒内从 A 点缓慢下落到 B 点消失。A 点、B 点距离容器底部的高度分别为 140 和40。  
![在这里插入图片描述][20210512021708679.png_pic_left]  
坦白了，这题我不会…，但是身边小伙伴有会的！👇  
[参考链接：https://zhanglong.blog.csdn.net/article/details/115412703][https_zhanglong.blog.csdn.net_article_details_115412703]

--------------------

### 题目 6 ###

请简述什么 HTML5 的表单验证功能，并列举 HTML5 自带的两种验证方式。制作一个如下所示的表单，要求表单具有自动完成功能及表单验证功能。  
![在这里插入图片描述][202105120219364.png_pic_left]  
**代码如下：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body{
         
                margin: 0;
                padding: 0;
            }
            #container{
         
                width: 30%;
                margin: 0 auto;
            }
            h2{
         
                text-align: center;
            }
            .form-box{
         
                display: flex;
                margin-bottom: 15px;
            }
            .form-box>label{
         
                width: 100px;
                text-align: right;
            }
            .sub-btn{
         
                padding-left: 30px;
                box-sizing: border-box;
            }
        </style>
    </head>
    <body>
    
    <div id="container">
        <div id="header">
            <h2>员工信息登记表</h2>
        </div>
       <div id="form">
           <form action="">
               <div class="form-box">
                   <label for="username">用户登陆名：</label>
                   <div class="form-group">
                       <input type="text" id="username" placeholder="用户名" />
                   </div>
               </div>
               <div class="form-box">
                   <label for="realName">真实姓名：</label>
                   <div class="form-group">
                       <input type="text" id="realName" placeholder="Xiu Yan" required="true" />
                   </div>
                   <div>（必填）</div>
               </div>
               <div class="form-box">
                   <label for="age">真实年龄：</label>
                   <div class="form-group">
                       <input type="number" id="age" required="true" />
                   </div>
                   <div>（必填）</div>
               </div>
               <div class="form-box">
                   <label for="birthday">出生日期：</label>
                   <div class="form-group">
                       <input type="date" id="birthday" required="true" />
                   </div>
                   <div>（必填）</div>
               </div>
               <div class="form-box">
                   <label for="bothLocation">籍贯：</label>
                   <div class="form-group">
                       <select name="bothLocation" id="bothLocation">
                           <option>北京</option>
                           <option>上海</option>
                           <option>山东</option>
                       </select>
                   </div>
               </div>
               <div class="form-box">
                   <label for="email">电子邮箱：</label>
                   <div class="form-group">
                       <input type="email" id="email" placeholder="22222@qq.com" required="true" />
                   </div>
                   <div>（必填）</div>
               </div>
               <div class="form-box">
                   <label for="phone">手机号码：</label>
                   <div class="form-group">
                       <input type="text" id="phone" required  oninput="check(this)" />
                   </div>
                   <div>（必填：11位数字）</div>
               </div>
    
               <script>
                   function check(el){
         
                       var phone = document.getElementById("phone").value;
                       console.log(phone);
                       if (!phone.match(/^\d{11}$/)) {
         
                           el.setCustomValidity('请输入11位手机号码')
                           return;
                       }else {
         
                           el.setCustomValidity('')
                       }
                   }
               </script>
    
               <div class="form-box">
                   <label for="color">幸运颜色：</label>
                   <div class="form-group">
                       <input type="color" id="color" />
                   </div>
                   <div>（请选择你喜欢的颜色）</div>
               </div>
               <div class="form-box">
                   <label for="fileUpload">上传头像：</label>
                   <div class="form-group">
                       <input type="file" id="fileUpload" />
                   </div>
               </div>
               <div class="form-box sub-btn" >
                   <button type="submit">提交</button>  
                   <button type="reset">重置</button>
               </div>
           </form>
       </div>
    
    </div>
    </body>
    </html>

**效果图如下：**  
![在这里插入图片描述][20210512033339806.gif_pic_left]

--------------------

### 题目 7 ###

请使用媒体查询，按照以下要求，写出完整 HTML+CSS 代码。  
(1）该网页在 PC 端（大于等于 960px）的页面背景为粉丝色（pink）。  
(2）该网页在 ipad 端（大于等于 768px）的页面背景为灰色（sliver）。  
(3）页面不可缩放。

**代码如下：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <title>Title</title>
        <style>
            body{
         
                margin:0;
                padding:0;
            }
            @media screen and (min-width: 768px) {
         
                body{
         
                    background-color:silver;
                }
            }
            @media screen and (min-width: 960px) {
         
                body{
         
                    background-color:pink;
                }
            }
        </style>
    </head>
    <body>
    
    </body>
    </html>

**效果图如下：**  
![在这里插入图片描述][20210512022940860.gif_pic_left]

--------------------

### 题目 8 ###

简易购物车  
使用 JS 实现效果图  
简易购物车的计算方式：商品数量 \*单价 +运费 =合计  
![在这里插入图片描述][20210512023027740.png_pic_left]  
**代码如下：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body{
         
                margin: 0;
                padding: 0;
            }
            #container{
         
                margin: 20px auto;
            }
            table{
         
                background: pink;
                text-align: center;
                border-collapse:collapse;
            }
            table tr{
         
                height: 45px;
            }
            table td{
         
                padding: 5px 15px;
                box-sizing: border-box;
            }
            table tr, table td{
         
                border: 2px solid darkgray;
            }
            input{
         
                width: 60px;
            }
    
        </style>
    </head>
    <body>
    
    <div id="container">
        <table border="1">
            <thead>
                <tr>
                    <th colspan="5">简易购物车</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>商品名称</td>
                    <td>数量（件）</td>
                    <td>单价（美元）</td>
                    <td>运费（美元）</td>
                    <td><button id="staticBtn">合计</button></td>
                </tr>
                <tr>
                    <td>跑跑道具</td>
                    <td><input type="number" id="money1" /></td>
                    <td><input type="number" id="money2"></td>
                    <td><input type="number" id="money3"></td>
                    <td><input type="text" id="all" readonly>美元</td>
                </tr>
            </tbody>
        </table>
    </div>
    
    </body>
    </html>
    <script src="jquery-3.4.1.min.js"></script>
    
    <script>
        $(function (){
         
            $('#staticBtn').on('click', function (){
         
                var money1 = $('#money1').val();
                var money2 = $('#money2').val();
                var money3 = $('#money3').val();
                var all = Number(money1)*Number(money2)+Number(money3);
                $('#all').val(all);
            })
        })
    </script>

**效果图如下：**

![在这里插入图片描述][20210512023126262.png_pic_left]

[20210512015133516.png_pic_left]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/05/9754f8d54c144b7996092592cfd22050.png
[20210512015506679.png_pic_left]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/05/0d8a639d456d407d8b6088bda8677a9d.png
[20210512020744835.png_pic_left]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/05/f3f01e1396b84206a7d9a048f5e686d6.png
[20210512020226159.png_pic_left]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/05/9ff07ad76ddc455d89c30e1639a88452.png
[20210512020339460.png_pic_left]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/05/1bf078086be640b69f4d3880b9a29484.png
[20210512020619833.png_pic_left]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/05/dd6c04b6096440aa918e1354339b172e.png
[20210512021505485.gif_pic_left]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/05/ff63d03739314991acaf8f6ad144f104.gif
[20210512021708679.png_pic_left]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/05/992e9da95d0e46189d9e69171fb00412.png
[https_zhanglong.blog.csdn.net_article_details_115412703]: https://zhanglong.blog.csdn.net/article/details/115412703
[202105120219364.png_pic_left]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/05/7c3f79a6875d450a8b1433c2c042ad1e.png
[20210512033339806.gif_pic_left]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/05/cb288b6e11144c91b34297fdbb44dad7.gif
[20210512022940860.gif_pic_left]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/05/e9ba013b0dfc4f998984f05e4c5f71d8.gif
[20210512023027740.png_pic_left]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/05/95a72fc8639c4e6fae43e3c039098db4.png
[20210512023126262.png_pic_left]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/05/ec27d611c9ce4131adc46d8928e46180.png