第一个html--仿英雄联盟

页面效果：
源码：
<html>
<head>
<title>LOL--新手推荐英雄</title>
<style>
#continer{
border:1px #ff0000 solid;
	width:1000px;
	height:700px;
	background:#ffffff;
}
#header{
/*border:1px #00ff00 solid;*/
	width:100%;
	height:145px;
	background:#ffffff;
	margin: 0px auto;
	background:url('image/xinshou/xinshou-Logo.png')  no-repeat;
}
#leftcontent{
/*border:1px #0000ff solid;*/
	width:700px;
	height:550px;
	background:#ffffff;	
	float:left;
}
#rightcontent{
border:1px #f0f000 solid;
	width:250px;
	height:550px;
	background:#ffffff;
    float:left;
	margin-left:20px;
	  	
}
#bodyer{
border:1px #f0f000 solid;
	width:100%;
	
	background:#ffffff;   	
}
#bottomer{
clear:both;
border:1px #00ff00 solid;
	width:1000px;
	height:20px;
	
	background:#ffff00;   	
}



#jiansheng{
width:120px;
height:120px;
background:url('image/xinshou/11_Web_0.jpg')  no-repeat;
}
#longgui{
width:120px;
height:120px;
background:url('image/xinshou/33_Web_0.jpg')  no-repeat;
}
#niutou{
width:120px;
height:120px;
background:url('image/xinshou/Alistar_Square_0.png')  no-repeat;
}
#amumu{
width:120px;
height:120px;
background:url('image/xinshou/Darius_Square_0.png')  no-repeat;
}
#mori{
width:120px;
height:120px;
background:url('image/xinshou/Fiddlesticks_Square_0.png')  no-repeat;
}
#nunu{
width:120px;
height:120px;
background:url('image/xinshou/Nunu_Square_0.png')  no-repeat;
}
#qinnv{
width:120px;
height:120px;
background:url('image/xinshou/Sona_Square_0.png')  no-repeat;
}
#xingma{
width:120px;
height:120px;
background:url('image/xinshou/Soraka_Square_0.png')  no-repeat;
}
#baixiong{
width:120px;
height:120px;
background:url('image/xinshou/Volibear_Square_0.png')  no-repeat;
}
#zhaoxin{
width:120px;
height:120px;
background:url('image/xinshou/XinZhao_Square_0.png')  no-repeat;
}
#robot{
width:90px;
height:90px;
background:url('image/xinshou/53_Web_0.jpg')  no-repeat;
}
#houzi{
width:90px;
height:90px;
background:url('image/xinshou/champions_62.jpg')  no-repeat;
}
#kate{
width:90px;
height:90px;
background:url('image/xinshou/55_Web_0.jpg')  no-repeat;
}
#wanglingyongshi{
width:90px;
height:90px;
background:url('image/xinshou/champions_14.jpg')  no-repeat;
}
#ceshi{

width:90px;
height:90px;
cellspacing:0;
cellpadding:0;
border:1px #00ff00 solid;
}
.fontr{
font-size:20px;
font-weight:bold;
text-left:20px;
}
.fonter{
font-size:20px;
font-weight:bold;
text-align:center;
}
#select1{
/*border: 1px #00ff00 solid;*/
font-size:40px;
font-weight:bold;
color:#ff0000;
text-align:center;
}
#select2{
width:140px;
height:150px;
margin:10px auto;
background:url('image/xinshou/xinshou--tuijian.png')  no-repeat;
}
#select3{
width:140px;
height:150px;
margin:10px auto;
background:url('image/xinshou/xinshou--tuijian2.png')  no-repeat;
}
.tuijianFont{

font-size :20px;
text-align:center;
}


</style>
</head>


<body>

<div id="continer">

   <div id="header"></div>
   <div id="bodyer">
   
       <div id="leftcontent">
	    <table table cellpadding=2 cellspacing=10 boder=1 > 
		   
		   <tr >
		       <td><a href="Hero--Blade Master.html"><div id="jiansheng"  ></div></a></td>
			   <td><div id="longgui" ></div></td>
			   <td><div id="niutou"></div></td>
			   <td><div id="amumu"></div></td>
			   <td><div id="mori"></div></td>
           </tr>		   
	       <tr>
              <td class="fonter">无极剑圣</td>
			  <td class="fonter">披甲龙龟</td>
			  <td class="fonter">牛头酋长</td>
			  <td class="fonter">诺克萨斯之手</td>
			  <td class="fonter">末日使者</td>
            </tr>		   
	        <tr>
		       <td><div id="nunu" ></div></td>
			   <td><div id="qinnv"></div></td>
			   <td><div id="xingma"></div></td>
			   <td><div id="baixiong"></div></td>
			   <td><div id="zhaoxin"></div></td>
           </tr>
	       <tr>
              <td class="fonter">雪人骑士</td>
			  <td class="fonter">琴瑟仙女</td>
			  <td class="fonter">众星之子</td>
			  <td class="fonter">雷霆咆哮</td>
			  <td class="fonter">赵信</td>
            </tr>
		    <tr>
		       <td><div id="robot" ></div></td>
			   <td><div id="houzi"></div></td>
			   <td><div id="kate"></div></td>
			   <td><div id="wanglingyongshi"></div></td>
			   <td></td> 
           </tr>
		   <tr>
              <td class="fontr">蒸汽机器人</td>
			  <td class="fontr">齐天大圣</td>
			  <td class="fontr">不祥之刃</td>
			  <td class="fontr">亡灵勇士</td>
			  <td></td>
            </tr>
	    </table>
	   </div>
	   <div id="rightcontent">
	       
			     <div id="select1">每日推荐</div>
				 
				 <a href="http://lol.17173.com/"><div id="select2" ></div></a>
				 <div class="tuijianFont">
				       大区：黑色玫瑰<br/>
                   游戏昵称：傲娇软萌小妙菱
                      
			     </div>
				 
				 <a href="http://lol.17173.com/"><div id="select3" ></div></a>
			     <div class="tuijianFont">
				      大区：黑色玫瑰<br/> 
                   游戏昵称：请叫我呆萌梦依
			     </div>
				 <div  class="tuijianFont"><br/>关注更多请登录：http://lol.duowan.com/</div>
			
			
	   
	   </div>
	   
       
   
   
   
   </div>
   <div id="bottomer"></div>







</div>
</body>



</html>
感想：
1，在做这个的时候，一边做这个，一边和java进行比较，发现确实有共同之处，对java理解深了那么一点点。
2，搞编程就要坐的住，以前坐不住，现在一座就几个小时，
3，发现在解决一个个出现的问题之后，会有一种莫名的兴奋感，那个叫高兴吧
4，要自己动手，丰衣足食,自己慢慢写代码，
2014.11.14
致那些还在搞编程的人
第一个html--仿英雄联盟

猜你喜欢
