用html写一个简单的网页并用css美化并用js制作响应式按钮

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>My Web Page</title>
	<style>
		body {
			background-color: #f2f2f2;
			font-family: Arial, sans-serif;
			margin: 0;
			padding: 0;
		}
<pre><code>	header {
		background-color: #333;
		color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px;
	}
	
	h1 {
		margin: 0;
		padding: 0;
	}
	
	nav {
		background-color: #666;
		color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px;
	}
	
	nav ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
		display: flex;
	}
	
	nav ul li {
		margin-right: 20px;
	}
	
	nav ul li:last-child {
		margin-right: 0;
	}
	
	nav ul li a {
		color: #fff;
		text-decoration: none;
		font-weight: bold;
	}
	
	main {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		padding: 10px;
	}
	
	article {
		background-color: #fff;
		box-shadow: 0 0 5px rgba(0,0,0,0.2);
		margin: 10px;
		padding: 10px;
		width: 300px;
	}
	
	article h2 {
		margin: 0;
		padding: 0;
	}
	
	article p {
		margin: 10px 0;
		padding: 0;
	}
	
	footer {
		background-color: #333;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 10px;
	}
	
	.btn {
		background-color: #4CAF50;
		border: none;
		color: #fff;
		padding: 10px 20px;
		text-align: center;
		text-decoration: none;
		display: inline-block;
		font-size: 16px;
		margin: 10px;
		cursor: pointer;
		border-radius: 5px;
	}
	
	.btn:hover {
		background-color: #3e8e41;
	}
	
	@media screen and (max-width: 600px) {
		nav ul {
			flex-direction: column;
		}
		
		nav ul li {
			margin-bottom: 10px;
		}
		
		main {
			flex-direction: column;
		}
		
		article {
			width: 100%;
		}
	}
&lt;/style&gt;
</code></pre>
</head>
<body>
	<header>
		<h1>My Web Page</h1>
		<a href="#" class="btn">Sign up</a>
	</header>
<pre><code>&lt;nav&gt;
	&lt;ul&gt;
		&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href=&quot;#&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;
	&lt;/ul&gt;
	
	&lt;form&gt;
		&lt;input type=&quot;text&quot; name=&quot;search&quot; placeholder=&quot;Search...&quot;&gt;
		&lt;button type=&quot;submit&quot;&gt;Go&lt;/button&gt;
	&lt;/form&gt;
&lt;/nav&gt;

&lt;main&gt;
	&lt;article&gt;
		&lt;h2&gt;Article 1&lt;/h2&gt;
		&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae orci eget sapien euismod suscipit. Nullam consequat nisi in nulla vehicula, quis porta ipsum efficitur. Morbi quis bibendum ante, quis malesuada urna. Sed ornare, nibh eu cursus vehicula, enim mauris dapibus nisi, nec tristique urna tortor vitae mauris. Sed eget efficitur massa. Nulla facilisi. Sed dolor nunc, consequat ut pretium vel, bibendum id ante.&lt;/p&gt;
		&lt;a href=&quot;#&quot; class=&quot;btn&quot;&gt;Read more&lt;/a&gt;
	&lt;/article&gt;
	
	&lt;article&gt;
		&lt;h2&gt;Article 2&lt;/h2&gt;
		&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae orci eget sapien euismod suscipit. Nullam consequat nisi in nulla vehicula, quis porta ipsum efficitur. Morbi quis bibendum ante, quis malesuada urna. Sed ornare, nibh eu cursus vehicula, enim mauris dapibus nisi, nec tristique urna tortor vitae mauris. Sed eget efficitur massa. Nulla facilisi. Sed dolor nunc, consequat ut pretium vel, bibendum id ante.&lt;/p&gt;
		&lt;a href=&quot;#&quot; class=&quot;btn&quot;&gt;Read more&lt;/a&gt;
	&lt;/article&gt;
	
	&lt;article&gt;
		&lt;h2&gt;Article 3&lt;/h2&gt;
		&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae orci eget sapien euismod suscipit. Nullam consequat nisi in nulla vehicula, quis porta ipsum efficitur. Morbi quis bibendum ante, quis malesuada urna. Sed ornare, nibh eu cursus vehicula, enim mauris dapibus nisi, nec tristique urna tortor vitae mauris. Sed eget efficitur massa. Nulla facilisi. Sed dolor nunc, consequat ut pretium vel, bibendum id ante.&lt;/p&gt;
		&lt;a href=&quot;#&quot; class=&quot;btn&quot;&gt;Read more&lt;/a&gt;
	&lt;/article&gt;
&lt;/main&gt;

&lt;footer&gt;
	&lt;p&gt;&amp;copy; 2021 My Web Page&lt;/p&gt;
&lt;/footer&gt;

&lt;script&gt;
	// Responsive button
	const button = document.querySelector('.btn');
	button.addEventListener('click', () =&gt; {
		button.classList.toggle('active');
	});
&lt;/script&gt;
</code></pre>
</body>
</html>