简单论坛网页HTML代码示例 - 构建你的在线社区 - 常规

<!DOCTYPE html>
<html>
<head>
	<title>论坛</title>
	<meta charset="UTF-8">
	<style>
		body {
			background-color: #f4f4f4;
		}
		.container {
			margin: 0 auto;
			width: 80%;
			background-color: #fff;
			padding: 20px;
			box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
		}
		h1 {
			text-align: center;
			font-size: 36px;
			color: #333;
			margin-bottom: 20px;
		}
		.form-container {
			background-color: #eee;
			padding: 20px;
			margin-bottom: 20px;
			box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
		}
		form {
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		input, textarea {
			margin: 10px 0;
			padding: 10px;
			border: none;
			border-radius: 5px;
			box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
			width: 100%;
			max-width: 500px;
		}
		textarea {
			height: 100px;
		}
		button {
			margin-top: 10px;
			padding: 10px;
			background-color: #333;
			color: #fff;
			border: none;
			border-radius: 5px;
			width: 100%;
			max-width: 500px;
			cursor: pointer;
		}
		.post-container {
			background-color: #fff;
			padding: 20px;
			margin-bottom: 20px;
			box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
		}
		.post-title {
			font-size: 24px;
			color: #333;
			margin-bottom: 10px;
		}
		.post-author {
			font-size: 14px;
			color: #666;
			margin-bottom: 5px;
		}
		.post-content {
			font-size: 18px;
			color: #333;
			margin-bottom: 10px;
		}
	</style>
</head>
<body>
	<div class='container'>
		<h1>欢迎来到论坛</h1>
		<div class='form-container'>
			<form>
				<label for='title'>标题</label>
				<input type='text' id='title' name='title' placeholder='请输入标题'>
				<label for='author'>作者</label>
				<input type='text' id='author' name='author' placeholder='请输入作者'>
				<label for='content'>内容</label>
				<textarea id='content' name='content' placeholder='请输入内容'></textarea>
				<button type='submit'>发布</button>
			</form>
		</div>
		<div class='post-container'>
			<div class='post-title'>这是一个帖子的标题</div>
			<div class='post-author'>作者：小明</div>
			<div class='post-content'>
				这是一个帖子的内容，这是一个帖子的内容，这是一个帖子的内容，这是一个帖子的内容，这是一个帖子的内容，这是一个帖子的内容，这是一个帖子的内容，这是一个帖子的内容，这是一个帖子的内容，这是一个帖子的内容，这是一个帖子的内容，这是一个帖子的内容，这是一个帖子的内容，这是一个帖子的内容，这是一个帖子的内容。
			</div>
		</div>
	</div>
</body>
</html>