HTML5 移动端页面示例 - 响应式布局和CSS样式 - 常规

<!DOCTYPE html>
<html>
<head>
	<meta charset='UTF-8'>
	<title>HTML5 移动端页面示例</title>
	<meta name='viewport' content='width=device-width, initial-scale=1.0'>
	<style>
		body {
			font-family: Arial, sans-serif;
			margin: 0;
			padding: 0;
			background-color: #f2f2f2;
		}
		.container {
			width: 100%;
			max-width: 600px;
			margin: 0 auto;
			padding: 20px;
			box-sizing: border-box;
			background-color: #fff;
			box-shadow: 0 0 10px rgba(0,0,0,0.3);
		}
		h1 {
			font-size: 28px;
			font-weight: bold;
			margin: 0 0 20px;
			text-align: center;
		}
		p {
			font-size: 16px;
			line-height: 1.5;
			margin: 0 0 10px;
		}
		button {
			display: block;
			width: 100%;
			padding: 10px;
			border: none;
			border-radius: 5px;
			background-color: #007bff;
			color: #fff;
			font-size: 16px;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<div class='container'>
		<h1>欢迎来到移动端页面</h1>
		<p>这是一个基于HTML5的移动端页面示例，包含了响应式布局和一些常用的CSS样式。</p>
		<button>点击这里</button>
	</div>
</body>
</html>