简单的留言板网页

最新推荐文章于 2024-05-12 09:04:29 发布

原创最新推荐文章于 2024-05-12 09:04:29 发布 · 4.7k 阅读

49 ·

CC 4.0 BY-SA版权

html+css网页制作专栏收录该内容

25 篇文章

订阅专栏

本文提供了一个简单的留言板HTML页面布局示例，包括留言输入框、用户名输入框及发表按钮，并展示了两个样例留言条目。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>留言板</title>
	
<style type="text/css">
	.add{
		margin:0px auto;
		overflow: hidden;
		width: 600px;
	}
	.add textarea{
		width: 99%;
		height: 100px;
	}
	.add .user{
		float: left;
	}
	.add .btn{
		float: right;
	}
	.msg{
		width: 600px;
		margin: 20px auto;
		overflow: hidden;
	}
	.item{
		border:solid 1px #CCC;
		margin: 10px 0;
	}
	.item.user{
		float: left;
	}
	.item .time{
		float: right;
	}
</style>
</head>
<body>
	<div class="add">
		<textarea>留言内容</textarea>
		<input class="user" type="text">
		<input class="btn" type="button" value="发表">
	</div>
	<div class="msg">
		<div class="item">
			<span class="user">用户名1</span>
			<span class="time">2017.8.7</span>
			<p>我热爱学习，爱死学习了</p>
		</div>
		<div class="item">
			<span class="user">用户名2</span>
			<span class="time">2017.8.7</span>
			<p>我热爱你，爱死你了</p>
		</div>
	</div>
</body>
</html>