HTML+CSS问答详情页案例教程 - 构建简洁易读的问答页面 - 常规

<!DOCTYPE html>
<html>
<head>
	<title>问答详情页</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			font-family: Arial, sans-serif;
			background-color: #f5f5f5;
		}
		header {
			background-color: #fff;
			padding: 20px;
			border-bottom: 1px solid #ddd;
		}
		h1 {
			margin: 0;
			font-size: 24px;
			color: #333;
		}
		.container {
			max-width: 800px;
			margin: 0 auto;
			padding: 20px;
			background-color: #fff;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		}
		.question {
			margin-bottom: 20px;
		}
		.question h2 {
			margin: 0;
			font-size: 20px;
			color: #333;
		}
		.question p {
			margin: 10px 0;
			font-size: 16px;
			color: #666;
		}
		.answer {
			margin-bottom: 20px;
		}
		.answer h3 {
			margin: 0;
			font-size: 18px;
			color: #333;
		}
		.answer p {
			margin: 10px 0;
			font-size: 16px;
			color: #666;
		}
	</style>
</head>
<body>
	<header>
		<h1>问答详情页</h1>
	</header>
	<div class='container'>
		<div class='question'>
			<h2>什么是HTML？</h2>
			<p>HTML是一种标记语言，用于创建网页。它由一系列标签组成，每个标签都有特定的含义和用途。</p>
		</div>
		<div class='answer'>
			<h3>HTML有哪些常用标签？</h3>
			<p>常用的HTML标签包括：&lt;html&gt;、&lt;head&gt;、&lt;title&gt;、&lt;body&gt;、&lt;div&gt;、&lt;p&gt;、&lt;a&gt;、&lt;img&gt;、&lt;ul&gt;、&lt;ol&gt;、&lt;li&gt;等等。</p>
		</div>
		<div class='answer'>
			<h3>如何创建一个链接？</h3>
			<p>使用&lt;a&gt;标签可以创建一个链接，例如：&lt;a href='http://www.example.com'&gt;这是一个链接&lt;/a&gt;，其中href属性指定链接的目标地址。</p>
		</div>
		<div class='answer'>
			<h3>如何插入一张图片？</h3>
			<p>使用&lt;img&gt;标签可以插入一张图片，例如：&lt;img src='example.jpg' alt='示例图片'&gt;，其中src属性指定图片的地址，alt属性为图片添加描述性文本。</p>
		</div>
	</div>
</body>
</html>