第四周第一天
所用时间：225分钟
代码量（行）：127
博客量（篇）：6
了解到的知识点：
1.html平移动画
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html平移</title>
<style>
/* 设置页面样式 */
body, html {
margin: 0;
padding: 0;
height: 100%;
background-color: #f0f0f0;
}
/* 设置容器样式 */
.container {
position: absolute;
top: 20px;
left: 20px;
width: 400px;
height: 400px;
background-color: green;
overflow: hidden;
}
/* 设置小方块样式 */
.square {
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 50px;
background-color: red;
animation: moveRight 3s linear infinite;
}
/* 定义动画 */
@keyframes moveRight {
0% {
left: 0;
}
100% {
left: calc(100% - 50px);
}
}
</style>
</head>
<body>
<div class="container">
<div class="square"></div>
</div>
</body>
</html>
如上述代码实现了一个小方块平移的动画
2.html悬停
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>甄嬛传角色表</title>
<style>
h1 {
text-align: center;
font-weight: bold;
color: #2c3e50;
margin: 20px 0;
}
table {
width: 80%;
margin: 0 auto;
border-collapse: collapse;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
th, td {
padding: 12px;
text-align: left;
border-bottom: 1px solid #ddd;
transition: background-color 0.3s ease; /* 添加过渡效果 */
}
th {
background-color: #8e44ad;
color: white;
font-weight: bold;
}
tr:hover {
background-color: #f5f5f5;
}
/* 添加单元格悬停效果 */
td:hover {
background-color: black;
color: white;
}
</style>
</head>
<body>
<h1>甄嬛传角色表</h1>
<table>
<thead>
<tr>
<th>姓名</th>
<th>性格特点</th>
<th>存活集数</th>
</tr>
</thead>
<tbody>
<tr>
<td>甄嬛</td>
<td>聪慧隐忍，谋略过人</td>
<td>全剧存活（76集）</td>
</tr>
<tr>
<td>皇后</td>
<td>城府深沉，心狠手辣</td>
<td>至56集自尽</td>
</tr>
<tr>
<td>华妃</td>
<td>骄横跋扈，敢爱敢恨</td>
<td>至42集撞墙而亡</td>
</tr>
<tr>
<td>沈眉庄</td>
<td>端庄温婉，宁折不弯</td>
<td>至64集血崩去世</td>
</tr>
<tr>
<td>安陵容</td>
<td>敏感多疑，工于心计</td>
<td>至68集吞苦杏仁亡</td>
</tr>
<tr>
<td>果郡王</td>
<td>深情不渝，潇洒不羁</td>
<td>至74集饮毒酒亡</td>
</tr>
<tr>
<td>温实初</td>
<td>忠厚仁心，默默守护</td>
<td>全剧存活</td>
</tr>
<tr>
<td>浣碧</td>
<td>心思细腻，倔强执着</td>
<td>至74集撞棺殉情</td>
</tr>
<tr>
<td>叶澜依</td>
<td>桀骜不驯，敢作敢为</td>
<td>至76集割腕自尽</td>
</tr>
<tr>
<td>苏培盛</td>
<td>老练圆滑，忠心耿耿</td>
<td>全剧存活</td>
</tr>
</tbody>
</table>
</body>
</html>
以上是一个html悬停示例，鼠标悬停在任意单元格时，该单元格会变为黑色
浙公网安备 33010602011771号