14.用定位的方式仿小米导航

最新推荐文章于 2022-08-25 19:38:47 发布

neilro

最新推荐文章于 2022-08-25 19:38:47 发布

阅读量302

点赞数

分类专栏： Div+Css 文章标签：定位导航

本文链接：https://blog.csdn.net/neilro/article/details/79157293

版权

Div+Css 专栏收录该内容

22 篇文章 2 订阅

订阅专栏

效果图：

注：主要是利用死图片实现定位的方式

素材：

代码：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>小米导航</title>
	<style type="text/css">
		/*先定义总宽高*/
		.main{
			width:1226px;
			height:460px;
			/*父相子绝定位*/
			position:relative;
		}
		/*定义导航栏宽高*/
		.nav{
			width:234px;
			height:457px;
			position:absolute;
			/*具体定位*/
			left:0;
			top:0;
		}
		/*定义左右箭头*/
		.left{
			position:absolute;
			/*具体定位*/
			left:250px;
			bottom:200px;
		}
		.right{
			position:absolute;
			/*具体定位*/
			right:20px;
			bottom:200px;
		}
	</style>
</head>
<body>
	<div class="main">
		<img src="images/111.jpg"/>
		<div class="nav">
			<img src="images/xiaom_left.png" />
		</div>
		<div class="left">
			<img src="images/left.png" />
		</div>
		<div class="right">
			<img src="images/right.png" />
		</div>
	</div>
</body>
</html>