CSS 前端实现LOL选择英雄界面

最新推荐文章于 2022-10-31 12:09:20 发布

莽撞的铁牛

最新推荐文章于 2022-10-31 12:09:20 发布

阅读量1.1k

点赞数

分类专栏： JAVA学习

本文链接：https://blog.csdn.net/qq_37758122/article/details/108149831

版权

JAVA学习专栏收录该内容

22 篇文章 0 订阅

订阅专栏

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<style>
body{
 width:100%;
 background-color:Gainboro;
}
table.left{
 float:left;
 width:250;
 height:500;
 background-color:black;
 border-collapse:collapse;
 border-color:black;
}

td.left{
  text-align:left;
}
font{
 color:white;
font-size:30%;
}

table.right{
 float:left;
 margin-left:30;
 width:500;
 height:500;
 background-color:black;
 border-collapse:collapse;
 border-color:black;
}
input type="image"{
 border:1px solid gray;
 wight:50px;
 height:50px;
}
td.center{
  text-align:center;
}
p{
 margin:0;
 font-size:60%;
color:DarkSalmon;
}
table.right td{
 text-align:center;
}
</style>

<table class="left" border="1">
<tr>
<td  colspan="3" class="center"><font>英雄资料</font></td>
</tr>
<tr>
<td><input type="checkbox"><font>坦克</font></td>
<td><input type="checkbox"><font>法师</font></td>
<td><input type="checkbox"><font>刺客</font></td>
</tr>
<tr>
<td><input type="checkbox"><font>辅助</font></td>
<td><input type="checkbox"><font>新手</font></td>
<td><input type="checkbox"><font>近战</td>
</tr>
<tr>
<td><input type="checkbox"><font>远程</font></td>
<td><input type="checkbox"><font>推进</font></td>
<td><input type="checkbox"><font>打野</font></td>
</tr>
<tr>
<td><input type="checkbox"><font>后期</font></td>
<td><input type="checkbox"><font>潜行</font></td>
<td><input type="checkbox"><font>战士</font></td>
</tr>

<tr>
<td class="left" colspan="3"><font style="color:coral">英雄价格</font></td>
</tr>

<tr>
<td><input type="checkbox"><font>6300</font></td>
<td><input type="checkbox"><font>4800</font></td>
<td><input type="checkbox"><font>3150</font></td>
</tr>
<tr>
<td><input type="checkbox"><font>1350</font></td>
<td><input type="checkbox"><font>450</font></td>
</tr>

<tr>
<td class="center" colspan="3"><font>物品资料:</font></td>
</tr>

<tr>
<td><input type="checkbox"><font>生命值</font></td>
<td><input type="checkbox"><font>攻击速度</font></td>
<td><input type="checkbox"><font>护甲穿透</font></td>
</tr>
<tr>
<td><input type="checkbox"><font>暴击</font></td>
<td><input type="checkbox"><font>法术穿透</font></td>
<td><input type="checkbox"><font>魔法抗性</font></td>
</tr>
<tr>
<td><input type="checkbox"><font>法术伤害</font></td>
<td><input type="checkbox"><font>物理伤害</font></td>
<td><input type="checkbox"><font>消耗品</font></td>
</tr>
<tr>
<td><input type="checkbox"><font>韧性</font></td>
<td><input type="checkbox"><font>法力值</font></td>
<td><input type="checkbox"><font>生命偷取</font></td>
</tr>
<tr>
<td><input type="checkbox"><font>附魔</font></td>
<td><input type="checkbox"><font>冷却缩减</font></td>
<td><input type="checkbox"><font>生命回复</font></td>
</tr>
<tr>
<td><input type="checkbox"><font>法力回复</font></td>
<td><input type="checkbox"><font>法术吸血</font></td>
<td><input type="checkbox"><font>移动速度</font></td>
</tr>
<tr>
<td><input type="checkbox"><font>护甲值</font></td>
</tr>

<tr>
<td class="center" colspan="3"><font>符文资料</font></td>
<tr>
</table>

<table class="right">
<tr>
<td><input type="image" src="0.jpg"><p>牛头酋长</p><p>阿利斯塔</p></td>
<td><input type="image" src="1.jpg"><p>钢铁大师</p><p>波比</p></td>
<td><input type="image" src="2.jpg"><p>上至木乃伊</p><p>阿木木</p></td>
<td><input type="image" src="3.jpg"><p>牛头酋长</p><p>阿利斯塔</p></td>
<td><input type="image" src="4.jpg"><p>牛头酋长</p><p>阿利斯塔</p></td>
<td><input type="image" src="5.jpg"><p>牛头酋长</p><p>阿利斯塔</p></td>
<td><input type="image" src="6.jpg"><p>牛头酋长</p><p>阿利斯塔</p></td>
</tr>
<tr>
<td><input type="image" src="7.jpg"><p>牛头酋长</p><p>阿利斯塔</p></td>
<td><input type="image" src="8.jpg"><p>钢铁大师</p><p>波比</p></td>
<td><input type="image" src="9.jpg"><p>上至木乃伊</p><p>阿木木</p></td>
<td><input type="image" src="10.jpg"><p>牛头酋长</p><p>阿利斯塔</p></td>
<td><input type="image" src="11.jpg"><p>牛头酋长</p><p>阿利斯塔</p></td>
<td><input type="image" src="12.jpg"><p>牛头酋长</p><p>阿利斯塔</p></td>
<td><input type="image" src="13.jpg"><p>牛头酋长</p><p>阿利斯塔</p></td>
</tr>
<tr>
<td><input type="image" src="14.jpg"><p>牛头酋长</p><p>阿利斯塔</p></td>
<td><input type="image" src="15.jpg"><p>钢铁大师</p><p>波比</p></td>
<td><input type="image" src="16.jpg"><p>上至木乃伊</p><p>阿木木</p></td>
<td><input type="image" src="17.jpg"><p>牛头酋长</p><p>阿利斯塔</p></td>
<td><input type="image" src="18.jpg"><p>牛头酋长</p><p>阿利斯塔</p></td>
<td><input type="image" src="19.jpg"><p>牛头酋长</p><p>阿利斯塔</p></td>
<td><input type="image" src="20.jpg"><p>牛头酋长</p><p>阿利斯塔</p></td>
</tr>
</table>