SOURCE

<div id="container" style="width:500px">
 
<div id="header" style="background-color:#00FFFF;" >
<h1  class="class2" style="margin-bottom:0;text-align:center;"> <a href="http://lol.qq.com/">英雄联盟</a></h1></div>
 <div id="menu" style="background-color:#FFD700;height:250px;width:100px;float:left;">
<b class="class2" >菜单</b><br>

<p class="class1"><a href="">英雄介绍</a></p>
<p class="class1"><a href="">技能施放</a></p>
<p class="class1"><a href="">背景故事</a></p>
<p class="class1"><a href>英雄技巧</a ></p>
</div>

  <div id="content" style="background-color:#00FF00;height:250px;width:400px;float:left; text-align:center ">

  账号<input type="password" name="name" value><br>
  密码<input type="password" name="name"  value><br>
  <a    id="p1"  href="#">登录</a> <br>
  <a    id="p2"href="#">注册</a>
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1488883413389&di=68bc24dfbfa9c2d3291d2ed5b6eb652d&imgtype=0&src=http%3A%2F%2Fimg.361games.com%2Ffile%2F2016%2F08%2Fndvnyrmvigc.jpg"  id="pp" >
   
</div> 
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 © runoob.com</div>
 
</div>
 <video width="500" height="240" controls>

.class1
{
  border:10px solid red;
}

.class2{
   border:1px solid black;
}
  
#content{
  color:red;
}

#p1
{
  border:1px solid red;
 
}


#p2
{
  border:1px solid red;
  
}

#pp{
  height:160px;
  width:400px
}