web前端——页面设计

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

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

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

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>西华大学</title><style>* {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%;}</style><script>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 < item.length; i++) {item[i].addEventListener("mouseover", mouserOver)item[i].addEventListener("mouseout", mouserOut)}function mouserOver() {this.children[1].classList.add('block')}function mouserOut() {this.children[1].classList.remove('block')}setInterval("document.getElementById('datetime').innerHTML=new Date().toLocaleString();", 500);document.getElementById('frequency').innerHTML = m})window.addEventListener("beforeunload", () => {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)}</script>
</head><body><ul class="nav"><li class="menu-item"><a href="http://www.xhu.edu.cn">学校概况</a><ul class="sub-menu"><li><a href="http://www.xhu.edu.cn" target="new">西华简介</a></li><li>历史沿革</li><li>现任领导</li><li>西华标识</li><li>西华影像</li></ul></li><li class="menu-item"><a href="http://www.xhu.edu.cn">机构设置</a><ul class="sub-menu"><li>学院</li><li>部门</li></ul></li><li class="menu-item"><a href="http://www.xhu.edu.cn">人才培养</a><ul class="sub-menu"><li>师资队伍</li><li>本科教育</li><li>研究生教</li><li>留学生教育</li><li>专科教育</li><li>继续教育</li></ul></li><li class="menu-item"><a href="http://www.xhu.edu.cn">科学研究</a><ul class="sub-menu"><li>科研信息</li><li>科研成果</li><li>学科科研平台</li><li>学术期刊</li></ul></li><li class="menu-item"><a href="http://www.xhu.edu.cn">招生就业</a><ul class="sub-menu"><li>本专科招生</li><li>研究生招生</li><li>继续教育招生</li><li>就业信息</li></ul></li><li class="menu-item"><a href="http://www.xhu.edu.cn">合作交流</a><ul class="sub-menu"><li>国际交流与合作</li><li>地方合作</li><li>西华大学科技园</li><li>国际教育学院</li></ul></li><li class="menu-item"><a href="http://www.xhu.edu.cn">公共服务</a><ul class="sub-menu"><li>学校校历</li><li>网络服务</li><li>招标投标</li><li>后勤服务</li><li>办公电话</li></ul></li><li class="menu-item"><a href="http://www.xhu.edu.cn">人才招聘</a></li></ul><div id="bg"><img src="data:images/bg.jpg"></div><div class="form">姓名<input value="" type="text" id="name"> 学号<input value="" type="number" id="num"> 电话<input value="" type="tel" id="tel"><button onclick=add()>提交</button><div id="datetime">时间</div><span class="times">历史浏览次数:<span id="frequency">0</span></span></div>
</body></html>

css：

 <style>* {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%;}</style>

新增HTML：

<div class="form">姓名<input value="" type="text" id="name"> 学号<input value="" type="number" id="num"> 电话<input value="" type="tel" id="tel"><button onclick=add()>提交</button><div id="datetime">时间</div><span class="times">历史浏览次数:<span id="frequency">0</span></span></div>

js脚本：

<script>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 < item.length; i++) {item[i].addEventListener("mouseover", mouserOver)item[i].addEventListener("mouseout", mouserOut)}function mouserOver() {this.children[1].classList.add('block')}function mouserOut() {this.children[1].classList.remove('block')}setInterval("document.getElementById('datetime').innerHTML=new Date().toLocaleString();", 500);document.getElementById('frequency').innerHTML = m})window.addEventListener("beforeunload", () => {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)}</script>

测试结果截图：

web前端——页面设计相关推荐

Web前端页面设计流程及注意事项，谨记！
每天我们打开电脑,看到各种各样的web前端页面.你知道他们是如何制作的吗?为了让页面更具有规范性,让使用者更加方便,在制作页面过程中必须遵循一定的设计流程.在这里就为大家详细介绍一下制作一个Web前端 ...
web前端页面设计海贼王动漫网页作业 HTML+CSS简单的学生网页作业源码
前端交接文档_开发型Web前端和设计型Web前端的区别是什么？
小编说学Web前端,你弄懂开发型Web前端和设计型Web前端的区别了吗?今天千锋广州小编给大家梳理一下设计型Web前端做什么?都要学习什么? 想必大家也会遇到这种情况,要做一个项目,产品经理说产品原型 ...
因分辨率变化html页面布局跳动_Web前端页面设计流程及注意事项，谨记！
每天我们打开电脑,看到各种各样的web前端页面.你知道他们是如何制作的吗?为了让页面更具有规范性,让使用者更加方便,在制作页面过程中必须遵循一定的设计流程.在这里就为大家详细介绍一下制作一个Web前端 ...
web前端页面性能优化SEO优化
首先什么叫网站? 网站一般分为前端和后台.我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等.而前端应该是属于功能的表现.并且影响用户访问体验的绝大部分来自前端页 ...
web前端页面优化——个人见解
web前端页面优化,我们从JavaScript.css.html这3个方面说下,我的见解,希望大神们能有刚好优化方法,一起探讨. 一. 有关javascript方面优化见解. 1. 首先举个例子: ...
Web前端页面的浏览器兼容性测试心得（三）总结一些IE8兼容问题的解决方案
Web前端页面的浏览器兼容性测试心得(三)总结一些IE8兼容问题的解决方案参考文章: (1)Web前端页面的浏览器兼容性测试心得(三)总结一些IE8兼容问题的解决方案 (2)https://www. ...
HTML5期末大作业：橙色精美零食网站设计——橙色精美零食(3页) web前端课程设计_web前端课程设计代码,web课程设计-HTML网页制作代码
HTML5期末大作业:橙色精美零食网站设计--橙色精美零食(3页) web前端课程设计_web前端课程设计代码,web课程设计-HTML网页制作代码常见网页设计作业题材有个人. 美食. 公司. 学 ...
HTML5期末大作业：商城网站设计——蘑菇街商城(1页) HTML+CSS+JavaScript web前端课程设计_web前端课程设计代码,web课程设计-HTML网页制作代码
HTML5期末大作业:商城网站设计--蘑菇街商城(1页) HTML+CSS+JavaScript web前端课程设计_web前端课程设计代码,web课程设计-HTML网页制作代码常见网页设计作业题材 ...

web前端——页面设计

web前端——页面设计相关推荐

最新文章

热门文章