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

目录

定制化开发源码与素材内容在文章最末，0积分下载。

基础Base.css引入(5分)

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

Base.css编码

  1. * {
  2.     margin: 0px;
  3.     padding: 0px;
  4.     box-sizing: border-box;
  5. }
  6.  
  7. ul {
  8.     list-style: none;
  9. }
  10.  
  11. .col-1 {
  12.     width: 8.33%;
  13.     float: left;
  14. }
  15.  
  16. .col-2 {
  17.     width: 16.66%;
  18.     float: left;
  19. }
  20.  
  21. .col-3 {
  22.     width: 25%;
  23.     float: left;
  24. }
  25.  
  26. .col-4 {
  27.     width: 33.33%;
  28.     float: left;
  29. }
  30.  
  31. .col-5 {
  32.     width: 41.66%;
  33.     float: left;
  34. }
  35.  
  36. .col-6 {
  37.     width: 50%;
  38.     float: left;
  39. }
  40.  
  41. .col-7 {
  42.     width: 58.33%;
  43.     float: left;
  44. }
  45.  
  46. .col-8 {
  47.     width: 66.66%;
  48.     float: left;
  49. }
  50.  
  51. .col-9 {
  52.     width: 75%;
  53.     float: left;
  54. }
  55.  
  56. .col-10 {
  57.     width: 83.33%;
  58.     float: left;
  59. }
  60.  
  61. .col-11 {
  62.     width: 91.66%;
  63.     float: left;
  64. }
  65.  
  66. .col-12 {
  67.     width: 100%;
  68.     float: left;
  69. }

定制化开发项目关键词注释：(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%的留白

框架编码：

  1. <!DOCTYPE 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.     <meta key="2022年11月18日09:20:08 老师付 H5考核练习题">
  11. </head>
  12.  
  13. <body>
  14.     <!--top-->
  15.     <div class="col-12" style="background-color: lightgray;height: 3vh;"></div>
  16.     <!-- 分隔符 -->
  17.     <div class="col-12" style="background-color: #fff;height: 2vh;"></div>
  18.     <!-- logo -->
  19.     <div class="col-12" style="height: 10vh;">
  20.         <div class="col-1" style="background-color: #fff;height: 10vh;"></div>
  21.         <div class="col-10" style="background-color: skyblue;height: 10vh;"></div>
  22.         <div class="col-1" style="background-color: #fff;height: 10vh;"></div>
  23.     </div>
  24.     <!-- banner -->
  25.     <div class="col-12" style="height: 50vh;">
  26.         <div class="col-1" style="background-color: #fff;height: 50vh;"></div>
  27.         <div class="col-10" style="background-color: lightblue;height: 50vh;"></div>
  28.         <div class="col-1" style="background-color: #fff;height: 50vh;"></div>
  29.     </div>
  30.     <!-- 列表 -->
  31.     <div class="col-12" style="height: 30vh;">
  32.         <div class="col-1" style="background-color: #fff;height: 30vh;"></div>
  33.         <div class="col-10" style="background-color: lightpink;height: 30vh;"></div>
  34.         <div class="col-1" style="background-color: #fff;height: 30vh;"></div>
  35.     </div>
  36.     <!-- 网站备案信息 -->
  37.     <div class="col-12" style="height: 5vh;">
  38.         <div class="col-1" style="background-color: #fff;height: 5vh;"></div>
  39.         <div class="col-10" style="background-color: #000;height: 5vh;"></div>
  40.         <div class="col-1" style="background-color: #fff;height: 5vh;"></div>
  41.     </div>
  42. </body>
  43.  
  44. </html>

文字填充：(20分)

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

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

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

文字编码：

top部分:

  1.     <!--top-->
  2.     <div class="col-12" style="background-color: lightgray;height: 3vh;">
  3.         <div class="col-1" style="height: 3vh;"></div>
  4.         <div class="col-10" style="height: 3vh;">
  5.             <ul class="left-ul">
  6.                 <style>
  7.                     .left-ul {
  8.                         width: 100%;
  9.                     }
  10.                     
  11.                     .left-ul li {
  12.                         width: 20%;
  13.                         float: left;
  14.                         text-align: center;
  15.                         line-height: 3vh;
  16.                     }
  17.                     
  18.                     .left-ul li:last-child:hover {
  19.                         cursor: pointer;
  20.                         color: #fff;
  21.                         background-color: #000;
  22.                     }
  23.                 </style>
  24.                 <li>《幸福·和谐·平安夜》</li>
  25.                 <li>Happiness·harmonious·Christmas Eve</li>
  26.                 <li>商务电话：0533-8888888</li>
  27.                 <li>全国订购热线：400-800-1314</li>
  28.                 <li>下载：APP</li>
  29.             </ul>
  30.         </div>
  31.         <div class="col-1" style="height: 3vh;"></div>
  32.     </div>

logo部分:

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

网站备案信息部分:

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

banner部分(10分)

1、banner背景图片(5分)

2、banner文字部分(5分)

banner编码：

  1.     <!-- banner -->
  2.     <div class="col-12" style="height: 50vh;">
  3.         <div class="col-1" style="background-color: #fff;height: 50vh;"></div>
  4.         <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: '宋体';">
  5.             老师付·祝学生们·平安夜幸福
  6.         </div>
  7.         <div class="col-1" style="background-color: #fff;height: 50vh;"></div>
  8.     </div>

列表部分(20分)

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

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

3、浮动效果(5分)

列表编码：

  1.     <!-- 列表 -->
  2.     <div class="col-12" style="height: 30vh;">
  3.         <div class="col-1" style="background-color: #fff;height: 30vh;"></div>
  4.         <div class="col-10" style="background-color: #fff;height: 30vh;">
  5.             <style>
  6.                 .list-box {
  7.                     border: 1px solid gray;
  8.                     box-shadow: 2px 2px 2px gray;
  9.                     height: 28vh;
  10.                     border-radius: 12px;
  11.                     margin-right: 1.5%;
  12.                     margin-left: 1.5%;
  13.                     text-align: center;
  14.                 }
  15.                 
  16.                 .list-box:hover {
  17.                     box-shadow: 4px 4px 4px black;
  18.                 }
  19.                 
  20.                 .list-box dl {
  21.                     width: 100%;
  22.                     height: 28vh;
  23.                 }
  24.                 
  25.                 .list-box dl img {
  26.                     border-radius: 12px;
  27.                     width: 100%;
  28.                     height: 25vh;
  29.                 }
  30.             </style>
  31.             <div class="list-box col-2">
  32.                 <dl>
  33.                     <dt><img src="imgs/list1.jpeg"/></dt>
  34.                     <dd>爱心Apple</dd>
  35.                 </dl>
  36.             </div>
  37.             <div class="list-box col-2">
  38.                 <dl>
  39.                     <dt><img src="imgs/list2.jpeg"/></dt>
  40.                     <dd>爱的礼盒</dd>
  41.                 </dl>
  42.             </div>
  43.             <div class="list-box col-2">
  44.                 <dl>
  45.                     <dt><img src="imgs/list3.jpeg"/></dt>
  46.                     <dd>幸福手办</dd>
  47.                 </dl>
  48.             </div>
  49.             <div class="list-box col-2">
  50.                 <dl>
  51.                     <dt><img src="imgs/list4.jpeg"/></dt>
  52.                     <dd>诉说爱巢</dd>
  53.                 </dl>
  54.             </div>
  55.             <div class="list-box col-2">
  56.                 <dl>
  57.                     <dt><img src="imgs/list5.jpeg"/></dt>
  58.                     <dd>私人订制</dd>
  59.                 </dl>
  60.             </div>
  61.         </div>
  62.         <div class="col-1" style="background-color: #fff;height: 30vh;"></div>
  63.     </div>

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

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

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

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

源码与素材下载地址：

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发