gter.net/xg-project-library
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

no message

Browse Source
This commit is contained in:
A1300399510 2025-02-05 18:41:17 +08:00
parent 9e1b85c707
commit 6d78de133b
1 changed files with 130 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

178
html/1.html
View File

@ -1,53 +1,135 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
width: 40px;
height: 20px;
border-radius: 40px;
border: 1px solid #000;
position: relative;
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>今日缘分项目</title>
<style>
* {
font-family: 'Helvetica Neue', Arial, sans-serif;
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: #f5f5f5;
padding: 20px;
}
.container {
max-width: 800px;
margin: 0 auto;
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.project-table {
width: 100%;
border-collapse: collapse;
}
.project-table th,
.project-table td {
padding: 16px;
text-align: left;
border-bottom: 1px solid #e0e0e0;
}
.project-table th {
background-color: #4CAF50;
color: white;
font-weight: 600;
}
.project-table tbody tr:nth-child(even) {
background-color: #f9f9f9;
}
.project-table tbody tr:hover {
background-color: #f1f1f1;
}
.number-cell {
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
}
.tuition {
text-align: right;
}
.button-container {
text-align: center;
padding: 20px;
background-color: #f5f5f5;
}
.button-container button {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
.button-container button:hover {
background-color: #45a049;
}
@media (max-width: 768px) {
.project-table th,
.project-table td {
padding: 12px;
font-size: 14px;
}
.dot {
width: 23px;
height: 15px;
border-radius: 40px;
background-color: aqua;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 2px;
animation: show 3s forwards;
.button-container button {
padding: 8px 16px;
font-size: 14px;
}
@keyframes show {
0% {
left: 2px;
}
10% {
left: 2px;
width: 30px;
}
30% {
left: 20px;
width: 30px;
}
100% {
left: 20px;
width: 23px;
}
}
</style>
</head>
<body>
<div class="box">
<div class="dot"></div>
}
</style>
</head>
<body>
<div class="container">
<table class="project-table">
<thead>
<tr>
<th>项目</th>
<th>专业排名</th>
<th>学校排名</th>
<th class="tuition">学费</th>
</tr>
</thead>
<tbody>
<tr>
<td>香港大学<br>中医学硕士</td>
<td class="number-cell">101-150</td>
<td class="number-cell">17</td>
<td class="tuition">- HKS</td>
</tr>
<tr>
<td>香港中文大学<br>中医学硕士</td>
<td class="number-cell">14</td>
<td class="number-cell">36</td>
<td class="tuition">765,360 HKS</td>
</tr>
<tr>
<td>香港浸会大学<br>中医学硕士</td>
<td class="number-cell">301-400</td>
<td class="number-cell">253</td>
<td class="tuition">136,000 HKS</td>
</tr>
</tbody>
</table>
<div class="button-container">
<button>查看更多项目</button>
</div>
</body>
</html>
</div>
</body>
</html>