这个是我在哪个网站上抄的笔记。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
body {
background: black;
}
.highPage {
position: relative;
color: #0b0;
font-size: 21px;
line-height: 1.5;
padding: 32px 16px;
max-width: 960px;
margin: 0 auto;
font-family: 'Press Start 2P', cursive;
}
.skulls {
position: relative;
padding: 16px 0 24px;
max-width: 600px;
margin: 0 auto;
border: 24px solid;
/*!*border-image: url(https://skullctf.com/images/skull-border.svg) 32 ;*!*/
border-image: url(https://skullctf.com/images/skull-border.svg) 32 round;
}
.highPage h1 {
text-align: center;
}
.highPage table {
text-transform: uppercase;
width: 440px;
margin: 0 auto;
}
.highPage table th {
min-width: 140px;
text-align: left;
}
.highPage table tr:nth-child(1) td {
color: red;
}
.highPage table tr:nth-child(2) td {
color: purple;
}
.highPage table tr:nth-child(3) td {
color: salmon;
}
.highPage table tr:nth-child(4) td {
color: orange;
}
.highPage table tr:nth-child(5) td {
color: yellow;
}
</style>
</head>
<body>
<div class="highPage">
<div class="skulls">
<h1>High Scores</h1>
<table>
<thead>
<tr>
<th>Rank</th>
<th>Score</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1st</td>
<td>0</td>
<td></td>
</tr>
<tr>
<td>2nd</td>
<td>0</td>
<td></td>
</tr>
<tr>
<td>3rd</td>
<td>0</td>
<td></td>
</tr>
<tr>
<td>4th</td>
<td>0</td>
<td></td>
</tr>
<tr>
<td>5th</td>
<td>0</td>
<td></td>
</tr>
<tr>
<td>6th</td>
<td>0</td>
<td></td>
</tr>
<tr>
<td>7th</td>
<td>0</td>
<td></td>
</tr>
<tr>
<td>8th</td>
<td>0</td>
<td></td>
</tr>
<tr>
<td>9th</td>
<td>0</td>
<td></td>
</tr>
<tr>
<td>10th</td>
<td>0</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
这个网站我忘记在哪里去了,找一下应该找的出来的,原网站上有详细解说。