<!DOCTYPE html>
<html>
<head>
	<title>个人信息登记</title>
	<style>
		body {
			background-image: url("https://www.w3schools.com/w3images/fjords.jpg");
			background-size: cover;
		}
		table {
			border-collapse: collapse;
			width: 50%;
			margin: auto;
			background-color: #8BC34A;
		}
		th {
			padding: 10px;
			background-color: #fff;
			color: #000;
			font-weight: bold;
			text-align: center;
		}
		td {
			padding: 10px;
			background-color: #fff;
			color: #000;
			text-align: center;
		}
		input[type="radio"], input[type="checkbox"] {
			transform: scale(1.5);
			margin-right: 10px;
		}
		input[type="file"] {
			margin-top: 10px;
		}
		h1 {
			text-align: center;
			color: #fff;
			font-weight: bold;
			margin-top: 50px;
		}
	</style>
</head>
<body>
	<h1>个人信息登记</h1>
	<table>
		<tr>
			<th>项目</th>
			<th>内容</th>
		</tr>
		<tr>
			<td>姓名</td>
			<td><input type="text" maxlength="5" /></td>
		</tr>
		<tr>
			<td>性别</td>
			<td>
				<label><input type="radio" name="gender" value="male" />男</label>
				<label><input type="radio" name="gender" value="female" />女</label>
			</td>
		</tr>
		<tr>
			<td>爱好</td>
			<td>
				<label><input type="checkbox" name="hobby" value="reading" />阅读</label>
				<label><input type="checkbox" name="hobby" value="music" />音乐</label>
				<label><input type="checkbox" name="hobby" value="sports" />运动</label>
			</td>
		</tr>
		<tr>
			<td>上传文件</td>
			<td><input type="file" /></td>
		</tr>
	</table>
</body>
</html>
写一个网页背景引用网上的动物图片表格绿色表单红色标题白色加粗居中包括个人信息登记姓名不超过5个文字性别是单选按钮爱好是多选框能上传文件使用css做一些复杂的样式

原文地址: https://www.cveoy.top/t/topic/bl8r 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录