期末测试——H5方式练习题-阿里云开发者社区

期末考试——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;伪类选择器

评分标准：

base.css创建与引入(10分)

关键词注释(5分)

网页框架(30分)

文字填充(25分)

Banner图片(10分)

信息列表(15分)

编码注释及类命名规范(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分)：

top：头部菜单，gray灰色，宽度100%列宽，高度（5vh）

banner_text：横幅文字，skyblue天蓝色，左右1/12留白，正文10/12列宽，高度(10vh)

banner_img：横幅图片，浅蓝色lightblue，左右1/12留白，正文10/12列宽，高度(50vh)

list_info：信息列表，浅粉色lightpink，左右1/12留白，正文10/12列宽，高度（30vh）

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分)

top菜单10分

banner_text横幅文本5分

banner_img横幅图片文字5分

footer底部备案信息5分

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

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

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

3、banner_img文本水平居中，垂直居中高度50vh，大小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">
<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分)

列表显示5分

未来选择5分

排列整齐度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>

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