使用绝对定位来实现拉手网上的效果

CSS 快速掌握 admin 384浏览
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/*第一步清除内填充与外边框样式*/
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 308px;
				height: 196px;
				border: 1px solid #f90;
				margin: 100px auto;
				position: relative;/*相对定位*/
			}
			.box span{
				position: absolute;/*设置绝对定位*/
				/*绝对定位的坐标来实现*/
				left:20px;
				top: -30px;
			}
		</style>
	</head>
	<body>
		<!-- div.box>span+div -->
		<div class="box">
			<span><img src="./images/myy.jpg" ></span>
			<div><img src="./images/hlg.jpg" ></div>
		</div>
	</body>
</html>

转载请注明:大灰牛博客 » 使用绝对定位来实现拉手网上的效果