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

举报
红目香薰 发表于 2022/12/06 15:50:38 2022/12/06
【摘要】 ​ ​编辑期末考试——H5完成方式——练习题前言本练习训练了孩子们的栅格化布局,H5标签,CSS样式,并对列表与菜单进行了强化训练。使孩子们更好的掌握H5布局,为后面的框架教学打好基础。素材下载地址:链接:https://pan.baidu.com/s/1VBniK_1n2xw8oHm1PMZ4iw 提取码:1111重点单词涉及:1、box-sizing: border-box;免计算边框像...

 编辑

期末考试——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>


【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。