写一个网页背景引用网上的动物图片做一个个人信息登记表标题白色加粗居中表格绿色填写框蓝色姓名不超过5个文字性别是单选按钮爱好是多选框邮箱个人简介随机生成200字能上传文件上传按钮是红色显示文字是上传文件使用css做一些样式
<!DOCTYPE html>
<html>
<head>
<title>个人信息登记表</title>
<style>
body {
background-image: url("https://images.unsplash.com/photo-1593642634371-8e2d2d1f01c2");
background-size: cover;
font-family: Arial, sans-serif;
color: white;
}
<pre><code> h1 {
text-align: center;
font-size: 36px;
font-weight: bold;
color: white;
}
table {
background-color: #7ac142;
margin: auto;
width: 50%;
border-collapse: collapse;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}
td, th {
padding: 10px;
text-align: left;
}
input[type=text], input[type=email] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 2px solid #4CAF50;
border-radius: 4px;
background-color: #f8f8f8;
color: #333;
}
input[type=radio], input[type=checkbox] {
margin: 8px 0;
box-sizing: border-box;
color: #333;
}
label {
display: block;
margin-bottom: 10px;
font-weight: bold;
color: white;
}
textarea {
width: 100%;
height: 150px;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 2px solid #4CAF50;
border-radius: 4px;
background-color: #f8f8f8;
color: #333;
}
input[type=file] {
display: none;
}
.upload-btn {
background-color: red;
color: white;
padding: 12px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
font-weight: bold;
}
.upload-btn:hover {
background-color: #e60000;
}
</style>
</code></pre>
</head>
<body>
<h1>个人信息登记表</h1>
<table>
<tr>
<td><label for="name">姓名:</label></td>
<td><input type="text" id="name" name="name" maxlength="5"></td>
</tr>
<tr>
<td><label>性别:</label></td>
<td>
<label for="male">男</label>
<input type="radio" id="male" name="gender" value="male">
<label for="female">女</label>
<input type="radio" id="female" name="gender" value="female">
</td>
</tr>
<tr>
<td><label>爱好:</label></td>
<td>
<label for="reading">阅读</label>
<input type="checkbox" id="reading" name="hobby" value="reading">
<label for="sports">运动</label>
<input type="checkbox" id="sports" name="hobby" value="sports">
<label for="music">音乐</label>
<input type="checkbox" id="music" name="hobby" value="music">
</td>
</tr>
<tr>
<td><label for="email">邮箱:</label></td>
<td><input type="email" id="email" name="email"></td>
</tr>
<tr>
<td><label for="intro">个人简介:</label></td>
<td><textarea id="intro" name="intro"></textarea></td>
</tr>
<tr>
<td><label for="file">上传文件:</label></td>
<td>
<label for="file" class="upload-btn">上传文件</label>
<input type="file" id="file" name="file">
</td>
</tr>
</table>
</body>
</html>
原文地址: http://www.cveoy.top/t/topic/bmb3 著作权归作者所有。请勿转载和采集!