![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
WJCorrection status：qualified
Teacher's comments：代码要用代码块，建议标题修改一下，不要用全英文！
Collection
Collection
http://45.76.187.50/assignmentregister.html
http://45.76.187.50/assignmentshoppingcart.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>表格实战: 购物车</title>
<style>
html {
font-size: 14px;
}
table {
/ 将单元格之间的间隙去掉 /
border-collapse: collapse;
width: 70%;
margin: auto;
color: #666;
font-weight: lighter;
text-align: center;
}
/ 表格线直接添加到单元格上面 /
table thead th,
table td {
border-bottom: 1px solid #ccc;
padding: 10px;
}
/ 标题样式 /
table caption {
font-size: 1.5rem;
margin-bottom: 15px;
color: lightgreen;
}
table th {
font-weight: lighter;
color: lightgreen;
}
table thead tr:first-of-type {
background-color: lightcyan;
}
/ 隔行变色 /
table tbody tr:nth-of-type(even) {
background-color: crimson;
}
/ 鼠标悬停效果 /
table tbody tr:hover {
background-color: pink;
}
/ 底部样式 /
table tfoot td {
border-bottom: none;
color: coral;
font-size: 1.2rem;
font-weight: bolder;
}
/ 结算按钮 /
body div:last-of-type {
width: 70%;
margin: 10px auto;
}
body div:first-of-type button {
/ 靠右 /
float: right;
width: 120px;
height: 32px;
background-color: seagreen;
color: white;
border: none;
/ 设置鼠标样式 /
cursor: pointer;
}
body div:first-of-type button:hover {
background-color: coral;
font-size: 1.1rem;
}
</style>
</head>
<body>
<table>
<caption>Shopping Cart</caption>
<thead>
<tr>
<th>Ref. No.</th>
<th>Name</th>
<th>Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>114514</td>
<td>A Catholic Interlinear New Testament Polyglot: Volume I: The Four Gospels and the Acts of the Apostles in Latin, English and Greek</td>
<td>$17.35</td>
<td>1</td>
<td>$17.35</td>
</tr>
<tr>
<td>114515</td>
<td>A Catholic Interlinear Old Testament Polyglot: Volume II: Numbers and Deuteronomy in Latin, English, Greek and Hebrew (Volume 2)</td>
<td>$5.65</td>
<td>1</td>
<td>$5.65</td>
</tr>
<tr>
<td>114516</td>
<td>A Catholic Interlinear New Testament Polyglot: Vol III: The Catholic Epistles and The Apocalypse in Latin, English and Greek</td>
<td>$7.00</td>
<td>1</td>
<td>$7.00</td>
</tr>
</tbody>
### Source Code of User Registry
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>XTube User Registry</title>
<style>
input:invalid {
border: 2px dashed red;
}
input:invalid:required {
background-image: linear-gradient(to right, pink, lightgreen);
}
input:valid {
border: 2px solid black;
.body {display:table}
</style>
</head>
<body>
<h1>XTube User Register</h1>
<form action="" method="POST">
<fieldset>
<legend>Basic Info(required)</legend>
<span>
<label for="uuid">Account</label>
<input
type:"text"
id="uuid"
name="uuid"
placeholder="Minimum 12 Characters"
minlength="12"
autofocus
required
/>
</span>
<span>
<label for="emailaddr">Email Address</label>
<input
type="email"
name="emailaddr"
id="emailaddr"
placeholder="example@register.com"
required
/>
</span>
<span>
<label for="pwd">Password</label>
<input type="password" name="pwd" id="pwd" required minlength="12" placeholder="No less than 12 characters"/>
</span>
<span>
<label for="pwdconfirm">Password Again</label>
<input type="password" name="pwdc" id="pwdc" required minlength="12" placeholder="Type your password again please"
</span>
</fieldset>
<fieldset>
<legend>Supplementary Info</legend>
<div>
<label for="gay">Sexual Orientation</label>
<input type="radio" name="sexori" value="gay" id="gay" checked /><label for="gay">Homosexual</label>
<input type="radio" name="sexori" value="str" id="str" /><label for="str">Heterosexual</label>
<input type="radio" name="sexori" value="bi" id="bi" /><label for="bi">Bisexual</label>
</div>
<div>
<label for="favgen">Favourite Gender</label>
<input type="checkbox" name="favgen[]" id="fem" value="fem" />
<label for="fem">Female</label>
<input type="checkbox" name="favgen[]" id="male" value="male" />
<label for="male">Male</label>
</div>
</fieldset>
<fieldset>
<legend>Extra Info</legend>
<label for="project">Favourite Project</label>
<input type="search" list="project" name="project" id="project"/>
<datalist id="project">
<option value="Bondage" ></option>
<option value="Submissive"></option>
<option value="Dominance"></option>
</datalist>
<fieldset>
<legend>Biography</legend>
<label for="bio">Biography</label>
<textarea
name="bio"
id="bio"
cols="80"
rows="5"
placeholder="Enter your biography here..."
></textarea>
</fieldset>
</fieldset>
<button class="btn">Submit</button>
</body>
</html>