回到顶部案例(固定定位）导航栏案例(浮动、绝对定位)

最新推荐文章于 2024-07-24 10:40:52 发布

刚睡醒的网工

最新推荐文章于 2024-07-24 10:40:52 发布

阅读量129

点赞数 1

文章标签：前端 html

本文链接：https://blog.csdn.net/sml1692812762/article/details/139659077

版权

回到顶部

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#container{
				height: 5000px;
				border: 10px solid red;
			}
			#back-button{
				width: 100px;
				height: 100px;
				border: 10px solid rebeccapurple;
				text-align: center;
				line-height: 100px;
				position: fixed;
				right: 10px;
				top: 250px;
				
			}
		</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>
	</head>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		#container {
			width: 100%;
			height: 70px;
			background-color: chartreuse;
		}

		.menu {
			margin: auto;
			width: 300px;
		}

		.menu>div {
			color: white;
			font-size: 25px;
			float: left;
			height: 50px;
			line-height: 50px;
			padding: 10px 30px;
			position: relative;
		}

		.menu>div:hover {
			background-color: rebeccapurple;
		}
		.menu>div:hover>.option{
			display: block;
		}
		.option{
			background-color: red;
			position: absolute;
			width: 100px;
			padding: 10px;
			left: 0px;
			top: 70px;
			display: none;
		}
	</style>
	<body>
		<div id="container">
			<div class="menu">
				<div>手机1
				<div class="option">
					<div>华为</div>
					<div>小米</div>
					<div>苹果</div>
					<div>三星</div>
					</div>
				</div>
				<div>手机2</div>
			</div>
		</div>
	</body>