1.用 HTML 实现生活费开支表; 2.设计校运会报名表: a) 页面的上半部分介绍校运会报名要求,要求图文并茂; b) 页面的下面部分是校运会个人信息上报表,表格要求使用单行文本框、多行文本框、单选框、多选框、下拉选项、图片按钮等。
时间: 2024-10-29 17:24:50 浏览: 4
1. 使用HTML实现生活费开支表,首先可以创建一个简单的表格结构。你可以这样开始:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>生活费开支表</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h1>生活费开支表</h1>
<table>
<tr>
<th>日期</th>
<th>项目</th>
<th>金额</th>
<th>备注</th>
</tr>
<!-- 添加表格行数据 -->
</table>
</body>
</html>
```
在这个例子中,你需要填写具体的开支信息,每个单元格对应日期、开支项目、金额以及备注。
2. 设计校运会报名表:
- 上半部分:
```html
<header>
<h1>校运会报名</h1>
<p>亲爱的同学们,欢迎参加本年度校运会。以下是报名须知:</p>
<!-- 插入图文并茂的介绍,例如使用<figure>标签配合<img> -->
<figure>
<img src="requirements.jpg" alt="报名要求图">
<figcaption>点击查看详细要求...</figcaption>
</figure>
</header>
```
- 下半部分(个人信息填报部分):
```html
<form id="registration-form">
<label for="name">姓名:</label>
<input type="text" id="name" name="name"><br>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email"><br>
<label for="department">院系:</label>
<select id="department" name="department">
<option value="计算机">计算机科学学院</option>
<!-- 其他院系... -->
</select><br>
<label for="events">报名项目:</label>
<input type="checkbox" id="event1" name="events[]" value="短跑"> 短跑<br>
<input type="checkbox" id="event2" name="events[]" value="跳高"> 跳高<br>
<!-- 更多项目... -->
<textarea id="biography" name="biography" placeholder="个人简介"></textarea><br>
<input type="file" id="profile-pic" accept="image/*" name="profile-pic" placeholder="上传头像">
<button type="submit">提交报名</button>
</form>
```
这只是一个基础模板,实际应用中可能需要结合CSS进一步美化布局,并考虑JavaScript来处理表单提交事件。同时,记得替换掉示例图片路径和具体内容。
阅读全文