web前端——页面设计

最新推荐文章于 2024-09-03 15:10:17 发布

vin77云虞

最新推荐文章于 2024-09-03 15:10:17 发布

阅读量4.3k

点赞数 9

文章标签：前端 css html

本文链接： https://blog.csdn.net/weixin_65997960/article/details/129645226

版权

该代码示例展示了如何使用CSS和JavaScript实现一个响应式的西华大学主页导航栏，包含多级菜单、鼠标悬停显示子菜单、图片缓存、动态时间显示以及用户信息输入与存储功能。通过弹性盒布局处理菜单的水平分布，利用display属性控制二级菜单的可见性，并通过事件监听处理鼠标进入和离开菜单项时的显示效果。此外，还利用本地存储保存用户的输入信息并在页面加载时恢复显示。

摘要由CSDN通过智能技术生成

为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.id
		num.value = user.num
		tel.value = user.tel

		function 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="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.id
		num.value = user.num
		tel.value = user.tel

		function 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>

测试结果截图：