HTML网页设计：游戏导航和快捷回到顶部

wenmian_

于 2024-06-18 18:41:09 发布

阅读量243

点赞数 6

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/m0_59344541/article/details/139779317

版权

一、回到顶部按钮

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#container{
				height: 3000px;
				border: 3px solid blue;
			}
			#back-button{
				border: 3px solid darkred;
				height: 50px;
				width: 100px;
				text-align: center;
				line-height: 50px;
				color: aliceblue;
				background-color: orangered;
				position: fixed;
				top: 300px;
			}
		</style>
	</head>
	<body>
		<div id="container"></div>
		<div id="back-button">
			<a href="#container">回到顶部</a>
		</div>
	</body>
</html>

显示效果：

二、游戏导航栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				margin: 0;
				padding: 0;
			}
			ul>li{
				float: left;
				padding-left: 20px;
				padding-right: 20px;
				font-size: 30px;
				color: white;
				list-style: none;
				position: relative;
				
			}
			#container>div{
				width: 1200px;
				height: 100px;
				margin: auto;
				line-height: 100px;
				
			}
			#container{
				width: 100%;
				background-color: black;	
			}	
			
			ul>li:hover{
				background-color: royalblue;
			}
			ul>li:hover>#menu1{
				background-color: royalblue;
				display: block;
			}
			#menu1{
				width: 150px;
				display: none;
				text-align: center;
				position: absolute;
				left: 0px;
			}
			ul>li:hover>.menu2{
				background-color: royalblue;
				display: block;
			}
			.menu2{
				width: 170px;
				display: none;
				position: absolute;
				text-align: center;
				left: 0px;	
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div>
				<ul>
					<li>游戏1
					<div id="menu1">
						<div>游戏充值</div>
						<div>游戏代练</div>
						<div>游戏简介</div>
						<div>游戏外挂</div>
					</div>
					</li>
					<li>游戏2
					<div class="menu2">
						<div>光遇</div>
						<div>qq飞车</div>
						<div>第五人格</div>
						<div>王者荣耀</div>
						<div>球球大作战</div>
					</div>
					</li>
					<li>游戏3</li>
					<li>游戏4</li>
					<li>游戏5</li>
					<li>游戏6</li>
					<li>游戏7</li>
					<li>游戏8</li>
					<li>游戏9</li>
				</ul>
			</div>
		</div>
	</body>
</html>

显示效果：