<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>王者荣耀</title>
  <style>
    #time{
      color: chartreuse;
    }
    #center{
      weight: 65%;
      margin: 0%  17.5% 0% 17.5%; /*上右下左*/  /*或者属性值为0 auto; 0表示上下为0,auto表示系统自动计算左右边距*/
    }
    .mid{
      text-align: center;
    }
  </style>
</head>
<body>
<div id="center">
  <h1 id="time">王者荣耀:英雄构造器(Honor of Kings Hero Builder)</h1>
  <p>定义你的英雄名称,职业分路(Define your Hero Name,Class and Lane Position)</p>
  <table border="1px" cellspacing="0px" width="600px">
    <tr>
      <td>
        <img src="img/123.jpg" width="200" height="250" class="mid"> <br>
        <h2>初始属性(Base Stats)</h2>
        <p>
          生命值(HP):3200
          <hr>
          物理攻击(ATK):180
          <hr>
          法术强度(AP):0
        </p>
      </td>
      <td>
        <h2 class="mid">核心信息(Core Details)</h2>
        <p>
          英雄名称(HERO NAME):<input type="text" name="name"> <br>
          英雄职业(ROLE):<label><input type="radio" name="role" value="Warrior">战士</label>
          <label><input type="radio" name="role" value="Mage">法师</label>
          <label><input type="radio" name="role" value="Marksman">射手</label>  <br>
          分路位置(LANE):<select>
          <option value="top">上路</option>
          <option value="mid">中路</option>
          <option value="bot">下路</option>
        </select> <br>
          局内增益(BUFFS):<label><input type="checkbox" name="LifeSteal" value="1">物理吸血</label>
          <label><input type="checkbox" name="CDR" value="2">冷却缩减</label>
          <label><input type="checkbox" name="Critical Hit" value="3">暴击率</label>
          <br>
          <h2 class="mid">英雄背景(Hero Lore)</h2>
          输入你的英雄背景(Enter a brief history):
         <textarea name="history" cols="35" rows="10"></textarea>
        </p>
        <input type="submit" value="确认构造(CONFIRM BUILD)">
      </td>
    </tr>
  </table>
</div>
</body>
</html>