作业4

最新推荐文章于 2022-04-14 01:18:37 发布

always953

最新推荐文章于 2022-04-14 01:18:37 发布

阅读量252

点赞数

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

版权

<!DOCTYPE html>
	<html>
	<head>
	<title>作业2</title>
	<meta charset="utf-8">
	<style type="text/css">
	.beijing{
	width: 600px;
	height: 380px;
	background-color:white ;
	position: relative;
	}
	.one{
	width: 60px;
	height: 5px;
	position: relative;
	float: left;
	}
	.two{
	background-image: url(3.gif);
	width: 50px;
	height: 22px;
	position: relative;
	top: 10px;
	left: 20px;
	}
	.zi1{
	color: black;
	font-size: 10pt;
	font-family: arial;
	font-weight: 700;
	position: relative;
	left: 240px;
	float: left;
	}
	.zi2{
	color: black;
	font-size: 10pt;
	font-family: arial;
	font-weight: 700;
	position: relative;
	left: 270px;
	float: left;
	}
	.zi3{
	color: black;
	font-size: 10pt;
	font-family: arial;
	font-weight: 700;
	position: relative;
	left: 300px;
	float: left;
	}
	.three{
	background-image: url(2.gif);
	position: relative;
	width: 600px;
	height: 221px;
	top: 20px;
	}
	.four{
	color: black;
	font-size: 14pt;
	font-family: arial;
	font-weight: 700;
	position: relative;
	right: 100px;
	}
	.five{
	color: #BC583E;
	font-size: 60px;
	position: relative;
	top: -60px;
	left: 220px;
	}
	.six{
	color: black;
	}
	.seven{
	position: relative;
	left: 50px;
	font-size: 10px;
	color: #898C91;
	top: -90px
	}
	.eight{
	width: 80px;
	height: 20px;
	background-color: #E06B59;
	position: relative;
	left: 90px;
	top: -80px;
	border-radius: 10px;
	}
	.nine{
	color: white;
	text-align: center;
	font-size: 5px;
	font-family: arial;
	position: relative;
	top: 2px;
	left: 2px;
	}
	.ten{
	width: 600px;
	height: 80px;
	background-color: #46C6E3;
	position: relative;
	top: 20px;
	}
	.img1{
	background-image: url(4.gif);
	width: 40px;
	height: 25px;
	position: relative;
	left: 80px;
	top: 20px;
	}
	.img2{
	background-image: url(5.gif);
	width: 40px;
	height: 25px;
	position: relative;
	float: left;
	left: 240px;
	top: -5px;
	}
	.img3{
	background-image: url(6.gif);
	width: 40px;
	height: 30px;
	position: relative;
	left: 400px;
	top: -8px;
	}
	.a1{
	color: white;
	font-size: 12pt;
	font-weight: 700;
	float: left;
	position: relative;
	left: 70px;
	}
	.a2{
	color: white;
	font-size: 12pt;
	font-weight: 700;
	float: left;
	position: relative;
	left: 160px;

	}
	.a3{
	color: white;
	font-size: 12pt;
	font-weight: 700;
	float: left;
	position: relative;
	left: 260px;
	}
	.anniu{
	color: blue;
	font-size: 70px;
	position: relative;
	top: 94px;
	left: 183px;
	}
	</style>
	</head>
	<body>
	<div class="beijing">
	<div class="one" style="background: red;"></div>
	<div class="one" style="background: blue;"></div>
	<div class="one" style="background: green;"></div>
	<div class="one" style="background: orange;"></div>
	<div class="one" style="background: black;"></div>
	<div class="one" style="background: yellow;"></div>
	<div class="one" style="background: red;"></div>
	<div class="one" style="background: blue;"></div>
	<div class="one" style="background: green;"></div>
	<div class="one" style="background: orange;"></div>
	<div class="two"></div>
	<div class="zi1">CREATE</div>
	<div class="zi2">ABOUT</div>
	<div class="zi3">GALLERY</div>
	<div class="three">
	<div class="four">Let's Get Started</div>
	<div class="five">.</div>
	<div class="six"><b><</b></div>
	<div class="seven">Turn your photo into pince of dgtw</div>
	<div class="eight">
	<div class="nine">LARN MORE ></div>
	<div class="anniu"><a href="http://www.baidu.com">.</a></div>
	</div>
	</div>
	<div class="ten">
	<div class="img1"></div>
	<div class="img2"></div>
	<div class="img3"></div>
	<div class="a1">1.Upload</div>
	<div class="a2">2.Edit</div>
	<div class="a3">3.Enjoy</div>
	</div>
	</div>
	</body>
	</html>