期末测试——H5方式练习题

news2024/11/14 19:48:19

期末考试——H5完成方式——练习题

前言

本练习训练了孩子们的栅格化布局，H5标签，CSS样式，并对列表与菜单进行了强化训练。使孩子们更好的掌握H5布局，为后面的框架教学打好基础。

素材下载地址：

链接：https://pan.baidu.com/s/1VBniK_1n2xw8oHm1PMZ4iw 
提取码：1111

重点单词涉及：

1、box-sizing: border-box;免计算边框像素

2、banner横幅

3、background-image: url("imgs/bg.png");设置背景图片

4、background-size: 100% 100%;拉伸背景图片填充整个容器

5、©是©符号的写法

6、border-radius: 12px;圆角设置

7、box-shadow: 2px 2px 2px 2px gray;设置阴影

8、font-size: 3rem;设置字体大小为浏览器默认大小的3倍

9、height: 10vh;设置高度为浏览器高度的百分比数值，支持浮点数

10、hover;伪类选择器 

评分标准：

  1. base.css创建与引入(10分)
  2. 关键词注释(5分)
  3. 网页框架(30分)
  4. 文字填充(25分)
  5. Banner图片(10分)
  6. 信息列表(15分)
  7. 编码注释及类命名规范(5分)

练习题细则：

1、base.css创建与引入

先创建base.css文件以及编码，之后创建正式的index.htmlwen文件，通过link引入base.css

项目结构

css文件夹是放置base.css文件的，在外层是index.html

base.css编码(5分)

我们要处理，内外边距，ul样式，十二分之一列宽，十二分之十列宽，还有100%列宽三个就够了。

*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
ul{
    list-style: none;
}
.col-1{
    width: 8.33%;
    float: left;
}
.col-10{
    width: 83.33%;
    float: left;
}
.col-12{
    width: 100%;
    float: left;
}

base.css文件引入(5分)

直接通过link引入css文件，这里路径是【css/base.css】

<link rel="stylesheet" href="css/base.css">

引入位置 

2、关键词注释(5分)

这里是确认考生信息，确认学生自行完成。

拼接方式：考场 姓名 时间

<meta key="实训室一 老师付 2022年12月3日10:53:58">

3、网页框架(30分)

网页框架共计分为(每个模块6分，共30分)：

  1. top：头部菜单，gray灰色，宽度100%列宽，高度（5vh）
  2. banner_text：横幅文字，skyblue天蓝色，左右1/12留白，正文10/12列宽，高度(10vh)
  3. banner_img：横幅图片，浅蓝色lightblue，左右1/12留白，正文10/12列宽，高度(50vh)
  4. list_info：信息列表，浅粉色lightpink，左右1/12留白，正文10/12列宽，高度（30vh）
  5. footer：网站备案信息，黑色black，左右1/12留白，正文10/12列宽，高度(5vh)

示例源码：

<!--top-->
<div class="col-12" style="background-color: lightgray;height: 5vh;"></div>
<!-- banner_text -->
<div class="col-12" style="height: 10vh;">
    <div class="col-1" style="background-color: #fff;height: 10vh;"></div>
    <div class="col-10" style="background-color: skyblue;height: 10vh;"></div>
    <div class="col-1" style="background-color: #fff;height: 10vh;"></div>
</div>
<!-- banner_img -->
<div class="col-12" style="height: 50vh;">
    <div class="col-1" style="background-color: #fff;height: 50vh;"></div>
    <div class="col-10" style="background-color: lightblue;height: 50vh;"></div>
    <div class="col-1" style="background-color: #fff;height: 50vh;"></div>
</div>
<!-- list_info -->
<div class="col-12" style="height: 30vh;">
    <div class="col-1" style="background-color: #fff;height: 30vh;"></div>
    <div class="col-10" style="background-color: lightpink;height: 30vh;"></div>
    <div class="col-1" style="background-color: #fff;height: 30vh;"></div>
</div>
<!-- footer -->
<div class="col-12" style="height: 5vh;">
    <div class="col-1" style="background-color: #fff;height: 5vh;"></div>
    <div class="col-10" style="background-color: #000;height: 5vh;"></div>
    <div class="col-1" style="background-color: #fff;height: 5vh;"></div>
</div>

4、文字填充(25分)

  1. top菜单10分
  2. banner_text横幅文本5分
  3. banner_img横幅图片文字5分
  4. footer底部备案信息5分

文字填充部分分为4个位置：

1、top顶部菜单，这里水平分为5个选项，每个20%，内容居中对齐，添加鼠标悬停事件，悬停效果如图【API接口工具】。

2、banner_text文本水平居中，垂直居中高度10vh，大小2倍浏览器默认大小，加粗。

3、banner_img文本水平居中，垂直居中高度50vh，大小3倍浏览器默认大小，加粗。

4、footer文本水平居中，垂直居中高度5vh，文字颜色为黑色。其中【©】符号为2分。

源码示例：

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>开发工具选择</title>
<link rel="stylesheet" href="css/base.css">
<body>
<!--top-->
<div class="col-12" style="background-color: lightgray;height: 5vh;">
    <style>
        .top_ul{
            width: 100%;
            text-align: center;
        }
        .top_ul li{
            width: 20%;
            float: left;
            line-height: 5vh;
            cursor: pointer;
        }
        .top_ul li:hover{
            background-color: #000;
            color: #fff;
        }
    </style>
    <ul class="top_ul">
        <li>DB开发工具</li>
        <li>Java开发工具</li>
        <li>.Net开发工具</li>
        <li>Python开发工具</li>
        <li>API接口工具</li>
    </ul>
</div>
<!-- banner_text -->
<div class="col-12" style="height: 10vh;">
    <div class="col-1" style="background-color: #fff;height: 10vh;"></div>
    <style>
        .banner_text{
            text-align: center;
            line-height: 10vh;
            font-size: 2rem;
            font-weight: bolder;
        }
    </style>
    <div class="col-10 banner_text" style="background-color: skyblue;height: 10vh;">
        合适的开发工具——项目成功的开始
    </div>
    <div class="col-1" style="background-color: #fff;height: 10vh;"></div>
</div>
<!-- banner_img -->
<div class="col-12" style="height: 50vh;">
    <div class="col-1" style="background-color: #fff;height: 50vh;"></div>
    <style>
        .banner_img{
            text-align: center;
            line-height: 50vh;
            font-size: 3rem;
            font-weight: bolder;
            background-image: url("imgs/bg.png");
            background-size: 100% 100%;
        }
    </style>
    <div class="col-10 banner_img" style="background-color: lightblue;height: 50vh;">
        根据不同项目选择不同的工具
    </div>
    <div class="col-1" style="background-color: #fff;height: 50vh;"></div>
</div>
<!-- list_info -->
<div class="col-12" style="height: 30vh;">
    <div class="col-1" style="background-color: #fff;height: 30vh;"></div>
    <div class="col-10" style="background-color: lightpink;height: 30vh;"></div>
    <div class="col-1" style="background-color: #fff;height: 30vh;"></div>
</div>
<!-- footer -->
<div class="col-12" style="height: 5vh;">
    <div class="col-1" style="background-color: #fff;height: 5vh;"></div>
    <style>
        .footer_text{
            text-align: center;
            color: white;
            line-height: 5vh;
        }
    </style>
    <div class="col-10 footer_text" style="background-color: #000;height: 5vh;">
        某社团某某干事ICP经营许可证: 222 22222222 | ICP备22222222号公网安备000000000号Copyright&copy;0000 2222
    </div>
    <div class="col-1" style="background-color: #fff;height: 5vh;"></div>
</div>
</body>
</html>

5、Banner图片(10分)

设置背景图片，背景素材名为【bg.png】，要求充拉伸满整个div容器。

源码示例：

background-image: url("imgs/bg.png");
background-size: 100% 100%;

添加位置：

6、信息列表(15分)

  1. 列表显示5分
  2. 未来选择5分
  3. 排列整齐度5分(自行调节内外边距)

我们这里是展示我们要使用的工具：

我们使用dl、dt、dd来遍历我们的常用工具，遍历完成后给最外层的父类div容器添加一个hover伪类选择器，添加box-shadow属性，阴影单位都是2px，颜色为gray灰色。

7、编码注释及类命名规范(5分)

有详细的注释(2分)

有比较规范的类名命名(3分)

源码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>开发工具选择</title>
  <link rel="stylesheet" href="css/base.css" />
</head>

<body>
  <!--top-->
  <div class="col-12" style="background-color: lightgray;height: 5vh;">
    <style>
      .top_ul {
        width: 100%;
        text-align: center;
      }

      .top_ul li {
        width: 20%;
        float: left;
        line-height: 5vh;
        cursor: pointer;
      }

      .top_ul li:hover {
        background-color: #000;
        color: #fff;
      }
    </style>
    <ul class="top_ul">
      <li>DB开发工具</li>
      <li>Java开发工具</li>
      <li>.Net开发工具</li>
      <li>Python开发工具</li>
      <li>API接口工具</li>
    </ul>
  </div>
  </div>
  <!-- banner_text -->
  <div class="col-12" style="height: 10vh">
    <div class="col-1" style="background-color: #fff; height: 10vh"></div>
    <style>
      .banner_text {
        text-align: center;
        line-height: 10vh;
        font-size: 2rem;
        font-weight: bolder;
      }
    </style>
    <div class="col-10 banner_text" style="background-color: skyblue; height: 10vh">
      合适的开发工具——项目成功的开始
    </div>
    <div class="col-1" style="background-color: #fff; height: 10vh"></div>
  </div>
  <!-- banner_img -->
  <div class="col-12" style="height: 50vh">
    <div class="col-1" style="background-color: #fff; height: 50vh"></div>
    <style>
      .banner_img {
        text-align: center;
        line-height: 50vh;
        font-size: 3rem;
        font-weight: bolder;
        background-image: url("imgs/bg.png");
        background-size: 100% 100%;
      }
    </style>
    <div class="col-10 banner_img" style="background-color: lightblue; height: 50vh">
      根据不同项目选择不同的工具
    </div>
    <div class="col-1" style="background-color: #fff; height: 50vh"></div>
  </div>
  <!-- list_info -->
  <div class="col-12" style="height: 30vh">
    <div class="col-1" style="background-color: #fff; height: 30vh"></div>
    <div class="col-10" style="height: 30vh">
      <style>
        .list_box {
          text-align: center;
          width: 18%;
          height: 28vh;
          float: left;
          border: 1px solid black;
          margin: 1%;
          border-radius: 12px;
        }

        .list_box:hover {
          box-shadow: 2px 2px 2px 2px gray;
        }

        .list_box img {
          width: 90%;
          height: 23vh;
        }
      </style>
      <div class="list_box">
        <dl>
          <dt><img src="imgs/list1.png" /></dt>
          <dd>Java开发工具</dd>
        </dl>
      </div>
      <div class="list_box">
        <dl>
          <dt><img src="imgs/list2.png" /></dt>
          <dd>.Net开发工具</dd>
        </dl>
      </div>
      <div class="list_box">
        <dl>
          <dt><img src="imgs/list3.png" /></dt>
          <dd>Python开发工具</dd>
        </dl>
      </div>
      <div class="list_box">
        <dl>
          <dt><img src="imgs/list4.png" /></dt>
          <dd>API开发工具</dd>
        </dl>
      </div>
      <div class="list_box">
        <dl>
          <dt><img src="imgs/list5.png" /></dt>
          <dd>DB开发工具</dd>
        </dl>
      </div>
    </div>
    <div class="col-1" style="background-color: #fff; height: 30vh"></div>
  </div>
  <!-- footer -->
  <div class="col-12" style="height: 5vh">
    <div class="col-1" style="background-color: #fff; height: 5vh"></div>
    <style>
      .footer_text {
        text-align: center;
        color: white;
        line-height: 5vh;
      }
    </style>
    <div class="col-10 footer_text" style="background-color: #000; height: 5vh">
      某社团某某干事ICP经营许可证: 222 22222222 |
      ICP备22222222号公网安备000000000号Copyright&copy;0000 2222
    </div>
    <div class="col-1" style="background-color: #fff; height: 5vh"></div>
  </div>
</body>

</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/57509.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【学习记录】Dynaslam源代码魔改-替换MaskRCNN为YoloV5

【学习记录】Dynaslam源代码魔改-替换MaskRCNN为YoloV5

这两天接了个小任务&#xff0c;需求是替换Dynaslam里面的动态物体识别模块&#xff0c;将MaskRCNN换为YoloV5&#xff0c;这里记录一下过程中遇见的问题。 一、运行Dynaslam Dynaslam本身是一个基于ORBSLAM2的视觉SLAM框架&#xff0c;论文并没有仔细看过&#xff0c;简单来…
阅读更多...
HTML5期末大作业：基于html+css+javascript+jquery实现藏族文化15页【学生网页设计作业源码】

HTML5期末大作业：基于html+css+javascript+jquery实现藏族文化15页【学生网页设计作业源码】

&#x1f389;精彩专栏推荐 &#x1f4ad;文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 &#x1f482; 作者主页: 【主页——&#x1f680;获取更多优质源码】 &#x1f393; web前端期末大作业&#xff1a; 【&#x1f4da;毕设项目精品实战案例 (10…
阅读更多...
免费搜索vs付费搜索：百度谷歌的有力竞争者刚刚出现!

免费搜索vs付费搜索：百度谷歌的有力竞争者刚刚出现!

北大出版社&#xff0c;人工智能原理与实践 人工智能和数据科学从入门到精通 详解机器学习深度学习算法原理 人工智能原理与实践 全面涵盖人工智能和数据科学各个重要体系经典 搜索引擎的游戏刚刚被改变&#xff01; 人们对昨天&#xff08;12月1号&#xff09;OpenAI 发布…
阅读更多...
UltraISO 制作U盘启动盘

UltraISO 制作U盘启动盘

1、 从Ubuntu官网http://cn.ubuntu.com/download/下载系统的iso文件 用来制作的U盘需要是FAT32格式的&#xff0c;可以通过格式化U盘更改&#xff08;注意&#xff0c;如果U盘已经写入过隐藏分区了&#xff0c;需要在磁盘管理里面删除相关隐藏分区然后合并为一个大分区后…
阅读更多...
[附源码]Python计算机毕业设计Django基于协同过滤的资讯推送平台

[附源码]Python计算机毕业设计Django基于协同过滤的资讯推送平台

项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等等。 环境需要 1.运行环境&#xff1a;最好是python3.7.7&#xff0c;…
阅读更多...
MyBatis动态SQL多表操作

MyBatis动态SQL多表操作

动态SQL if-where标签 <select id"selByCondition" resultMap"rm">select *from mybatis<where><if test"status !null">and STATUS#{STATUS}</if><if test"companyName !null and companyName !">an…
阅读更多...
idea10个常用的Debug技巧

idea10个常用的Debug技巧

文章目录一 回到上一步二 字段断点三 Stream调试四 表达式结果查看五 debug筛选条件六 异常断点七 远程调试八 强制返回九 运行时修改变量十 多线程调试重用快捷键一 回到上一步 进行代码调试的过程中&#xff0c;有的时候由于自己点击下一步的速度比较快&#xff0c;可能之前…
阅读更多...
世界连续动作预测模型-方向模型

世界连续动作预测模型-方向模型

🍿*★,*:.☆欢迎您/$:*.★* 🍿 正文 <
阅读更多...
[附源码]Python计算机毕业设计Django基于java的社区管理系统

[附源码]Python计算机毕业设计Django基于java的社区管理系统

项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等等。 环境需要 1.运行环境&#xff1a;最好是python3.7.7&#xff0c;…
阅读更多...
云原生k8s的金箍棒

云原生k8s的金箍棒

如果云原生是我们喜欢的《西游记》中孙悟空&#xff0c;那Autoscaling就是云原生手中的金箍棒。想象一下&#xff0c;没有金箍棒的孙悟空&#xff0c;还能到处降妖伏魔么&#xff1f;还能成为斗战圣佛吗&#xff1f; Autoscaling 根据需要随时动态扩缩容&#xff0c;有了它&…
阅读更多...
TsingHua：FPT: Improving Prompt Tuning Efficiency via Progressive Training

TsingHua：FPT: Improving Prompt Tuning Efficiency via Progressive Training

这篇文章我觉得做的也挺有意思的。 是在探究提示学习中渐进式的更新参数比一窝蜂的直接更新参数效果要佳。 开头 是从比较PT&#xff08;prompt learning和fine tuning&#xff09;开始的。为什么PT的收敛速度慢&#xff0c;训练效率低下&#xff1f; 因为PT中中可训练的参数…
阅读更多...
[附源码]计算机毕业设计新冠疫苗接种预约系统Springboot程序

[附源码]计算机毕业设计新冠疫苗接种预约系统Springboot程序

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…
阅读更多...
第15章 基数法则

第15章 基数法则

第15章 基数法则 15.1 通过其他计数来计算当前计数 如何计算拥挤的房间里有多少人?你可以数人头&#xff0c;因为一个人就只有一个头。或者&#xff0c;也可以数耳朵&#xff0c;然后除以2。我们往往可以通过对其他事物计数进而计算当前计数。 最直截了当的通过查找一种事物…
阅读更多...
Kotlin高仿微信-第34篇-支付-向商家付款(二维码)

Kotlin高仿微信-第34篇-支付-向商家付款(二维码)

Kotlin高仿微信-项目实践58篇详细讲解了各个功能点&#xff0c;包括&#xff1a;注册、登录、主页、单聊(文本、表情、语音、图片、小视频、视频通话、语音通话、红包、转账)、群聊、个人信息、朋友圈、支付服务、扫一扫、搜索好友、添加好友、开通VIP等众多功能。 Kotlin高仿…
阅读更多...
这么简单，还不会使用java8 stream流的map()方法吗？

这么简单，还不会使用java8 stream流的map()方法吗？

一、前言 在日常的开发工作中经常碰到要处理list中数据的问题&#xff0c;比如从数据库中查出了很多学生&#xff0c;由于一些原因需要在内存中找出这些学生中的所有姓名&#xff0c;或者把名为“王五”的语文成绩暂时修改为“100”&#xff0c;这些问题怎么处理呐&#xff0c…
阅读更多...
初始C语言-1（数据类型、变量、常量、变量的作用域和生命周期、字符串+转义字符+注释）

初始C语言-1（数据类型、变量、常量、变量的作用域和生命周期、字符串+转义字符+注释）

目录 一、C语言 C语言主要运用于底层&#xff0c;也可以运用于上层软件&#xff08;早期还没有其他的语言的时候&#xff0c;很多游戏就是C语言做的&#xff09; C语言发展至今都是排行前三的计算机语言。 随着物联网&#xff0c;万物互联&#xff0c;以及嵌入式开发和单片机…
阅读更多...
Java 面向对象的【三大特征】，你都掌握了吗

Java 面向对象的【三大特征】，你都掌握了吗

文章目录前言一、封装1.封装的概念2.访问修饰限定符3.初识 “ 包 ”4. static 成员static修饰成员变量static修饰成员方法static成员初始化二、继承1.为什么要继承2.继承的概念3.语法4.父类成员访问1.子类中访问父类的成员变量2.子类中访问父类的成员方法5. super 关键字6. 子类…
阅读更多...
RabbitMQ之单机多实例部署

RabbitMQ之单机多实例部署

单机版安装前面介绍过了&#xff0c;不再介绍。 此处在单机版基础上 &#xff0c;也就是一台Linux虚拟机上启动多个RabbitMQ实例&#xff0c;部署集群。 1、在单个Linux虚拟机上运行多个RabbitMQ实例&#xff1a; 多个RabbitMQ使用的端口号不能冲突多个RabbitMQ使用的磁盘存…
阅读更多...
李宏毅《DLHLP》学习笔记6 - 语言模型

李宏毅《DLHLP》学习笔记6 - 语言模型

视频链接&#xff1a;https://www.youtube.com/watch?vdymfkWtVUdo&listPLJV_el3uVTsO07RpBYFsXg-bN5Lu0nhdG&index8&ab_channelHung-yiLee 课件链接&#xff1a;https://speech.ee.ntu.edu.tw/~tlkagk/courses/DLHLP20/ASR3.pdf 1. Language Model LM的作用是预…
阅读更多...
嵌入式Linux 开发经验：注册一个 misc 设备

嵌入式Linux 开发经验：注册一个 misc 设备

前言 之前买过好几本Linux 设备驱动的书&#xff0c;不过对设备驱动一知半解&#xff0c;什么叫设备&#xff0c;什么又叫驱动&#xff1f;最近工作需要&#xff0c;从源码级别深入的研究了一下 Linux 下的设备与驱动的概念&#xff0c;略有所收获 一般提起驱动开发&#xff0…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023