HTML5响应式网页设计——核心技能考核示例(用于2022年11月H5考核)

news2024/10/8 18:03:12

目录

基础Base.css引入(5分)

Base.css编码

项目关键词注释：(5分)

网页框架：(30分)

框架编码：

文字填充：(20分)

文字编码：

banner部分(10分)

banner编码：

列表部分(20分)

列表编码：

编码注释及类名规范(10分)

源码与素材内容在文章最末，0积分下载。

基础Base.css引入(5分)

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

Base.css编码

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

ul {
    list-style: none;
}

.col-1 {
    width: 8.33%;
    float: left;
}

.col-2 {
    width: 16.66%;
    float: left;
}

.col-3 {
    width: 25%;
    float: left;
}

.col-4 {
    width: 33.33%;
    float: left;
}

.col-5 {
    width: 41.66%;
    float: left;
}

.col-6 {
    width: 50%;
    float: left;
}

.col-7 {
    width: 58.33%;
    float: left;
}

.col-8 {
    width: 66.66%;
    float: left;
}

.col-9 {
    width: 75%;
    float: left;
}

.col-10 {
    width: 83.33%;
    float: left;
}

.col-11 {
    width: 91.66%;
    float: left;
}

.col-12 {
    width: 100%;
    float: left;
}

项目关键词注释：(5分)

 这里作为学生的标识，确认学生自行完成。

拼接方式：时间 姓名 题目

<meta key="2022年11月18日09:20:08 老师付 H5考核练习题">

网页框架：(30分)

网页框架结构布局，TOP部分占满网页宽度，内容的左右各有8.33%的留白。

1、top部分(3分)

2、分隔符(2分)

3、logo部分(5分)

4、banner部分(5分)

5、列表部分(5分)

6、网站备案信息(5分)

7、颜色填充(5分)

网页框架结构布局，TOP部分占满网页宽度，内容的左右各有8.33%的留白

框架编码：

<!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">
    <meta key="2022年11月18日09:20:08 老师付 H5考核练习题">
</head>

<body>
    <!--top-->
    <div class="col-12" style="background-color: lightgray;height: 3vh;"></div>
    <!-- 分隔符 -->
    <div class="col-12" style="background-color: #fff;height: 2vh;"></div>
    <!-- logo -->
    <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 -->
    <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>
    <!-- 列表 -->
    <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>
    <!-- 网站备案信息 -->
    <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>
</body>

</html>

文字填充：(20分)

1、顶部文字共(8分)【下载：APP】是浮动效果，默认效果与前面四项【li】相同(3分)。

2、【logo】部分需要填充左右两个【div】容器，宽度为【col-1】，填充【logo.png】为背景图片。中间文字内容按照适当的大小，文字样式进行自行设定。(8分)，左右图片各2分，中间文字4分。

3、网站备案信息部分(4分)

文字编码：

top部分:

    <!--top-->
    <div class="col-12" style="background-color: lightgray;height: 3vh;">
        <div class="col-1" style="height: 3vh;"></div>
        <div class="col-10" style="height: 3vh;">
            <ul class="left-ul">
                <style>
                    .left-ul {
                        width: 100%;
                    }
                    
                    .left-ul li {
                        width: 20%;
                        float: left;
                        text-align: center;
                        line-height: 3vh;
                    }
                    
                    .left-ul li:last-child:hover {
                        cursor: pointer;
                        color: #fff;
                        background-color: #000;
                    }
                </style>
                <li>《幸福·和谐·平安夜》</li>
                <li>Happiness·harmonious·Christmas Eve</li>
                <li>商务电话：0533-8888888</li>
                <li>全国订购热线：400-800-1314</li>
                <li>下载：APP</li>
            </ul>
        </div>
        <div class="col-1" style="height: 3vh;"></div>
    </div>

logo部分:

    <!-- logo -->
    <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 class="col-1" style="background-image: url('imgs/logo.png');background-size: 100% 100%;background-repeat: no-repeat;height: 10vh;"></div>
            <div class="col-10" style="height: 10vh;line-height: 10vh;text-align: center;font-size: 2.5rem;font-family: '华文行楷';font-weight: bolder;">
                礼包装满"好运" 火炉燃烧"吉祥" 烟囱飘走是"愁云" 圣诞树照亮"幸福"
            </div>
            <div class="col-1" style="background-image: url('imgs/logo.png');background-size: 100% 100%;background-repeat: no-repeat;height: 10vh;"></div>
        </div>
        <div class="col-1" style="background-color: #fff;height: 10vh;"></div>
    </div>

网站备案信息部分:

    <!-- 网站备案信息 -->
    <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;color: #fff;line-height: 5vh;text-align: center;">
            某平安夜社团 某某社团干事 ICP经营许可证：222-222222222 | ICP备22222222号 公网安备0000000000号 Copyright &copy; 0000-2222
        </div>
        <div class="col-1" style="background-color: #fff;height: 5vh;"></div>
    </div>

banner部分(10分)

1、banner背景图片(5分)

2、banner文字部分(5分)

banner编码：

    <!-- banner -->
    <div class="col-12" style="height: 50vh;">
        <div class="col-1" style="background-color: #fff;height: 50vh;"></div>
        <div class="col-10" style="background-image: url('imgs/banner.jpeg');background-size: 100% 110%;height: 50vh;text-align: center;line-height: 50vh;font-size: 4rem;font-family: '宋体';">
            老师付·祝学生们·平安夜幸福
        </div>
        <div class="col-1" style="background-color: #fff;height: 50vh;"></div>
    </div>

列表部分(20分)

1、列表为5个在售产品，利用dl、dt、dd或者其它布局方式进行敷设。(布局10分)

2、图片与文字内容填充(5分)

3、浮动效果(5分)

列表编码：

    <!-- 列表 -->
    <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: #fff;height: 30vh;">
            <style>
                .list-box {
                    border: 1px solid gray;
                    box-shadow: 2px 2px 2px gray;
                    height: 28vh;
                    border-radius: 12px;
                    margin-right: 1.5%;
                    margin-left: 1.5%;
                    text-align: center;
                }
                
                .list-box:hover {
                    box-shadow: 4px 4px 4px black;
                }
                
                .list-box dl {
                    width: 100%;
                    height: 28vh;
                }
                
                .list-box dl img {
                    border-radius: 12px;
                    width: 100%;
                    height: 25vh;
                }
            </style>
            <div class="list-box col-2">
                <dl>
                    <dt><img src="imgs/list1.jpeg"/></dt>
                    <dd>爱心Apple</dd>
                </dl>
            </div>
            <div class="list-box col-2">
                <dl>
                    <dt><img src="imgs/list2.jpeg"/></dt>
                    <dd>爱的礼盒</dd>
                </dl>
            </div>
            <div class="list-box col-2">
                <dl>
                    <dt><img src="imgs/list3.jpeg"/></dt>
                    <dd>幸福手办</dd>
                </dl>
            </div>
            <div class="list-box col-2">
                <dl>
                    <dt><img src="imgs/list4.jpeg"/></dt>
                    <dd>诉说爱巢</dd>
                </dl>
            </div>
            <div class="list-box col-2">
                <dl>
                    <dt><img src="imgs/list5.jpeg"/></dt>
                    <dd>私人订制</dd>
                </dl>
            </div>
        </div>
        <div class="col-1" style="background-color: #fff;height: 30vh;"></div>
    </div>

编码注释及类名规范(10分)

1、有详细的注释(5分)

2、有比较规范的类名命名(5分)

祝大家都能掌握好H5的技术，本次能考的比较高的分数。

源码与素材下载地址：

https://download.csdn.net/download/feng8403000/87069917

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

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

相关文章

单商户商城系统功能拆解31—营销中心—幸运抽奖

单商户商城系统功能拆解31—营销中心—幸运抽奖

单商户商城系统&#xff0c;也称为B2C自营电商模式单店商城系统。可以快速帮助个人、机构和企业搭建自己的私域交易线上商城。 单商户商城系统完美契合私域流量变现闭环交易使用。通常拥有丰富的营销玩法&#xff0c;例如拼团&#xff0c;秒杀&#xff0c;砍价&#xff0c;包邮…
阅读更多...
替换NAS，这5个理由就够了

替换NAS，这5个理由就够了

全球数据量爆炸性增长&#xff0c;企业对于大容量、易扩展、低成本的存储设备产生了强烈的需求&#xff0c;起初很多企业选择NAS&#xff0c;但随着企业使用场景多样性&#xff0c;对于存储设备上不再局限于存储&#xff0c;更强调安全和协作能力。 NAS相当于私有云部署的个人…
阅读更多...
SAP AIF BTI750

SAP AIF BTI750

第一章 AIF&#xff08;Application Interface Framework&#xff09;简介 AIF是什么&#xff1f;做什么用的&#xff1f; 功能简介 这样图很清楚的说明了AIF是什么&#xff0c;它是一个技术框架&#xff0c;它可以实施接口并且监控接口&#xff0c;以及解决消息处理期间出…
阅读更多...
Java 垃圾收集器

Java 垃圾收集器

堆内存示意图 垃圾收集算法 1.标记-清除算法 算法分为标记和清除两个阶段。标记出所有需要回收的对象&#xff0c;在标记完成后&#xff0c;统一回收。 缺点&#xff1a; 执行效率不稳定&#xff0c;若堆中有大量对象要被回收&#xff0c;这是必须进行大量标记和清除动作&a…
阅读更多...
Push-Relabel算法相关阅读

Push-Relabel算法相关阅读

Push-Relabel算法相关阅读1.Push-Relabel算法思想2.Push-Relabel算法原理示意图3.Push-Relabel算法具体实例4. 网络流各类算法简单总结与比较5. Push-Relabel 预流推进算法6. Push-Relabel算法(最大流)1.Push-Relabel算法思想 对于一个网络流图: 该算法直观可以这样理解&#…
阅读更多...
java乱码问题一次性解决

java乱码问题一次性解决

在我们编码生活中&#xff0c;最常见的就是乱码&#xff0c;我也是遇到好几次&#xff0c;现在我整理一下所有乱码的解决方式&#xff0c;可治99%乱码问题 设置文件编码属性 修改当前 Web 项目 Tomcat Server 的虚拟机输出选项 -Dfile.encodingUTF-8 IntelliJ IDEA 中自定义…
阅读更多...
AntDB入选《2022爱分析·信创厂商全景报告》

AntDB入选《2022爱分析·信创厂商全景报告》

近日&#xff0c;AntDB数据库成功入选《2022爱分析信创厂商全景报告》信创数据库全景地图。报告综合考虑企业关注度、行业落地进展等因素&#xff0c;遴选出在信创市场中具备成熟解决方案和落地能力的厂商。 图1 AntDB数据库入选证书 报告指出&#xff0c;数据库作为企业存储、…
阅读更多...
​力扣解法汇总790. 多米诺和托米诺平铺

​力扣解法汇总790. 多米诺和托米诺平铺

目录链接&#xff1a; 力扣编程题-解法汇总_分享记录-CSDN博客 GitHub同步刷题项目&#xff1a; https://github.com/September26/java-algorithms 原题链接&#xff1a;力扣 描述&#xff1a; 有两种形状的瓷砖&#xff1a;一种是 2 x 1 的多米诺形&#xff0c;另一种是形如…
阅读更多...
dubbo：docker安装dubbo-admin、zookeeper

dubbo：docker安装dubbo-admin、zookeeper

0.引言 我们在搭建dubbo框架时&#xff0c;需要安装一个dubbo-admin来管理服务已经配置文件&#xff0c;今天我们来看看如何通过docker快速搭建一个dobbo-admin 1. 安装 1、首先到dockerhub上搜索dubbo-admin的镜像源 2、可以看到两个引用较高的镜像源&#xff0c;第一个是a…
阅读更多...
了解区块链延迟和吞吐量

了解区块链延迟和吞吐量

大家鲜少提到如何正确地测量一个&#xff08;区块链&#xff09;系统&#xff0c;但它却是系统设计和评估过程中最重要的步骤。系统中有许多共识协议、各种性能的变量和对可扩展性的权衡。 然而&#xff0c;直到目前都没有一种所有人都认同的可靠方法&#xff0c;能够让人进行…
阅读更多...
Java#11(字符串练习)

Java#11(字符串练习)

目录 一.遍历字符串 1.public char charAt(int index): 根据索引返回字符 2.public int length(): 返回此字符串的长度 3.数组的长度:数组名.length 4.字符串的长度: 字符串对象.length() 二.统计字符个数 前提基础了解: 三.反转字符串 如何思路清晰的定义方法? 一.遍…
阅读更多...
力扣(LeetCode)891. 子序列宽度之和C++)

力扣(LeetCode)891. 子序列宽度之和C++)

数学推理 贡献法 由题意可知&#xff0c;子序列的内部顺序不影响宽度&#xff0c;所以可以对子序列排序。得到正序序列。 如 1234561~2~3~4~5~61 2 3 4 5 6 &#xff0c; 序列中数字 444 的下标 i3i3i3 &#xff0c;对于数字 444 &#xff0c; 最大值为 444 的子序列个数为 2…
阅读更多...
Web前端开发技术课程大作业——HTML5旅游景区景点(13页面)HTML+CSS+JavaScript

Web前端开发技术课程大作业——HTML5旅游景区景点(13页面)HTML+CSS+JavaScript

&#x1f468;‍&#x1f393;学生HTML静态网页基础水平制作&#x1f469;‍&#x1f393;&#xff0c;页面排版干净简洁。使用HTMLCSS页面布局设计,web大学生网页设计作业源码&#xff0c;这是一个不错的旅游网页制作&#xff0c;画面精明&#xff0c;排版整洁&#xff0c;内容…
阅读更多...
A-Level经济例题解析及练习Computing MPL and VMPL

A-Level经济例题解析及练习Computing MPL and VMPL

知识点&#xff1a;Computing MPL and VMPL例题&#xff1a; Question: Computing MPL and VMPL P $5/bushel. Find MPL and VMPL, fill them in the blank spaces of the table. Then graph a curve with VMPL on the vertical axis, L on horizontal axis.解析&#xff1a;…
阅读更多...
891. 子序列宽度之和（每日一难phase3-4）

891. 子序列宽度之和（每日一难phase3-4）

891. 子序列宽度之和 一个序列的 宽度 定义为该序列中最大元素和最小元素的差值。 给你一个整数数组 nums &#xff0c;返回 nums 的所有非空 子序列 的 宽度之和 。由于答案可能非常大&#xff0c;请返回对 109 7 取余 后的结果。 子序列 定义为从一个数组里删除一些&…
阅读更多...
简单工厂模式、工厂模式、抽象工厂模式和加入反射、配置优化后的抽象工厂模式之间的关系和区别

简单工厂模式、工厂模式、抽象工厂模式和加入反射、配置优化后的抽象工厂模式之间的关系和区别

通过两张图简单解释一下什么是简单工厂模式、工厂模式、抽象工厂模式 简单工厂模式是属于创建型模式&#xff0c;又叫做静态工厂方法&#xff08;Static Factory Method&#xff09;模式&#xff0c;但不属于23种GOF设计模式之一。简单工厂模式是由一个工厂对象决定创建出哪一种…
阅读更多...
Mac上 Word安装Mendeley插件

Mac上 Word安装Mendeley插件

Mac上 Word安装Mendeley插件问题背景解决方法针对Mendeley Desktop针对Mendeley Reference Manager参考链接问题背景 可能因如同时安装了Word和WPS等&#xff0c;导致Word上安装Mendeley插件失败&#xff08;Unable to install the Microsoft Word Plugin&#xff09;。目前网…
阅读更多...
协同细菌觅食优化算法（Matlab代码实现）

协同细菌觅食优化算法（Matlab代码实现）

&#x1f468;‍&#x1f393;个人主页&#xff1a;研学社的博客 &#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜…
阅读更多...
知识蒸馏IRG算法实战：使用ResNet50蒸馏ResNet18

知识蒸馏IRG算法实战：使用ResNet50蒸馏ResNet18

摘要 复杂度的检测模型虽然可以取得SOTA的精度&#xff0c;但它们往往难以直接落地应用。模型压缩方法帮助模型在效率和精度之间进行折中。知识蒸馏是模型压缩的一种有效手段&#xff0c;它的核心思想是迫使轻量级的学生模型去学习教师模型提取到的知识&#xff0c;从而提高学…
阅读更多...
Golang入门笔记（11）—— 包

Golang入门笔记（11）—— 包

使用包的原因&#xff1a; 1.不可能把所有的不同业务功能的函数都放在一个源文件中&#xff0c;这样不便于管理。通常的做法是&#xff1a;我们会把具有相同一些功能和业务的维度的函数&#xff0c;分门别类的放在不同的源文件中。 2.不同的包名&#xff0c;可以解决两个函数…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023