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

    评分标准：

    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%列宽三个就够了。

    1. *{
    2.     margin: 0px;
    3.     padding: 0px;
    4.     box-sizing: border-box;
    5. }
    6. ul{
    7.     list-style: none;
    8. }
    9. .col-1{
    10.     width: 8.33%;
    11.     float: left;
    12. }
    13. .col-10{
    14.     width: 83.33%;
    15.     float: left;
    16. }
    17. .col-12{
    18.     width: 100%;
    19.     float: left;
    20. }

    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)

    示例源码：

    2. <div class="col-12" style="background-color: lightgray;height: 5vh;">div>
    4. <div class="col-12" style="height: 10vh;">
    5.     <div class="col-1" style="background-color: #fff;height: 10vh;">div>
    6.     <div class="col-10" style="background-color: skyblue;height: 10vh;">div>
    7.     <div class="col-1" style="background-color: #fff;height: 10vh;">div>
    8. div>
    10. <div class="col-12" style="height: 50vh;">
    11.     <div class="col-1" style="background-color: #fff;height: 50vh;">div>
    12.     <div class="col-10" style="background-color: lightblue;height: 50vh;">div>
    13.     <div class="col-1" style="background-color: #fff;height: 50vh;">div>
    14. div>
    16. <div class="col-12" style="height: 30vh;">
    17.     <div class="col-1" style="background-color: #fff;height: 30vh;">div>
    18.     <div class="col-10" style="background-color: lightpink;height: 30vh;">div>
    19.     <div class="col-1" style="background-color: #fff;height: 30vh;">div>
    20. div>
    22. <div class="col-12" style="height: 5vh;">
    23.     <div class="col-1" style="background-color: #fff;height: 5vh;">div>
    24.     <div class="col-10" style="background-color: #000;height: 5vh;">div>
    25.     <div class="col-1" style="background-color: #fff;height: 5vh;">div>
    26. 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分。

    源码示例：

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5. <meta charset="UTF-8">
    6. <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8. <title>开发工具选择title>
    9. <link rel="stylesheet" href="css/base.css">
    10. <body>
    12. <div class="col-12" style="background-color: lightgray;height: 5vh;">
    13.     <style>
    14.         .top_ul{
    15.             width: 100%;
    16.             text-align: center;
    17.         }
    18.         .top_ul li{
    19.             width: 20%;
    20.             float: left;
    21.             line-height: 5vh;
    22.             cursor: pointer;
    23.         }
    24.         .top_ul li:hover{
    25.             background-color: #000;
    26.             color: #fff;
    27.         }
    28.     style>
    29.     <ul class="top_ul">
    30.         <li>DB开发工具li>
    31.         <li>Java开发工具li>
    32.         <li>.Net开发工具li>
    33.         <li>Python开发工具li>
    34.         <li>API接口工具li>
    35.     ul>
    36. div>
    38. <div class="col-12" style="height: 10vh;">
    39.     <div class="col-1" style="background-color: #fff;height: 10vh;">div>
    40.     <style>
    41.         .banner_text{
    42.             text-align: center;
    43.             line-height: 10vh;
    44.             font-size: 2rem;
    45.             font-weight: bolder;
    46.         }
    47.     style>
    48.     <div class="col-10 banner_text" style="background-color: skyblue;height: 10vh;">
    49.         合适的开发工具——项目成功的开始
    50.     div>
    51.     <div class="col-1" style="background-color: #fff;height: 10vh;">div>
    52. div>
    54. <div class="col-12" style="height: 50vh;">
    55.     <div class="col-1" style="background-color: #fff;height: 50vh;">div>
    56.     <style>
    57.         .banner_img{
    58.             text-align: center;
    59.             line-height: 50vh;
    60.             font-size: 3rem;
    61.             font-weight: bolder;
    62.             background-image: url("imgs/bg.png");
    63.             background-size: 100% 100%;
    64.         }
    65.     style>
    66.     <div class="col-10 banner_img" style="background-color: lightblue;height: 50vh;">
    67.         根据不同项目选择不同的工具
    68.     div>
    69.     <div class="col-1" style="background-color: #fff;height: 50vh;">div>
    70. div>
    72. <div class="col-12" style="height: 30vh;">
    73.     <div class="col-1" style="background-color: #fff;height: 30vh;">div>
    74.     <div class="col-10" style="background-color: lightpink;height: 30vh;">div>
    75.     <div class="col-1" style="background-color: #fff;height: 30vh;">div>
    76. div>
    78. <div class="col-12" style="height: 5vh;">
    79.     <div class="col-1" style="background-color: #fff;height: 5vh;">div>
    80.     <style>
    81.         .footer_text{
    82.             text-align: center;
    83.             color: white;
    84.             line-height: 5vh;
    85.         }
    86.     style>
    87.     <div class="col-10 footer_text" style="background-color: #000;height: 5vh;">
    88.         某社团某某干事ICP经营许可证: 222 22222222 | ICP备22222222号公网安备000000000号Copyright©0000 2222
    89.     div>
    90.     <div class="col-1" style="background-color: #fff;height: 5vh;">div>
    91. div>
    92. body>
    93. html>

    5、Banner图片(10分)

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

    源码示例：

    1. background-image: url("imgs/bg.png");
    2. 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分)

    源码：

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8" />
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    8.   <title>开发工具选择title>
    9.   <link rel="stylesheet" href="css/base.css" />
    10. head>
    11.  
    12. <body>
    13.   
    14.   <div class="col-12" style="background-color: lightgray;height: 5vh;">
    15.     <style>
    16.       .top_ul {
    17.         width: 100%;
    18.         text-align: center;
    19.       }
    20.  
    21.       .top_ul li {
    22.         width: 20%;
    23.         float: left;
    24.         line-height: 5vh;
    25.         cursor: pointer;
    26.       }
    27.  
    28.       .top_ul li:hover {
    29.         background-color: #000;
    30.         color: #fff;
    31.       }
    32.     style>
    33.     <ul class="top_ul">
    34.       <li>DB开发工具li>
    35.       <li>Java开发工具li>
    36.       <li>.Net开发工具li>
    37.       <li>Python开发工具li>
    38.       <li>API接口工具li>
    39.     ul>
    40.   div>
    41.   div>
    42.   
    43.   <div class="col-12" style="height: 10vh">
    44.     <div class="col-1" style="background-color: #fff; height: 10vh">div>
    45.     <style>
    46.       .banner_text {
    47.         text-align: center;
    48.         line-height: 10vh;
    49.         font-size: 2rem;
    50.         font-weight: bolder;
    51.       }
    52.     style>
    53.     <div class="col-10 banner_text" style="background-color: skyblue; height: 10vh">
    54.       合适的开发工具——项目成功的开始
    55.     div>
    56.     <div class="col-1" style="background-color: #fff; height: 10vh">div>
    57.   div>
    58.   
    59.   <div class="col-12" style="height: 50vh">
    60.     <div class="col-1" style="background-color: #fff; height: 50vh">div>
    61.     <style>
    62.       .banner_img {
    63.         text-align: center;
    64.         line-height: 50vh;
    65.         font-size: 3rem;
    66.         font-weight: bolder;
    67.         background-image: url("imgs/bg.png");
    68.         background-size: 100% 100%;
    69.       }
    70.     style>
    71.     <div class="col-10 banner_img" style="background-color: lightblue; height: 50vh">
    72.       根据不同项目选择不同的工具
    73.     div>
    74.     <div class="col-1" style="background-color: #fff; height: 50vh">div>
    75.   div>
    76.   
    77.   <div class="col-12" style="height: 30vh">
    78.     <div class="col-1" style="background-color: #fff; height: 30vh">div>
    79.     <div class="col-10" style="height: 30vh">
    80.       <style>
    81.         .list_box {
    82.           text-align: center;
    83.           width: 18%;
    84.           height: 28vh;
    85.           float: left;
    86.           border: 1px solid black;
    87.           margin: 1%;
    88.           border-radius: 12px;
    89.         }
    90.  
    91.         .list_box:hover {
    92.           box-shadow: 2px 2px 2px 2px gray;
    93.         }
    94.  
    95.         .list_box img {
    96.           width: 90%;
    97.           height: 23vh;
    98.         }
    99.       style>
    100.       <div class="list_box">
    101.         <dl>
    102.           <dt><img src="imgs/list1.png" />dt>
    103.           <dd>Java开发工具dd>
    104.         dl>
    105.       div>
    106.       <div class="list_box">
    107.         <dl>
    108.           <dt><img src="imgs/list2.png" />dt>
    109.           <dd>.Net开发工具dd>
    110.         dl>
    111.       div>
    112.       <div class="list_box">
    113.         <dl>
    114.           <dt><img src="imgs/list3.png" />dt>
    115.           <dd>Python开发工具dd>
    116.         dl>
    117.       div>
    118.       <div class="list_box">
    119.         <dl>
    120.           <dt><img src="imgs/list4.png" />dt>
    121.           <dd>API开发工具dd>
    122.         dl>
    123.       div>
    124.       <div class="list_box">
    125.         <dl>
    126.           <dt><img src="imgs/list5.png" />dt>
    127.           <dd>DB开发工具dd>
    128.         dl>
    129.       div>
    130.     div>
    131.     <div class="col-1" style="background-color: #fff; height: 30vh">div>
    132.   div>
    133.   
    134.   <div class="col-12" style="height: 5vh">
    135.     <div class="col-1" style="background-color: #fff; height: 5vh">div>
    136.     <style>
    137.       .footer_text {
    138.         text-align: center;
    139.         color: white;
    140.         line-height: 5vh;
    141.       }
    142.     style>
    143.     <div class="col-10 footer_text" style="background-color: #000; height: 5vh">
    144.       某社团某某干事ICP经营许可证: 222 22222222 |
    145.       ICP备22222222号公网安备000000000号Copyright©0000 2222
    146.     div>
    147.     <div class="col-1" style="background-color: #fff; height: 5vh">div>
    148.   div>
    149. body>
    150.  
    151. html>

  • 相关阅读:
    【无公网IP】在公网环境下Windows远程桌面Ubuntu 18.04
    SpringCloud Alibaba组件入门全方面汇总(上)：注册中心-nacos、负载均衡-ribbon、远程调用-feign
    python模拟：实现抛硬币Python实现模拟抛硬币的随机结果
    前端工程化精讲第十二课 打包提效：如何为 Webpack 打包阶段提速？
    优化数据中心机架和设备的 5 个理由
    http协议
    Python离线翻译库argos-translate
    （210）Verilog HDL：设计一个电路之Rule 110
    Java之TCP和UDP进行网络编程
    核心实验10_hybrid（实现access和trunk功能）_ENSP
  • 原文地址：https://blog.csdn.net/feng8403000/article/details/128158666