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

程序员文章站 2022-04-18 08:26:00

...

效果图：

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

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

素材：

代码：

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