一、網(wǎng)頁(yè)分析
用table制作一篇網(wǎng)頁(yè)塘匣，展示我的常用英雄脓豪。
二、代碼分析
要制作多行多列單元格忌卤，且大小合適扫夜，還需要用到跨列合并單元格。
三驰徊、代碼展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" cellpadding="10" cellspacing="0" width="1700">
<tr height="50" bgcolor="gray">
<td width="150">類型</td>
<td width="300">圖片</td>
<td width="150">英雄名稱</td>
<td width="550">被動(dòng)</td>
<td width="550">技能</td>
</tr>
<tr height="400" >
<td width="150" rowspan="2" >法師</td>
<td width="300" >
<img width="300" height="400" src="https://c-ssl.dtstatic.com/uploads/blog/202009/23/20200923235655_b832d.thumb.1000_0.jpeg"/>
</td>
<td width="150">小喬</td>
<td width="550">小喬釋放技能命中敵人時(shí)笤闯，會(huì)增加25％移動(dòng)速度，持續(xù)2秒</td>
<td width="550">綻放之舞棍厂、甜蜜戀風(fēng)颗味、星華繚亂</td>
</tr>
<tr height="400" >
<td width="300" >
<img width="300" height="400" src="https://ts1.cn.mm.bing.net/th/id/R-C.f76bac441ceb7e85721f30f04a031982?rik=C%2bM3BIXoAuO9EQ&riu=http%3a%2f%2fimg.netbian.com%2ffile%2f2018%2f0201%2f01d554bd24bd6c6b69d14d43c2e3f013.jpg&ehk=i7dTDskqF6vnbQrLE953VGGDT1iBY8SnE0qqOq67tQI%3d&risl=&pid=ImgRaw&r=0"/>
</td>
<td width="150">安琪拉</td>
<td width="550">安琪拉的技能會(huì)灼燒敵人，每層灼燒效果會(huì)在安琪拉使用技能攻擊時(shí)額外增加8(+2%法術(shù)攻擊)法術(shù)傷害并為自己增加2%移速牺弹，效果最多疊加10層浦马，持續(xù)3秒，逐層消失张漂。</td>
<td width="550">火球術(shù)晶默、混沌火種、熾熱光輝</td>
</tr>
<tr height="400" >
<td width="150" rowspan="2" >射手</td>
<td width="300" >
<img width="300" height="400" src="https://pic1.zhimg.com/v2-e397a746a287086983846de096bb2259_r.jpg?source=1940ef5c"/>
</td>
<td width="150">孫尚香</td>
<td width="550">孫尚香每次普通攻擊命中敵人都會(huì)減少0.5秒翻滾突襲的冷卻時(shí)間航攒。</td>
<td width="550">翻滾突襲磺陡、紅蓮爆彈、究極弩炮</td>
</tr>
<tr height="400" >
<td width="300" >
<img width="300" height="400" src="https://game.gtimg.cn/images/yxzj/img201606/skin/hero-info/199/199-mobileskin-5.jpg"/>
</td>
<td width="150">公孫離</td>
<td width="550">普攻會(huì)對(duì)目標(biāo)疊加楓之印記漠畜，疊滿四層后對(duì)周圍敵人造成110~220(+30%物理攻擊)物理傷害币他，并對(duì)周圍單位疊加一層印記。釋放技能或收回紙傘的下次普攻后會(huì)追加一次普攻造成10~20(+30%物理攻擊)物理傷害憔狞。
在釋放技能后再次使用技能回歸到紙傘的位置蝴悉。手中沒有紙傘時(shí)獲得50點(diǎn)移速加成并增加10~20%攻速(隨等級(jí)成長(zhǎng))。追加攻擊最多可儲(chǔ)存2層瘾敢，持續(xù)4秒辫封。</td>
<td width="550">岑中歸月硝枉、霜葉舞、孤鶩斷霞</td>
</tr>
<tr height="400" >
<td width="150" rowspan="2" >輔助</td>
<td width="300" >
<img width="300" height="400" src="https://game.gtimg.cn/images/yxzj/img201606/skin/hero-info/517/517-mobileskin-3.jpg"/>
</td>
<td width="150">少司緣</td>
<td width="550">少司緣每7.5秒~6秒(隨英雄等級(jí)成長(zhǎng))強(qiáng)化下次普攻：蕩秋千至敵人身前造成210~420(+100%物理攻擊)(+30%法術(shù)攻擊)法術(shù)傷害和擊退倦微，并借力向后跳躍。
當(dāng)友方英雄受到"良緣賜福"(滿生命時(shí)不觸發(fā)金幣獎(jiǎng)勵(lì)正压，主動(dòng)對(duì)生命50%以上友方施放時(shí)金幣獎(jiǎng)勵(lì)減半)欣福，或敵方英雄受到"冤緣化解"時(shí)，少司緣達(dá)成業(yè)績(jī)獲得額外20金幣獎(jiǎng)勵(lì)焦履，并縮短強(qiáng)化普攻50%的準(zhǔn)備時(shí)間拓劝。</td>
<td width="550">兩同心、怨離別嘉裤、因緣際會(huì)</td>
</tr>
<tr height="400" >
<td width="300" >
<img width="300" height="400" src="https://mobile-img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/preview/c03da29a7e3b4efc79898aa88f41df23_preview_mid.jpg"/>
</td>
<td width="150">瑤</td>
<td width="550">瑤被除壓制以外的硬控技能命中后會(huì)立即解除控制并變?yōu)槁轨`郑临，持續(xù)4秒，鹿靈狀態(tài)將會(huì)刷新技能冷卻屑宠，免疫所有效果但也失去攻擊能力厢洞，靈鹿靜怡的靈光會(huì)將敵人減速30%。</td>
<td width="550">若有人兮典奉、風(fēng)颯木蕭躺翻、獨(dú)立兮山之上</td>
</tr>
</table>
</body>
</html>
四、代碼效果
屏幕截圖 2024-12-10 211125.png
五卫玖、總結(jié)
熟悉了table的制作方法公你，感覺很有成就感。
