前端过程性考核，肝了一宿终于肝出来了!!!_使用js编程实现: (1)创建网页并编写html基本结构(1分) (2)提示用户输入7个学生成-CSDN博客

本文链接：https://blog.csdn.net/weixin_43819566/article/details/116681441

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

题目 1

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

代码如下：

<!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>

样式如下：
在这里插入图片描述

题目 2

题目主要测试：

CSS 样式添加方法；
CSS 样式的基本使用方法
CSS 样式采用内嵌样式完成。
网站实现如下内容（见图 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）鼠标悬停超链接背景颜色变白，文字颜色变黑

代码如下：

<!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>

效果图如下：
在这里插入图片描述

题目 3

题目主要测试：

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

代码如下：

<!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>

效果图如下：
在这里插入图片描述

题目 4

题目主要测试：

JS 基本语法
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>

效果图如下：
在这里插入图片描述

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

题目 5

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

题目 6

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

<!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>&nbsp;&nbsp;
               <button type="reset">重置</button>
           </div>
       </form>
   </div>

</div>
</body>
</html>

效果图如下：
在这里插入图片描述

题目 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>

效果图如下：
在这里插入图片描述

题目 8

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

<!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>