悬浮练习（街道）_设计一个联系人,完成一个对联系人增删改查的操作流程,所有的联系人信息储存在arra-CSDN博客

本文链接：https://blog.csdn.net/weixin_44017261/article/details/84998049

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="UTF-8">
			<title></title>
			<style type="text/css">
				*{
					padding: 0PX;
					margin: 0PX;
				}
				.c2{
					margin: 220px auto;
					
					width: 1200px;
					/*background: #7C8E87;*/
				}
				.c1{
					width: 260px;
					height: 300px;
					padding: 8px 8px;
					border: 2px solid white;	
				}
				.c1:hover{
					border: 2px solid #90c7d6;
				}
				.a1,.a2,.a3,.a4{
					background-image: url(img/360截图20181213133428644.jpg);
					width: 230px;
					height: 230px;
					margin: 0px auto;
				}
				p{
					padding: 4px;
				}
				.c1{
					display: inline-block
				}
				a{
					text-decoration: none;
                    color: #000000;  
				}
			</style>
		</head>
		<body>
			<div class="c2"> 
				<div class="c1">
					<div class="a1"></div>
					<p><b>昌平区城北街道</b></p>
					<p style="text-indent: 15px; background-image: url(img/360截图20181213142528263.jpg); background-repeat: no-repeat;"><a href="">昌平区东关十字路口东北侧</a></p>
				</div>
				<div class="c1">
					<div class="a2"></div>
					<p><b>昌平区城北街道</b></p>
					<p style="text-indent: 15px; background-image: url(img/360截图20181213142528263.jpg); background-repeat: no-repeat;"><a href="">昌平区东关十字路口东北侧</a></p>
				</div>
				<div class="c1">
					<div class="a3"></div>
					<p><b>昌平区城北街道</b></p>
					<p style="text-indent: 15px; background-image: url(img/360截图20181213142528263.jpg); background-repeat: no-repeat;"><a href="">昌平区东关十字路口东北侧</a></p>
				</div>
				<div class="c1">
					<div class="a4"></div>
					<p><b>昌平区城北街道</b></p>
					<p style="text-indent: 15px; background-image: url(img/360截图20181213142528263.jpg); background-repeat: no-repeat;"><a href="">昌平区东关十字路口东北侧</a></p>
				</div>
			</div>
		</body>
	</html>