为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)}

测试结果截图：