韩国女团成员信息 | 成立时间 | 首页 - 浮动定位网页设计 - 常规

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>韩国女团成员信息 | 成立时间 | 首页</title>
	<style>
		/* 设置页面外观 */
		body {
			font-family: Arial, sans-serif;
			background-color: #f5f5f5;
			margin: 0;
			padding: 0;
		}
<pre><code>	/* 设置标题样式 */
	h1 {
		font-size: 36px;
		text-align: center;
		margin-top: 50px;
		margin-bottom: 30px;
	}

	/* 设置包含整个页面的容器样式 */
	.container {
		width: 960px;
		margin: 0 auto;
		background-color: #fff;
		padding: 20px;
		box-sizing: border-box;
	}

	/* 设置成员信息卡片样式 */
	.member {
		float: left;
		width: 300px;
		height: 400px;
		margin: 20px;
		padding: 20px;
		background-color: #fff;
		box-sizing: border-box;
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
	}

	.member img {
		width: 100%;
		height: 300px;
		object-fit: cover;
	}

	.member h2 {
		font-size: 24px;
		margin-top: 10px;
		margin-bottom: 5px;
	}

	.member p {
		font-size: 16px;
		line-height: 1.5;
		margin: 0;
	}

	/* 设置成立时间样式 */
	.time {
		float: right;
		width: 300px;
		height: 200px;
		margin: 20px;
		padding: 20px;
		background-color: #fff;
		box-sizing: border-box;
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
		text-align: center;
	}

	.time h2 {
		font-size: 24px;
		margin-top: 10px;
		margin-bottom: 5px;
	}

	.time p {
		font-size: 18px;
		margin: 0;
		line-height: 1.5;
	}

	/* 设置首页样式 */
	.home {
		clear: both;
		text-align: center;
		margin-top: 50px;
	}

	.home a {
		display: inline-block;
		background-color: #ff69b4;
		color: #fff;
		padding: 10px 20px;
		font-size: 20px;
		border-radius: 5px;
		text-decoration: none;
		transition: background-color 0.3s;
	}

	.home a:hover {
		background-color: #ff5e9b;
	}
&lt;/style&gt;
</code></pre>
</head>
<body>
	<div class="container">
		<h1>韩国女团成员信息</h1>
		<div class="member">
			<img src="https://cdn.pixabay.com/photo/2017/01/16/20/44/girls-1981779_960_720.jpg" alt="成员照片">
			<h2>成员姓名</h2>
			<p>年龄：18岁</p>
			<p>身高：165cm</p>
			<p>所属公司：xxx</p>
		</div>
		<div class="member">
			<img src="https://cdn.pixabay.com/photo/2017/08/07/16/45/girls-2609647_960_720.jpg" alt="成员照片">
			<h2>成员姓名</h2>
			<p>年龄：20岁</p>
			<p>身高：170cm</p>
			<p>所属公司：xxx</p>
		</div>
		<div class="member">
			<img src="https://cdn.pixabay.com/photo/2017/01/16/20/44/girls-1981779_960_720.jpg" alt="成员照片">
			<h2>成员姓名</h2>
			<p>年龄：19岁</p>
			<p>身高：168cm</p>
			<p>所属公司：xxx</p>
		</div>
		<div class="time">
			<h2>成立时间</h2>
			<p>2014年1月1日</p>
			<p>已成立X年</p>
		</div>
		<div class="home">
			<a href="#">返回首页</a>
		</div>
	</div>
</body>
</html>