標題：用CSS編寫成績表單
成績表單是一種常見的表單設計，用于展示學生的成績信息。傳統的表單設計需要使用HTML和JavaScript來實現，但現代的網站需要更加靈活的表單設計，因此使用CSS來創建表單已經成為了一種流行的選擇。在本文中，我們將介紹如何使用CSS來創建一個簡單的成績表單。
1. 創建HTML結構
首先，我們需要創建HTML結構，包括表頭、成績表單的各個部分以及成績表單的提交按鈕。
```html
<!DOCTYPE html>
<html>
<head>
<title>成績表單</title>
<style>
form {
display: flex;
flex-wrap: wrap;
margin-bottom: 20px;
label {
margin-bottom: 5px;
input[type="text"], input[type="password"] {
padding: 8px;
margin-bottom: 10px;
border-radius: 4px;
border: 1px solid #ccc;
box-sizing: border-box;
input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
</style>
</head>
<body>
<form>
<h2>成績表單</h2>
<label for="name">姓名：</label>
<input type="text" id="name" name="name" required>
<label for="score">成績：</label>
<input type="text" id="score" name="score" required>
<label for="description">描述：</label>
<textarea id="description" name="description" required></textarea>
<input type="submit" value="提交">
</form>
</body>
</html>
2. 添加CSS樣式
接下來，我們需要添加CSS樣式，用于調整表單的外觀和行為。
```css
form {
display: flex;
flex-wrap: wrap;
margin-bottom: 20px;
label {
margin-bottom: 5px;
input[type="text"], input[type="password"] {
padding: 8px;
margin-bottom: 10px;
border-radius: 4px;
border: 1px solid #ccc;
box-sizing: border-box;
input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
3. 添加表單元素
我們使用`form`標簽來創建表單元素，并使用`h2`標簽來添加表頭。
4. 添加CSS樣式表單元素
接下來，我們添加CSS樣式表單元素，用于設置表單元素的寬度和高度以及樣式。
```css
form > div {
display: flex;
flex-direction: column;
align-items: center;
height: 400px;
margin-bottom: 20px;
label > input[type="text"], label > input[type="password"] {
padding: 8px;
margin-bottom: 10px;
border-radius: 4px;
border: 1px solid #ccc;
box-sizing: border-box;
label > input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
5. 測試
最后，我們測試一下，可以看到使用CSS創建的成績表單有以下樣式：
<form>
<h2>成績表單</h2>
<div>
<label for="name">姓名：</label>
<input type="text" id="name" name="name" required>
<label for="score">成績：</label>
<input type="text" id="score" name="score" required>
<label for="description">描述：</label>
<textarea id="description" name="description" required></textarea>
<input type="submit" value="提交">
</div>
</form>
通過使用CSS，我們可以創建出更加靈活和美觀的成績表單，而無需使用JavaScript，這是一種非常有用的技術。