作业5

最新推荐文章于 2024-06-21 19:20:27 发布

always953

最新推荐文章于 2024-06-21 19:20:27 发布

阅读量230

点赞数

本文链接：https://blog.csdn.net/qq_17565675/article/details/40025421

版权

<!DOCTYPE html>
	<html>
	<head>
	<title>作业1</title>
	<meta charset="utf-8">
	<style type="text/css">
	.beijing{
	width: 346px;
	height: 418px;
	background-color: white;
	margin-top: 100px;
	margin-left: 200px;
	/border: groove;/
	position: relative;
	}
	.one{
	width: 346px;
	height: 102px;
	background-color: #4FC0E8;
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
	}
	.two{
	background-image: url(1.gif);
	width: 59px;
	height: 59px;
	position: relative;
	left: 35px;
	top: -35px;
	}
	.three{
	width: 124px;
	height: 60px;
	background-color: #4FC0E8;
	position: relative;
	left: 110px;
	top: 70px;
	border-radius: 50%;
	}
	.four{
	color: #4FC0E8;
	text-align: center;
	font-weight: 700;
	position: relative;
	top: 45px;
	font-size: 16pt;
	}
	.five{
	color: #B7B8BD;
	font-size: 10pt;
	position: relative;
	top: 60px;
	line-height: 20px;
	font-weight: 600;
	left: 12px;
	}
	.six{
	background-color: #4FC0E8;
	width: 346px;
	height: 80px;
	position: relative;
	top: 100px;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
	}
	.seven{
	text-align: center;
	color: white;
	font-size: 16pt;
	font-weight: 600;
	position: relative;
	top: 30px;
	font-family: Arial;
	}

	</style>
	</head>
	<body>
	<div class="beijing">
	<div class="one">
	<div class="three">
	<div class="two"></div>
	</div>
	</div>
	<div class="four">LOREM IP SUM DOLOR</div>
	<div class="five">Quisque posuere risus erat at scelerisque felis</br> pulvinar quis. Maecenas arcu lorem , laoreet at </br>
	duiin,hendrent mattis mi.Sed eu vehicula lectus </br>
	felis pulvinar quis.Maecenas arcu lorem,laoreet </br>
	at posuere risus erat</div>
	<div class="six">
	<div class="seven">LOAD MORE
	</div>
	</div>
	</div>
	</body>
	</html>