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

news/2024/5/8 14:22:49/文章来源:https://blog.csdn.net/feng8403000/article/details/128158666

期末考试——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.luyixian.cn/news_show_229674.aspx

如若内容造成侵权/违法违规/事实不符，请联系dt猫网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

UltraISO 制作U盘启动盘

UltraISO 制作U盘启动盘

1、 从Ubuntu官网http://cn.ubuntu.com/download/下载系统的iso文件 用来制作的U盘需要是FAT32格式的&#xff0c;可以通过格式化U盘更改&#xff08;注意&#xff0c;如果U盘已经写入过隐藏分区了&#xff0c;需要在磁盘管理里面删除相关隐藏分区然后合并为一个大分区后…
阅读更多...
open label file.(This can be normal only if you use MScoco)

open label file.(This can be normal only if you use MScoco)

E:\yolov4-rubish\darknet\our_data\ImagesAug 把标签的txt文件和Jpg文件放在同一个文件夹
阅读更多...
12月2日：thinkphp中数据库完结

12月2日：thinkphp中数据库完结

数据库的查询 聚合查询 聚合查询的几种方法其中将count作为重点来说&#xff0c;由图所示&#xff0c;即为使用count()方法中需要注意的点 count(*)的使用count()中字段名为具体值的使用方法时间查询 官方文档中列举的是使用wheretime()进行查询的方法&#xff0c;但是在日常的…
阅读更多...
C++11标准模板（STL）- 算法（std::set_difference）

C++11标准模板（STL）- 算法（std::set_difference）

定义于头文件 <algorithm> 算法库提供大量用途的函数&#xff08;例如查找、排序、计数、操作&#xff09;&#xff0c;它们在元素范围上操作。注意范围定义为 [first, last) &#xff0c;其中 last 指代要查询或修改的最后元素的后一个元素。 计算两个集合的差集 std:…
阅读更多...
历史名人鲁迅介绍HTML个人网页作业作品下载 历史人物介绍网页设计制作 大学生英雄人物网站作业模板 dreamweaver简单个人网页制作

历史名人鲁迅介绍HTML个人网页作业作品下载 历史人物介绍网页设计制作 大学生英雄人物网站作业模板 dreamweaver简单个人网页制作

&#x1f389;精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 &#x1f482; 作者主页: 【主页——&#x1f680;获取更多优质源码】 &#x1f393; web前端期末大作业…
阅读更多...
【历史上的今天】12 月 3 日：世界上第一条短信；Fortran 语言之父诞生；百度贴吧上线

【历史上的今天】12 月 3 日：世界上第一条短信；Fortran 语言之父诞生；百度贴吧上线

整理 | 王启隆 透过「历史上的今天」&#xff0c;从过去看未来&#xff0c;从现在亦可以改变未来。 今天是 2022 年 12 月 3 日&#xff0c;在 21 年前的今天&#xff0c;电动平衡车&#xff08;Segway&#xff09;问世&#xff1b;电动平衡车是一种电力驱动、具有自我平衡能力…
阅读更多...
Win11的两个实用技巧系列之如何关闭文字热门搜索、任务栏上的应用

Win11的两个实用技巧系列之如何关闭文字热门搜索、任务栏上的应用

目录 in10和Win11 22H2如何关闭文字热门搜索? Win11 22H2关闭文字热门搜索 Win10 22H2关闭文字热门搜索 Win11中如何不用鼠标打开已固定在任务栏上的应用 鼠标的操作方式如下&#xff1a; 点击拿去 in10和Win11 22H2如何关闭文字热门搜索? 不管是Win10还是Win11&#…
阅读更多...
Compose 动画艺术探索之属性动画

Compose 动画艺术探索之属性动画

本篇文章是此专栏的第三篇文章&#xff0c;如果想阅读前两篇文章的话请点击下方链接&#xff1a; Compose 动画艺术探索之瞅下 Compose 的动画Compose 动画艺术探索之可见性动画 Compose的属性动画 属性动画是通过不断地修改值来实现的&#xff0c;而初始值和结束值之间的过…
阅读更多...
TensorFlow之文本分类算法-6

TensorFlow之文本分类算法-6

1 前言 2 收集数据 3 探索数据 4 选择模型 5 准备数据 6 模型-构建训练评估 构建输出层 构建n-gram模型 构建序列模型 GloVe&#xff08;英文全称是Global Vectors for Word Representation&#xff09;是一个全球化的英语语境的单词表示的向量集&#xff0c;其使用非…
阅读更多...
Windows ssh免密访问Linux服务器

Windows ssh免密访问Linux服务器

文章目录1.在Windows上生成公钥和私钥2.将公钥中的内容复制到linux服务器3.确认linux服务器开启了允许SSH免密登录4.确认免密登录配置成功ssh提供了安全的身份认证的策略&#xff0c;在免密登录之前&#xff0c;首先需要一对公钥和私钥。客户端拿着私钥&#xff0c;服务端拿着公…
阅读更多...
HTML网页制作代码——简约的旅游图文相册博客HTML模板(12页)HTML+CSS+JavaScript 静态HTML旅行主题网页作业

HTML网页制作代码——简约的旅游图文相册博客HTML模板(12页)HTML+CSS+JavaScript 静态HTML旅行主题网页作业

&#x1f468;‍&#x1f393;学生HTML静态网页基础水平制作&#x1f469;‍&#x1f393;&#xff0c;页面排版干净简洁。使用HTMLCSS页面布局设计,web大学生网页设计作业源码&#xff0c;这是一个不错的旅游网页制作&#xff0c;画面精明&#xff0c;排版整洁&#xff0c;内容…
阅读更多...
了解世界杯赔率，让您运气更‘好‘（个人分享）

了解世界杯赔率，让您运气更‘好‘（个人分享）

足球世界杯买球赢面计算理论基础实际计算用例&#xff1a;代码实现理论基础 假设有两只球队甲和乙&#xff0c;在双方实力局等的情况下&#xff0c;赢球概率都为0.5%&#xff0c;则有&#xff1a; 甲乙概率胜负1/4胜胜1/4负胜1/4负负1/4 由此可知&#xff1a;甲胜的概率是1/4…
阅读更多...
亚马逊云科技推出安全数据湖Amazon Security Lake

亚马逊云科技推出安全数据湖Amazon Security Lake

2022年12月2日&#xff0c;亚马逊云科技在2022 re:Invent全球大会上宣布&#xff0c;推出Amazon Security Lake&#xff0c;该服务可以自动将客户在云端和本地的安全数据集中到客户在亚马逊云科技账户下专门构建的数据湖中&#xff0c;方便客户针对安全数据做出快速行动。 Am…
阅读更多...
教你6招轻松搞定 网站被木马反复篡改

教你6招轻松搞定 网站被木马反复篡改

提到网络被恶意篡改&#xff0c;应该让很多做了百度竞价的企业官网怀恨已久了吧&#xff1f;这类行为的目的就是通过这些受害网站获得排名并跳转到违法网站&#xff0c;达到不法的目的。对于企业来说不但损失了百度竞价的费用&#xff0c;还对企业形象造成很大的影响。甚至直接…
阅读更多...
[附源码]计算机毕业设计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…
阅读更多...
svg路径动画

svg路径动画

前言 最近在开发大屏看板&#xff0c;UI让做一个这样的效果 本来也简单&#xff0c;UI给个git动图放上就好了。但是UI给的图有四五十m&#xff0c;实在是太大了。后来想到了svg路径动画&#xff0c;之前从来没有搞过&#xff0c;就研究了下&#xff0c;由于svg没怎么研究过&a…
阅读更多...
实现自定义Spring Boot Starter

实现自定义Spring Boot Starter

实现自定义Spring Boot Starter一、原理二、实战1 自定义 Spring Boot Starter1.1 添加maven依赖1.2 属性类AuthorProperties1.3 自动配置类AuthorAutoConfiguration1.4 业务逻辑AuthorServer1.5 spring.factories2 测试自定义的 Spring Boot Starter2.1 新建module或者新建工程…
阅读更多...
Compose 动画艺术探索之动画规格

Compose 动画艺术探索之动画规格

本篇文章是此专栏的第四篇文章&#xff0c;如果想阅读前三篇文章的话请点击下方链接&#xff1a; Compose 动画艺术探索之瞅下 Compose 的动画Compose 动画艺术探索之可见性动画Compose 动画艺术探索之属性动画 动画规格在上一篇文章中提到过&#xff0c;不过上一篇文章中说的…
阅读更多...
[附源码]JAVA毕业设计教材管理（系统+LW）

[附源码]JAVA毕业设计教材管理（系统+LW）

[附源码]JAVA毕业设计教材管理&#xff08;系统LW&#xff09; 目运行 环境项配置&#xff1a; Jdk1.8 Tomcat8.5 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xf…
阅读更多...
ARM mkv210_image.c 文件详解

ARM mkv210_image.c 文件详解

一、mkv210_image.c 的使用演示 裸机程序中的 Makefile&#xff08;实际上真正的项目的 Makefile 都是这样的&#xff09;是把程序的编译和链接过程分开的。&#xff08;平时我们用 gcc a.c -o exe 这种方式来编译时&#xff0c;实际上把编译和链接过程一步完成了。在内部实际…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站 广利置业