js实现页面中的楼层效果

最新推荐文章于 2023-07-12 11:00:03 发布

box--小盒

最新推荐文章于 2023-07-12 11:00:03 发布

阅读量507

点赞数

文章标签： javascript html5

本文链接：https://blog.csdn.net/Asher_lm/article/details/127931503

版权

本文介绍如何使用JavaScript和HTML5实现网页中的楼层导航功能，通过动态操作DOM元素，实现点击按钮跳转到相应楼层，提供良好的用户体验。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#warp{
				width: 800px;
				margin: 0 auto;
			}
			.box{
				width: 100%;
				height: 700px;
				background: red;
				color: #fff;
				text-align: center;
				font-size: 100px;
				border: 3px solid yellow;
			}
			.lis{
				list-style: none;
				position: fixed;
				top:50px;
				left:300px;
				width: 60px;
				/*display: none;*/
				transform: scale(0);
				transition: 1s;
			}
			li{
				width: 100%;
				height: 60px;
				border: 1px solid red;
				color: green;
				font-size: 15px;
				text-align: center;
				line-height: 60px;
				background: #ccc;
			}
			li:hover{
				background: yellow;
			}
		</style>
	</head>
	<body>
		<div id="warp">
			<div class="box">进口零食</div>