day01作业

<!DOCTYPE html>
<head>
	<meta charset = 'utf-8'>
	<title>小生不才系列</title>
	<style type="text/css">
		h3{
			color: #008B8B;
			font-size: 18px;
		}
		.lead{
			text-align:center;
		}
		.one{
			width: 600px;
			height: 420px;
			margin: 0px auto;
			text-align: center;
			background-image: url(images/01.jpeg);
			background-size: 600px 420px;
			background-repeat: no-repeat;
			border-radius:15px;
			box-shadow:5px 5px 5px #888;
		}
		.two{
			width: 600px;
			height: 420px;
			margin: 0px auto;
			text-align: center;
			background-image: url(images/02.jpeg);
			background-size: 600px 420px;
			background-repeat: no-repeat;
			border-radius:15px;
			box-shadow:5px 5px 5px #888;
		}
		.three{
			width: 600px;
			height: 420px;
			margin: 0px auto;
			text-align: center;
			background-image: url(images/03.jpeg);
			background-size: 600px 420px;
			background-repeat: no-repeat;
			border-radius:15px;
			box-shadow:5px 5px 5px #888;
		}
		.four{
			width: 600px;
			height: 420px;
			margin: 0px auto;
			text-align: center;
			background-image: url(images/04.jpeg);
			background-size: 600px 420px;
			background-repeat: no-repeat;
			border-radius:15px;
			box-shadow:5px 5px 5px #888;
		}
		.five{
			width: 600px;
			height: 420px;
			margin: 0px auto;
			text-align: center;
			background-image: url(images/05.jpeg);
			background-size: 600px 420px;
			background-repeat: no-repeat;
			border-radius:15px;
			box-shadow:5px 5px 5px #888;
		}
		.p1{
			padding: 320px 60px 100px 30px;
			font-size: 16px;
			font-weight: bold;
			text-indent: 2em;
			
		}
		.p2{
			font-size: 16px;
			font-weight:bold;
			padding: 350px 60px 50px 30px;
			text-indent: 2em;
		}
		.p3{
			font-size: 16px;
			font-weight:bold;
			padding: 80px 350px 0px 20px;
			text-indent: 2em;
			line-height:1.5em;
		}
		.p4{
			font-size: 16px;
			font-weight:bold;
			padding: 60px 350px 0px 20px;
			text-indent: 2em;
			line-height:1.5em;
		}
		.p5{
			font-size: 16px;
			font-weight:bold;
			padding: 350px 60px 50px 30px;
			text-indent: 2em;
		}
	</style>
</head>
<body>
<div class = 'lead'>
	<h3 onmouseover="over(this)" onmouseout="out(this)">小生不才，姑娘莫怪，打扰了！</h3>
	<div class ='one'>
		<p class = 'p1'>
			小生不才，未得姑娘青睐，扰姑娘良久，姑娘莫怪，
			自此所有仰慕之意止于唇齿，掩于岁月，匿于年华。
			姑娘往南走，小生往北瞧，不再打扰姑娘，今生就此别过，
			望顾念日后善其身，遇良人予君欢喜，暖色浮余生。
		</p>
	</div>
	<div class = 'two'>
		<p class = 'p2'>小生不才，未能与姑娘谈笑风生，不知姑娘早已心有所属，
			经此一别，自是不必再相见了，爱慕之意，都且让它随风东去吧！
		</p>
	</div>
	<div class = 'three'>
		<p class = 'p3'>
			小生不才，留不住姑娘，但愿姑娘能留住意中人。
			从今往后，对姑娘所有爱慕定当厚土掩埋，不复存在。
			来年今日，许以一壶清酒，奠之!
		</p>
	</div>
	<div class = 'four'>
		<p class = 'p4'>	小生不才，未能成为姑娘心中所喜。只求来世，
			能成为姑娘心中所爱，不负此生旖旎之情。
		</p>
	</div>
	<div class = 'five'>
		<p class = 'p5'>	小生不才，不知如何取悦姑娘，让姑娘爱上他人。
			没能与姑娘西楼掌灯，却也不能将姑娘的心夺回。
		</p>
	</div>
</div>
<script type="text/javascript">
	function over(element){
		element.style.fontSize = '25px';
		element.style.color = 'brown';
	}
	function out(element){
		element.style.fontSize = '18px';
		element.style.color = '#008B8B';
	}
</script>
</body>
</html>
相关文章
