web前端——页面设计

为xhu.html添加CSS样式，设计实现西华大学主页导航栏的多级菜单，除了本实验明确要求的设置之外，页面效果应尽可能与西华大学首页导航栏一致，主要要求：

1. 设置导航栏菜单横向分布，当鼠标经过导航栏主菜单项时，显示相应的二级子菜单，一、二级菜单的菜单项宽度一致，见图1；
2. 导航菜单和展示图应能随浏览器窗口宽度自适应变化，但应能确保导航栏主菜单项始终单行横向分布，并且导航栏一级、二级菜单项中的超链接文本应能始终单行显示且宽度一致，见图2；
3. 不能更改原HTML文本，包括不能添加任何类名和ID属性！
4. 编写应用缓存文件，缓存页面中图像；
5. 在页面图片下方动态显示当前时间，历史浏览次数，添加姓名、学号、电话输入域和一个普通提交按钮（不要使用submit），如果用户曾经提交过信息，则打开页面时在输入域默认显示用户历史信息。（相关布局和元素样式自行设计）。

友情提示：推荐使用弹性盒布局设计导航栏； 二级菜单的显示与隐藏display属性；二级菜单的定位采用position定位。

* {padding: 0;margin: 0;}body {font-size: 18px;color: white;}a {text-decoration: none;color: white;/*color:white;*/}ul {position: relative;background: #0e6bc2;height: 50px;width: auto;list-style: none;}li {background: #0e6bc2;min-width: 144px;width: auto;height: 50px;line-height: 50px;}li:hover {background-color: #005691;}div {box-sizing: border-box;/*便于对齐，免受各类型元素padding不一致的影响*/}.nav {display: flex;justify-content: center;flex-wrap: nowrap;width: 100%;}.sub-menu {display: none;}.menu-item {display: block;text-align: center;}#bg {margin: 0 auto;max-width: 1400px;}img {width: 100%;}.block {display: block;}input {outline-style: none;border: 1px solid #ccc;border-radius: 3px;padding: 3px 4px;width: 200px;font-size: 14px;font-weight: 200;}.form {color: black;margin: 0 auto;max-width: 1400px;}#datetime {font-size: 20px;background: linear-gradient(to right, rgb(53, 177, 72), rgb(118, 7, 7));-webkit-background-clip: text;color: transparent;}.times {letter-spacing: 0.2rem;font-size: 1.2rem;background-image: -webkit-linear-gradient(left, #961414, #9005e6 10%, #142396 10%, #05e679 50%, #879614);-webkit-text-fill-color: transparent;-webkit-background-clip: text;-webkit-background-size: 200% 100%;}var user = JSON.parse(localStorage.getItem('user')) || []var m = parseInt(localStorage.getItem('times')) || 1;console.log(m);window.addEventListener("load", () => {let item = document.getElementsByClassName('menu-item')for (let i = 0; i  {m++;console.log(m);localStorage.setItem('times', JSON.stringify(m))})nam = document.getElementById("name")num = document.getElementById("num")tel = document.getElementById("tel")nam.value = user.idnum.value = user.numtel.value = user.telfunction local(value) {localStorage.setItem('user', JSON.stringify(value))}function add() {const nam = {id: document.getElementById('name').value,num: document.getElementById('num').value,tel: document.getElementById('tel').value,}local(nam)}
学校概况
西华简介
历史沿革
现任领导
西华标识
西华影像
机构设置
学院
部门
人才培养
师资队伍
本科教育
研究生教
留学生教育
专科教育
继续教育
科学研究
科研信息
科研成果
学科科研平台
学术期刊
招生就业
本专科招生
研究生招生
继续教育招生
就业信息
合作交流
国际交流与合作
地方合作
西华大学科技园
国际教育学院
公共服务
学校校历
网络服务
招标投标
后勤服务
办公电话
人才招聘
姓名 学号 电话提交时间历史浏览次数:0

css：

 * {padding: 0;margin: 0;}body {font-size: 18px;color: white;}a {text-decoration: none;color: white;/*color:white;*/}ul {position: relative;background: #0e6bc2;height: 50px;width: auto;list-style: none;}li {background: #0e6bc2;min-width: 144px;width: auto;height: 50px;line-height: 50px;}li:hover {background-color: #005691;}div {box-sizing: border-box;/*便于对齐，免受各类型元素padding不一致的影响*/}.nav {display: flex;justify-content: center;flex-wrap: nowrap;width: 100%;}.sub-menu {display: none;}.menu-item {display: block;text-align: center;}#bg {margin: 0 auto;max-width: 1400px;}img {width: 100%;}.block {display: block;}input {outline-style: none;border: 1px solid #ccc;border-radius: 3px;padding: 3px 4px;width: 200px;font-size: 14px;font-weight: 200;}.form {color: black;margin: 0 auto;max-width: 1400px;}#datetime {font-size: 20px;background: linear-gradient(to right, rgb(53, 177, 72), rgb(118, 7, 7));-webkit-background-clip: text;color: transparent;}.times {letter-spacing: 0.2rem;font-size: 1.2rem;background-image: -webkit-linear-gradient(left, #961414, #9005e6 10%, #142396 10%, #05e679 50%, #879614);-webkit-text-fill-color: transparent;-webkit-background-clip: text;-webkit-background-size: 200% 100%;}

新增HTML：

姓名 学号 电话提交时间历史浏览次数:0

js脚本：

var user = JSON.parse(localStorage.getItem('user')) || []var m = parseInt(localStorage.getItem('times')) || 1;console.log(m);window.addEventListener("load", () => {let item = document.getElementsByClassName('menu-item')for (let i = 0; i  {m++;console.log(m);localStorage.setItem('times', JSON.stringify(m))})nam = document.getElementById("name")num = document.getElementById("num")tel = document.getElementById("tel")nam.value = user.idnum.value = user.numtel.value = user.telfunction local(value) {localStorage.setItem('user', JSON.stringify(value))}function add() {const nam = {id: document.getElementById('name').value,num: document.getElementById('num').value,tel: document.getElementById('tel').value,}local(nam)}

测试结果截图：