Lab02 前端基础 #

实验目的 #

有效期限：2022-08-01 23:59

你可以在所给资源的homework文件夹中找到实验文档并填写

资源中的homework文件夹给出了一个模仿百度主页的网页（index.html），可是这个网页缺少了 CSS 和 JS 文件，你需要把附件文件夹中的 CSS 和 JS 代码引入到网页中

完成该环节的之后的网页截图

修改 index.js，使得点击搜索按钮后，浏览器会弹窗显示所搜索的内容。但是当搜索框为空的时候，点击搜索按钮后，浏览器会弹窗显示“请输入搜索内容”

搜索框为空的截图

点击后的截图

搜索框有内容的截图

再次点击后的截图

修改index.html，使热榜部分其尽可能与下方相似（温馨提示，请不要偷懒直接插一张截图进去，我们会看代码的），相关的图片放在了img文件下，其中把“《你的学号》”换成你真实的学号（例如20370000），如有必要可以注释原有的代码，但不要删除，因为后续的任务还会用到

修改完的网页截图

修改 index.js，使得在点击 ID 为 top-right 的元素之后，会调用 clickLogin 函数

点击前的截图

点击后的截图

点击登录按钮后，似乎用户已经正确地登录，但是页面似乎发生了一些错误。请尝试修改 initUserInfo 函数，使得用户登录后，页面显示依然正常。（使用审查元素分析网页变化）

点击后审查页面变化截图

修复后登录截图

将你的代码提交至远程仓库，github或者gitee均可（至少保留1周），并在实验文档中说明

这部分建议学有余力的同学看一看，可能需要你额外学习一些前端知识

在任务2 的基础上，使用户在搜索框按下回车的时候也可以进行搜索，并且会跳转到百度对应的搜索页面（处理键盘事件，链接外部页面）
在任务3的基础上加上醒目的大图，尽可能与下图相似（处理相对位置，没有思路可以去百度榜单F12看看他是怎么写的）
里面最显眼的那张图片并不是一个正方形哦，是一个圆角矩形，而且你可以发现我们所提供的原图是没有左上角的1标志，请思考如何引入

填写homework中的实验文档，简要阐明你的思路