UI自动化测试中文本控件处理全攻略：定位、输入与封装实战
2026/9/16 17:24:01
简介：一套以《大鱼海棠》为主题的网页期末作业，包含 10 个页面，面向需要提交学校网站课程设计、静态网页或前端基础作业的学生。项目从文件夹规划到代码书写均按 Dreamweaver 常用规范整理，css、js、images 等目录区分清晰，并额外加入 404 错误页面，整体结构完整、布局统一，适合直接参考或二次修改。压缩包为 RAR 格式，共 215 个文件，整体约 23.62 MB。其中 HTML 页面、CSS 样式表、JavaScript 脚本各有 10、9、12 个，图片素材以 89 个 PNG 和 71 个 JPG 为主，同时附带 Less 源文件、字体图标、Bootstrap 与 jQuery 插件，分别负责页面结构、视觉表现、交互逻辑和响应式组件。已有 8070 人学习下载。拿到手后，可以通过分析目录划分和代码注释，快速理解静态网站的标准组织方式，也能借鉴其中导航菜单、轮播、动画和字体库的引入方法，把整套目录骨架与命名规范迁移到自己的期末作业中，减少从零起步的搭建成本。
1. 为什么一份10页的《大鱼海棠》作业要背上六个CSS
把压缩包解压，bootstrap.css、animate.css、jquery.mmenu.all.css、slick.css、font-awesome.min.css之外还躺着photo.css、error404.css、widget.css这些一看就是手工加的样式。这个组合很典型：Bootstrap 负责栅格和基础组件，slick 负责轮播，mmenu 负责移动端抽屉菜单，animate.css 做滚动动效，font-awesome 提供图标字体，剩下几个自定义 CSS 才是作业的“原创分”。学校检查这类静态网页作业，第一眼看的是文件结构和代码规整度，第二眼看的是交互细节。这篇文章就把这份 10 页作业的依赖关系、引用顺序、关键函数写法和提交前要过的检查项拆开讲一遍，适合正在补作业的学生，也适合没少给这类项目做“代上线”但不想背锅的工程师。
2. 页面骨架与依赖加载顺序：先让样式不打架
2.1 文件夹分工：作业检查第一步先看这里
静态网页作业的文件夹结构不需要多高级，但要让人一眼看得懂。常见做法是根目录放 10 个 HTML 页面，按页面角色命名，css/目录下把所有样式按用途拆开，js/目录存放插件和自定义脚本，images/按页面或模块建子目录，fonts/专门放 font-awesome 的字体文件。
big-fish/ ├── index.html ├── photo.html ├── about.html ├── culture.html ├── music.html ├── ... ├── 404.html ├── css/ │ ├── bootstrap.css │ ├── animate.css │ ├── style.css │ ├── photo.css │ ├── error404.css │ ├── slick.css │ └── widget.css ├── js/ │ ├── jquery.min.js │ ├── bootstrap.min.js │ ├── jquery.mmenu.all.js │ ├── slick.min.js │ └── main.js ├── fonts/ │ ├── fontawesome-webfont.eot │ ├── fontawesome-webfont.woff2 │ ├── fontawesome-webfont.woff │ └── fontawesome-webfont.ttf └── images/ ├── hero/ ├── gallery/ └── news/HTML 页面全部平铺在根目录，而不是塞进pages/子目录，这样href="photo.html"、href="about.html"就能直接写相对路径，评审老师双击就能打开，不需要起本地服务。文件名用连字符小写，不要用中文命名也不要混用拼音缩写，否则传到服务器上很容易出现大小写敏感导致的 404。字体文件是 font-awesome 最容易漏掉的一环，只保留fontawesome-webfont.eot会让现代浏览器图标全部变成方块，因为@font-face里通常同时声明了 eot、woff2、woff、ttf 四种格式，浏览器会按顺序选第一个能用的。
2.2 页面头部的CSS依赖排序
CSS 的加载顺序直接决定覆盖关系。这份作业里style.css覆盖 Bootstrap 默认值，所以必须放在 Bootstrap 后面；widget.css管理侧栏组件，和 Bootstrap 的 widget 类名没有冲突，但为了统一还是放在style.css之后。参考顺序：
<!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>大鱼海棠 - 首页</title> <!-- 1. 框架与第三方动画 --> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/animate.css"> <!-- 2. 插件样式 --> <link rel="stylesheet" href="css/slick.css"> <link rel="stylesheet" href="css/jquery.mmenu.all.css"> <!-- 3. 图标字体 --> <link rel="stylesheet" href="css/font-awesome.min.css"> <!-- 4. 自定义业务样式，放在最后 --> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/widget.css"> <link rel="stylesheet" href="css/photo.css"> </head>第三方的动画和插件样式放在自定义样式之前，是因为style.css里可能需要微调.slick-dots li button的颜色或.mm-menu的边框阴影，CSS 后面的规则会覆盖前面的规则。一个很容易踩的坑是：把animate.css放在style.css后面，然后在style.css里用animation-delay调整入场顺序，结果有些元素的animation简写属性被重置成默认值，动画就消失了。
2.3 jQuery插件的正确引入位置与初始化时机
CSS 放在<head>里，JavaScript 放在<body>底部，这是因为 jQuery 插件初始化时要操作 DOM，脚本放在后面能确保$(document).ready()执行时节点已经存在。顺序是 jQuery → Bootstrap → mmenu → slick → 自定义main.js，插件之间互相依赖就会报错。
<body> <!-- 页面主体 --> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/jquery.mmenu.all.js"></script> <script src="js/slick.min.js"></script> <script src="js/main.js"></script> </body>所有初始化脚本统一收敛到main.js，不要在页面里到处散落<script>标签。jquery.mmenu.all.js需要 jQuery 1.7 以上，学校作业常用的 jQuery 3.x 没问题；slick 同样依赖 jQuery，两个插件都要求$(function() { ... })包裹。初始化完成后，记得检查浏览器控制台有没有$ is not defined或者$(...).slick is not a function，前者说明 jQuery 没加载或加载顺序错了，后者说明 slick 的 JS 文件路径不对。
3. 首页轮播、相册与字体图标：三个高评分的静态交互
3.1 用slick实现首页主视觉轮播
首页主视觉是整份作业的评分重点。用 slick 做轮播比手写 setTimeout 切换要稳得多，内置了自动播放、圆点导航、无限循环和触摸滑动，不需要额外实现鼠标拖拽。HTML 结构里需要一个容器套若干个子元素：
<section class="hero-slick"> <div class="hero-slide" style="background-image: url('images/hero/big-fish-1.jpg');"> <h2>所有活着的人类，都是海里一条巨大的鱼</h2> <a href="about.html" class="btn btn-default">了解故事</a> </div> <div class="hero-slide" style="background-image: url('images/hero/big-fish-2.jpg');"> <h2>从出生开始，他们就是一条条大鱼</h2> </div> </section>对应的初始化代码放在main.js里：
$(function () { $(".hero-slick").slick({ autoplay: true, autoplaySpeed: 3500, dots: true, arrows: false, fade: true, pauseOnHover: true, speed: 800 }); });autoplay和autoplaySpeed控制是否自动播放和切换间隔，3500 毫秒比较适合展示型首页。fade: true使用淡入淡出过渡，适合大图背景；如果要横向滑动就删掉这一行。dots: true会在底部生成圆点导航，小圆点的样式默认是灰色，作业里通常会在style.css中覆盖.slick-dots li button的背景色，改成带主题感的暗红色。
如果只有两张轮播图还开了arrows: false，建议保留dots，否则用户会误以为页面静止了。轮播图自身高度建议在style.css里给.hero-slick设一个max-height，并用background-size: cover让图片填满容器，不然不同屏幕下首屏高度不一致。
3.2 相册页photo.css的栅格布局
相册页是这个项目里最需要自己写样式的地方。photo.css存在的意义就是别让所有图片都用 Bootstrap 的col-md-3一排排傻站，要么做瀑布流，要么做带悬停遮罩的网格。比较省事的做法是直接上 CSS Grid：
<div class="gallery-grid"> <a href="images/gallery/01.jpg" class="gallery-item"> <img src="images/gallery/01.jpg" alt="椿与湫"> <span class="gallery-title">椿与湫</span> </a> <a href="images/gallery/02.jpg" class="gallery-item"> <img src="images/gallery/02.jpg" alt="大鱼海棠"> </a> </div>/* photo.css */ .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; } .gallery-item { position: relative; overflow: hidden; border-radius: 6px; } .gallery-item img { width: 100%; min-height: 180px; object-fit: cover; transition: transform 0.4s ease; } .gallery-item:hover img { transform: scale(1.05); } .gallery-title { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 12px 8px; color: #fff; font-size: 14px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.6)); opacity: 0; transition: opacity 0.3s ease; } .gallery-item:hover .gallery-title { opacity: 1; }这段样式对搜索引擎和检查代码的老师都很友好：:hover伪类触发图片轻微放大和标题浮现，视觉效果接近完成度很高的站点。object-fit: cover能保证宽高比不一致的图片不会拉伸变形，这是很多新手最容易忽略的属性。IE11 不支持grid-template-columns里的auto-fill，但学校作业基本只看 Chrome，所以这个问题不用太纠结。
3.3 Font Awesome图标与字体文件路径
font-awesome.min.css是纯字体图标方案，它的图标不是图片，而是通过@font-face加载字体文件渲染出来的字符。这也是fontawesome-webfont.eot必须和 CSS 保持正确相对路径的原因。查看font-awesome.min.css开头的@font-face：
@font-face { font-family: 'FontAwesome'; src: url('../fonts/fontawesome-webfont.eot?v=4.7.0'); src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'); }如果你的压缩包里只有 eot 没有 woff2 和 ttf，建议从 FontAwesome 4.7 的官方包补全另外三个字体文件。使用时直接在 HTML 中写：
<p><i class="fa fa-heart"></i> 北冥有鱼</p> <p><i class="fa fa-film"></i> 国产动画</p> <p><i class="fa fa-music"></i> 印象曲</p>fa是基本类名，fa-heart、fa-film、fa-music分别对应不同字形。检查方法很简单：打开页面，如果看到一个小方块，说明字体文件没加载或路径不对，优先看浏览器 Network 面板里字体文件请求是否 404。
4. 移动端菜单与404兜底：响应式作业必须有的两个细节
4.1 jquery.mmenu给移动端导航加分
学校作业通常只检查 PC 端，但“响应式”这三个字写在题目里就能拉开差距。jquery.mmenu.all.css对应的jquery.mmenu.all.js提供一个移动端抽屉菜单：小屏下导航缩成一个汉堡按钮，点击后从左或右侧滑出菜单面板。这个插件的初始化需要一段导航结构：
<nav id="mobile-menu"> <ul> <li><a href="index.html">首页</a></li> <li><a href="photo.html">剧照相册</a></li> <li><a href="about.html">故事简介</a></li> <li><a href="culture.html">文化考据</a></li> </ul> </nav>然后在main.js里初始化：
$(function () { $("#mobile-menu").mmenu({ slidingSubmenus: true, navbar: { title: "大鱼海棠" }, extensions: ["theme-dark"] }); });slidingSubmenus让子菜单水平滑动，这个交互很多人一眼就能注意到。navbar.title会固定在抽屉顶部显示站点名称。extensions: ["theme-dark"]使用暗色主题，和《大鱼海棠》的红黑色调更搭。
mmenu 初始化后会把原导航替换成#mm-mobile-menu以及页面左上角自动生成一个汉堡按钮。如果页面里没有自动出现按钮，看一下代码结构：mmenu 要求html标签不能被手动加mm-js类，插件自己会加；如果页面里有多个 nav 元素，要检查初始化选择器是否写对。另外，桌面端隐藏这个抽屉菜单是用 media query 控制的，.mm-menu默认只在小屏显示，不需要手动display:none。
4.2 error404.css的兜底体验
10 个页面里专门放一个404.html，说明资源包里已经考虑了链接打错的情况。作业中做一个完整 404 页面的不多，这页反而容易拿印象分。HTML 写一个居中容器：
<main class="error404-wrap"> <span class="error404-code">404</span> <p class="error404-text">这条缝隙，恰好容一缕海棠花落进来。</p> <a class="btn btn-default" href="index.html">回首页</a> </main>error404.css里用 flex 垂直水平居中，再给数字做一个抢眼的渐变：
.error404-wrap { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; } .error404-code { font-size: 6rem; font-weight: 700; background: linear-gradient(135deg, #e05a7f, #7b3b58); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .error404-text { color: #999; margin: 20px 0 28px; }这里用了-webkit-background-clip: text做字体渐变，这个写法在 Chrome 和 Edge 下稳定，Firefox 也支持。如果遇到渐变不显示，确认-webkit-text-fill-color: transparent和background-clip: text同时存在，缺一个都会变白字。回首页按钮直接用 Bootstrap 的btn btn-default，避免又写一堆自定义样式。
4.3 常见布局错位排查
响应式作业最常见的四个问题：菜单没有汉堡按钮、轮播图在小屏下变形、图片溢出容器、字体图标显示方框。排查顺序建议先看控制台有没有加载错误，接着看 Network 面板里 CSS、JS、字体文件的状态码。mmenu 菜单不显示，八成是选择器错了或者 mmenu 的 JS 引入顺序在 jQuery 之前；轮播图变形，看.hero-slick是否有明确高度限制，必要时给img加上width: 100%; height: auto;；图片溢出容器，先检查img的max-width是否设置成100%。这些细节比多写一个页面更能体现规范程度。
5. 防“代做”审查的代码规范技巧
5.1 文件夹与命名的表面功夫
评作业的老师见过太多模板套壳，识别代做看的是这些细节：所有代码缩进是否一致、注释风格是否统一、有没有残留无用的引用、CSS 类名是不是成套。命名不要在style.css里用div1、box2，尽量语义化划分，比如.header-nav、.hero-slick、.gallery-item、.widget-news。HTML 页面标题要和文件名对得上，photo.html的<title>不能还是“首页”。同时检查有没有多余的空目录、占位图片、.DS_Store这类系统文件，一并清理。
5.2 CSS选择器与代码格式规范
作业里如果有一行写.gallery-item:hover .gallery-title，另一行写.gallery-item .gallery-title:hover，这种不一致很容易暴露“复制粘贴”。统一的做法是：所有选择器用小写字母，类名之间用连字符分隔；属性书写和缩进保持一致；同一份作业里要么都用单引号要么都用双引号。给一段推荐格式：
.widget-news { margin-bottom: 24px; padding: 20px; background: #f8f8f8; border-left: 3px solid #e05a7f; } .widget-news .widget-title { font-size: 16px; font-weight: 700; margin-bottom: 12px; }每一条规则之间留一个空行，块和块之间也分开。不要使用@import加载其他 CSS，因为@import会阻塞渲染，而且 Dreamweaver 的“检查浏览器兼容性”功能会对@import报警告。也不用在 HTML 里写大段<style>，统一收进外部样式表。
5.3 一套可执行的提交前检查
结尾收在一个实用表格上，把提交前要过的检查项列清楚，同时补上几个页面执行期实用的 JS 小函数，比如返回顶部、金额保留两位小数、字符串包含判断。这是作业里“额外加分”的部分，代码量小，但效果直接：
// 返回顶部 $("#back-top").on("click", function () { $("html, body").animate({ scrollTop: 0 }, 400); }); // 金额保留两位小数 var total = 198.5; console.log(total.toFixed(2)); // "198.50" // 判断当前页面是否包含某个字符串 if (location.pathname.indexOf("photo") !== -1) { $(".gallery-grid").addClass("is-photo-page"); }toFixed(2)会返回字符串类型，如果后续还要做加法，记得用parseFloat()转回数值，这是新手最容易踩的类型坑。indexOf判断页面名比正则简单直接，但注意indexOf("photo")也会匹配photocopy，如果只匹配独立页面，用location.pathname.includes("/photo.html")，includes是 ES6 方法，现代浏览器都认。返回顶部按钮记得只在页面滚动超过一定距离后显示，加一行滚动监听：
$(window).on("scroll", function () { $("#back-top").toggle($(window).scrollTop() > 300); });提交前对照这份检查表：类名命名风格一致、图片格式统一为 jpg 或 webp、所有页面<title>不同、动画时长统一在 0.3 秒到 0.8 秒之间、没有重复初始化同一个插件、移动端 375px 宽度下菜单正常弹出。能做到这几点，就是一份“表面功夫做足、内部也不露怯”的作业成品。
本文还有配套的精品资源，点击获取