作业分析：
本次使用table+css编写出如下的效果：
网页部分演示图：
屏幕截图 2024-12-13 210445.png
表单演示图：
image.png
视频插入网页演示图：
image.png
代码实现：
使用html+css实现(编写工具 VSCode)：
html代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>王者荣耀英雄介绍</title>
<link rel="stylesheet" href="lessom04的样式表.css">
</head>
<body>
<div class="parallax">
<video src="上官婉儿皮肤.mp4" autoplay loop muted="false" poster="虞姬.png" preload="auto" class="fullscreenvideo">
<source src="上官婉儿皮肤.mp4" type="video/mp4">
<source src="your-video.ogv" type="video/ogg">
</video>
</div>
<div class="container">
<div>
<nav>
<a href="https://pvp.qq.com/" target="_blank">
<img src="王者荣耀.png" alt="王者荣耀">
<span>王者荣耀</span>
<br>
<p>团队成就更多</p>
</a>
</nav>
</div>
<table width="auto" height="1680" border="1" cellspacing="0" cellpadding="0"
style="z-index: 1200; position: relative;">
<tr>
<th width="95" height="25">英雄类型</th>
<th width="94">英雄名称</th>
<th width="250">英雄图片</th>
<th width="385">英雄被动</th>
<th width="452">英雄大招</th>
</tr>
<tr>
<td rowspan="3" align="center">
<div class="zt"><a
href="https://www.bilibili.com/video/BV1ih4ge2EQ4/?vd_source=f1febf74d73827ce4b657947f6ca800b"
target="_blank">打野</a>
</div>
</td>
<td height="255" align="center">
<div class="zt1"><a href="李白视频网页.html" target="_blank">李白</a></div>
</td>
<td>
<div class="image-container">
<img src="李白皮肤.jpg" alt="李白" width="462" height="241" class="simg">
</div>
</td>
<td>
<div class="simg">
<p><img src="李白被动技能.png" width="71" height="77"></p>
<div>侠客行（被动）</div>
<div>被动：</div>
<div>李白使用普攻攻击敌人时，会积累1道剑气，持续3秒。
积累4道剑气后会进入【侠客行】状态，增加30点物理攻击并解除
【青莲剑歌】的封印，持续5秒。</div>
<div>攻击建筑不会积累剑气。</div>
</div>
</td>
<td>
<div class="simg">
<img src="李白三技能.png" width="71" height="77">
<div>青莲剑歌（三技能）</div>
<div>冷却值：12</div>
<div>法力消耗：120</div>
<div>李白化身为剑气飞速穿梭斩击5次，
每次斩击造成220/270/320(+50%额外物理攻击)物理伤害。
当同时攻击多个敌方英雄时，每增加一位敌方英雄将衰减15%的伤害，
最低衰减至初始伤害的70%。
</div>
</div>
</td>
</tr>
<tr>
<td height="282" align="center">
<div class="zt1"><a href="孙悟空视频网页.html" target="_blank">孙悟空</a></div>
</td>
<td>
<div class="image-container">
<img class="simg" src="孙悟空.png" alt="孙悟空" width="462" height="270">
</div>
</td>
<td>
<div class="simg">
<img src="孙悟空被动.png" width="71" height="77">
<div>大圣神威（被动）</div>
<div>被动：孙悟空释放技能后下次普攻变为强力敲击，冲锋至目标身旁并造成475(+100%物理攻击)物理伤害，该伤害可全额享受暴击收益。</div>
<div>孙悟空天生拥有20%暴击率，但初始只能造成150%暴击效果。</div>
<div>孙悟空需要利用技能接普攻打出更高的伤害，被动的暴击加上暴击装备的加成能迅速击杀对方脆皮英雄</div>
</div>
</td>
<td>
<p>
<div class="simg">
<img src="孙悟空大招.png" width="71" height="77"> </p>
<div>如意金箍（三技能）</div>
<div>冷却值：40/35/30</div>
<div>消耗：100</div>
<div>孙悟空将金箍棒直插入地，对范围内敌人造成250/375/500(+80%物理攻击)物理伤害并将其击飞1秒。</div>
<div>这是孙悟空主要的控制技能，能形成很好的AOE控制效果，
并且对印记标记的敌人有更高的伤害
</div>
</div>
</td>
</tr>
<tr>
<td height="304" align="center">
<div class="zt1"><a href="瑶视频网页.html" target="_blank">阿珂</a></div>
</td>
<td>
<div class="image-container">
<img src="阿珂.png" width="462" height="282" class="simg">
</div>
</td>
<td>
<div class="simg">
<img src="阿珂被动.png" width="71" height="77">
<div>死吻（被动）</div>
<div>阿轲在敌人身后发起的攻击，必定暴击，在敌人正面发起的所有攻击，必定不暴击；
阿轲的初始暴击伤害为125%，每1%暴击几率将额外的增加0.5%暴击伤害；
阿轲对非英雄目标最多造成2000伤害，正面攻击非英雄单位时，伤害提升20%
</div>
<div>玩法：被动技能导致阿轲在敌人正面和背后的输出完全不在一个档次上，在敌人背后进行输出能造成巨大的伤害。</div>
</div>
</td>
<td>
<div class="simg">
<img src="阿珂大招.png" width="71" height="77" alt="">
<div>幻舞（三技能）</div>
<div>冷却值：20/18/16</div>
<div>阿轲短暂准备后进入隐身状态，处于隐身状态时，每0.5秒回复110/160/210（+25%额外物理加成）
点生命值并增加40%移动速度，持续3秒；当阿轲发起攻击时会解除隐身状态，
并在3秒内增加自身120/140/160点攻击力，同时每当对敌人造成伤害时会增加30%移动速度，
持续1秒。被动：击败英雄或者助攻时刷新所有技能冷却时间。</div>
</div>
</td>
</tr>
<tr>
<td rowspan="3" align="center">
<div class="zt"><a
href="https://www.msn.cn/zh-cn/channel/topic/%E8%B5%84%E8%AE%AF/tp-Y_77f04c37-b63e-46b4-a990-e926f7d129ff?ocid=BingNewsLanding&nsq=%e7%8e%8b%e8%80%85%e8%8d%a3%e8%80%80%e5%b0%84%e6%89%8b%e5%ae%98%e6%96%b9%e2%80%99"
target="_blank">射手</a>
</div>
</td>
<td height="282" align="center">
<div class="zt1"><a href="马可波罗视频.html" target="_blank">马可波罗</a></div>
</td>
<td>
<div class="image-container">
<img src="马可波罗.png" width="462" height="274" class="simg">
</div>
</td>
<td>
<div class="simg">
<img src="马可波罗被动.png" alt="" width="71" height="77">
<div>连锁反应（被动）</div>
<div>冷却值：0 消耗：0</div>
<div>马可波罗的每次普攻与技能伤害会给目标附加1层防御破坏效果(对小兵为5层)，
达到10层后回复30点能量，同时目标触发防御破坏效果。
防御破坏期间目标每次受到马可波罗的伤害都会额外受到40( +35%物理攻击)真实伤害(该伤害可以暴击)，
持续5秒。马可波罗的技能伤害仅享受50%的法球加成。</div>
</div>
</td>
<td>
<div class="simg">
<img src="马可波罗大招.png" width="71" height="77" alt="">
<div>狂热弹幕（三技能）</div>
<div>冷却值：50/45/40 消耗：75</div>
<div>马可波罗闪烁出现在指定位置并向周围持续发射弹幕，造成120/180/240(+35%物理攻击)物理伤害。
技能持续期间马可波罗会释放12次弹幕，攻速每提升30%，弹幕次数增加1次，最多增加6次。
弹幕会触发普攻的法球效果，但仅享受50%的法球加成。</div>
</div>
</td>
</tr>
<tr>
<td height="282" align="center">
<div class="zt1"><a href="瑶视频网页.html" target="_blank">狄仁杰</a></div>
</td>
<td>
<div class="image-container">
<img src="狄仁杰.png" width="462" height="271" class="simg">
</div>
</td>
<td>
<div class="simg">
<img src="狄仁杰被动.png" width="71" height="77" alt="">
<div>迅捷（被动）</div>
<div>冷却值：0 消耗：0</div>
<div>被动：狄仁杰的普通攻击能够获得1层迅捷效果，
每层迅捷效果会增加6％攻击速度和5％移动速度，最多叠加5层。
狄仁杰的第三次普攻将会随机使用一张蓝牌或红牌进行攻击。</div>
<div>玩法：这个技能能让狄仁杰的持续输出能力和生存能力得到显著提升。</div>
</div>
</td>
<td>
<div class="simg">
<img src="狄仁杰大招.png" width="71" height="77" alt="">
<div>王朝密令（三技能）</div>
<div>冷却值：24/20/16 消耗：100</div>
<div>狄仁杰掷出一道金色密令， 密令附带普攻法球效果，
对命中的第个敌方 英雄造成300/375/450(+60%法术攻击)
(+120%额外物理攻击)物理伤害和300/375/450(+60%法术攻击)
(+ 120%额外物理攻击)法术伤害，并将其晕眩1秒，同时会减少目标50%物理和法术防御，
命中后会获得目标视野，持续5秒。期间友军向该目标移动时会增加10%移速。</div>
</div>
</td>
</tr>
<tr>
<td height="210" align="center">
<div class="zt1"><a href="虞姬视频.html" target="_blank">虞姬</a></div>
</td>
<td>
<div class="image-container">
<img src="虞姬.png" width="462" height="233" class="simg">
</div>
</td>
<td>
<div class="simg">
<img src="虞姬被动.png" width="71" height="77" alt="">
<div>树神佑护（被动）</div>
<div>冷却值：0 消耗：0</div>
<div>被动：虞姬在普攻时有25%的几率追加一次普攻，
追加普攻造成100(+20%物理攻击)物理伤害，
同时将减少目标15%移速，持续2秒，该效果最高叠加3层。</div>
<div>
当攻速达到一定阈值时，虞姬【楚歌起】和【阵前舞】得到强化。
</div>
</div>
</td>
<td>
<div class="simg">
<img src="虞姬大招.png" height="77" width="71" alt="">
<div>阵前舞（三技能）</div>
<div>冷却值：25/22.5/20 消耗：100</div>
<div>虞姬冲向目标将其晕眩0.5秒并减少90%移速，持续2秒，然后向后跳跃，
并对目标射出2支弩矢，每支弩矢造成340/510/680(+100%额外物理攻击)物理伤害，
后跳结束后虞姬获得20/30/40%攻速加成，持续4秒。
当攻速达到一定阈值时，虞姬【阵前舞】得到强化。</div>
</div>
</td>
</tr>
</table>
<div id="bottom">
<span>版权所有 © 2024 王者荣耀英雄介绍网站。邮箱:123456@qq.com <i><a href="lesson04作业的表单.html"
target="_blank">分享你的游戏经历</a></i></span>
</div>
</div>
</body>
</html>
表单代码演示：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>你的游戏故事经历</title>
<style>
.bd {
max-width: 600px;
/* 最大宽度设置为600px */
margin: auto;
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
/*box-shadow:h-offset v-offset blur-rad
h-offset(水平偏移):(必须值)定义阴影相对于元素水平方向的偏移
正值（向右偏移）负值（向左偏移）
v-offset(垂直偏移):(必须值)定义阴影相对于元素垂直方向的偏移量
正值（向下偏移） 负值（向上偏移）
blur-rad(模糊半径）:(可选值)定义阴影的模糊程度。值越大，阴影的模糊越强
，阴影边缘越柔和 默认为0*/
}
h1 {
text-align: center;
color: #333;
/* 设置元素居中对齐和颜色为黑色 */
}
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 20px;
/* 设置所有元素字体，背景颜色，外边距为0，内边距为20px */
}
.text {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
/* 设置所有label标签的内容加粗 外边距为5px 块级元素行变块 */
}
select {
width: 100%;
/* 宽度占满当前浮动框内 */
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
/* 圆角边框 4px */
box-sizing: border-box;
/* box-sizing:设置高度和宽度时，设置的尺寸会包括内边距和边框
，而不是局限于内容容器
box-sizing：border-box：
元素的内边距和边框宽度不超过浮动框的总宽度和高度*/
}
textarea {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type="text"]
/*直接对文本框进行设置各种格式*/
{
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
button {
background-color: rgb(85, 134, 85);
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
/* 鼠标悬停在内容上时，变为手型 */
font-size: 16px;
width: 100%;
}
button:hover {
background-color: rgb(51, 131, 51);
/* 鼠标悬停时的背景颜色 */
}
</style>
</head>
<body>
<h1>你的游戏故事经历</h1>
<div class="bd">
<form action="#" method="post">
<div class="text">
<label for="yxm" required>游戏名：</label>
<input type="text" id="yxm" name="yxm：" required>
</div>
<div class="text">
<label for="fwq">服务器：</label>
<input type="radio" value="安卓" name="fwq" id="fwq">安卓
<input type="radio" value="苹果" name="fwq" id="fwq">苹果
</div>
<div class="text">
<label for="qh">区号：</label>
<input type="text" id="qh" name="qh" required>
</div>
<div class="text">
<label for="zy">你最喜欢的职业：</label>
<select name="zy" id="zy">
<option value="打野" name="zy" id="zy">打野</option>
<option value="法师" selected name="zy" id="zy">法师</option>
<option value="辅助" name="zy" id="zy">辅助</option>
<option value="战士" name="zy" id="zy">战士</option>
<option value="射手" name="zy" id="zy">射手</option>
</select>
</div>
<div class="text">
<label for="yysl">你的运营思路：</label>
<textarea name="yysl" id="yysl" name="yysl" placeholder="请写出你的运营思路">
</textarea>
</div>
<div class="text">
<label for="yxjl">你的游戏经历：</label>
<textarea name="yxjl" id="yxjl" rows="4" required placeholder="请写出的你的经历">
</textarea>
</div>
<button type="submit">提交</button>
</form>
</div>
</body>
</html>
css代码演示：
* {
padding: 0px;
margin: 0px;
/* 设置所有的外边距和内边距为0 */
}
nav {
/* 导航栏设置 */
background-color: rgb(24, 26, 41);
height: 60px;
width: auto;
/* 宽设置为自动 */
margin-top: 0px;
margin-left: 0px;
position: relative;
/* 设置定位为相对定位 */
}
nav img {
/* 导航栏图片设置 */
height: 60px;
width: 60px;
float: left;
}
nav span {
/* 导航栏字体设置 */
font-size: 15px;
font-family: '微软雅黑';
color: aliceblue;
font-weight: bold;
/* 字体设置为加粗 */
margin-top: 8px;
float: left;
/* 设置为左浮动 */
}
nav p {
/* 字体颜色设置 */
font-size: 9px;
margin-top: 12px;
color: rgb(107, 103, 103)
}
.zt a {
/* 设置超链接无样式 */
font-size: 16px;
text-decoration: none;
color: black;
}
.zt a:hover {
/* 设置鼠标悬停于链接上时的效果展示 */
font-size: 20px;
font-weight: bold;
cursor: pointer;
color: rgb(157, 93, 93);
}
.zt1 a {
font-size: 16px;
text-decoration: none;
color: black;
}
.zt1 a:hover {
font-size: 20px;
font-weight: bold;
cursor: pointer;
color: red;
}
.simg {
border-radius: 15px;
/*圆角边框，半径为15px*/
cursor: pointer;
/* 鼠标悬停时显示手型光标*/
}
.simg:hover {
width: 400;
height: 270;
border-color: red 5px;
background-color: rgba(150, 169, 163, 0.5);
}
/* 背景视频容器 */
.parallax {
width: 100%;
left: 0;
top: 0;
position: fixed;
/* 设置图片所在的位置为固定定位 */
height: 100vh;
overflow: hidden;
/* 超出浮动框范围外的内容隐藏 */
z-index: -1;
/* 设置块与块之间的叠加问题 */
}
/* 视频背景 */
.parallax video {
position: relative;
/* 相对定位 */
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
/* 保证视频完全覆盖容器 */
z-index: -1;
/* 确保视频在内容下面 */
}
/* 内容容器 */
.container {
background-color: rgba(202, 223, 223, 0.9);
top: 100vh;
/* 内容容器开始显示的位置，距离顶部一个视口高度 */
position: relative;
z-index: 1;
/* 确保内容在视频上方 */
}
.container a hover {
/* 链接悬停时的效果 */
background-color: rgb(71, 67, 67);
}
.container a {
text-decoration: none;
}
/* 设定图片容器的基本样式 */
.image-container {
perspective: 500px;
/* kongzhi 控制3D转换的深度。值越小，效果越明显*/
display: inline-block;
/* 元素在一行内排列，直到容器位置不足时换行
元素可以设置宽和高，不受父元素和子元素的影响 */
z-index: 1500;
position: relative;
}
/* 图片的基本样式 */
.image-container img {
transition: transform 0.5s ease, box-shadow 0.3s ease;
/* 表示旋转效果的过渡时间为0.5秒，box-shadow添加了阴影效果，使图像更具有立体感
增强3D效果 */
transform-style: preserve-3d;
/* 启用3D效果 */
}
/* 鼠标悬停时应用的3D效果 */
.image-container:hover img {
transform: rotateY(10deg) rotateX(10deg);
/* deg是“度”的意思 调整rotateX和rotateY来改变旋转的角度，
进而实现不同的3D效果*/
box-shadow: 0 15px 25px rgba(0, 0, 0, 0.3);
/* 增加阴影效果 */
}
#bottom {
display: flex;
/*设置为弹性容器*/
height: 80px;
width: auto;
background-color: rgba(22, 22, 22, 0.8);
color: white;
align-items: center;
/*设置当前容器内的元素垂直居中*/
/* justify-content: center;用于设置弹性容器中子元素在主轴的排列方式，
设置当前容器内元素水平居中*/
padding-left: 400px;
}
#bottom a {
color: red;
}
#bottom a :hover {
color: white;
cursor: pointer;
}
个人总结
本次前端开发使用html+css编写网页，初步熟悉了各种基础标签的运用，并且添加了图片的3D效果展示，视频背景铺排，标签的堆叠，熟悉了video和box-shadow，表单标签的书写
但在其中的一些格式书写中总会出现一些问题
