第一个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--仿英雄联盟相关推荐

web网页设计期末课程大作业~超高仿英雄联盟LOL游戏官网设计与实现(HTML+CSS+JavaScript)...
仿英雄联盟LOL游戏官网设计与实现(HTML+CSS+JavaScript) 关于HTML期末网页制作,大作业A+水平 ~游戏网页作业HTML+CSS+JavaScript实现,共有游戏首页等页面! ...
Android仿英雄联盟/斗鱼波形加载动画
先上效果图: 实现原理: 通过自定义一个布局,继承自LinearLayout,然后在这个布局当中添加5条竖线,也即是5个矩形View:通过对这5个View分别加入属性动画,即可实现.动画是一个组合动画 ...
逼真版仿英雄联盟纯html+css+jqueryLOL网页版
前言: 为了提高自己的编码兴趣,最近使用html,css,JQuery做了一个仿版的<英雄联盟>,虽然自己主修的是后端,但是技多压身.纯属也是自己的一个兴趣.上一节简单的介绍了仿版的< ...
仿英雄联盟比赛直播网页模板
介绍: 高仿英雄联盟2017全球决赛官方比赛直播模板,带直播视频.排行榜.赛程列表等等功能. 网盘下载地址: http://kekewl.net/NbiX1vJoyjU0 图片:
DIV布局——仿英雄联盟LOL首页(11页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载
HTML5期末大作业:仿英雄联盟网站设计--仿英雄联盟LOL首页(11页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码文章目录 HTML5期末大作业:仿英雄联盟网站设计- ...
HTML5期末大作业：仿英雄联盟网站设计——仿英雄联盟LOL首页(11页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载
HTML5期末大作业:仿英雄联盟网站设计--仿英雄联盟LOL首页(11页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载常见网页设计作业题材有 ...
WPF实现雷达图(仿英雄联盟)
前言有小伙伴提出需要实现雷达图. 由于在WPF中没有现成的雷达图控件,所以我们自己实现一个. PS:有更好的方式欢迎推荐. 代码如下一.创建 RadarChart.cs 菜单继承 Control代 ...
分享一套仿英雄联盟大型多人联机实时对战游戏源码（包含完整服务器和客户端源码）...
源码介绍这是一款类似英雄联盟的 5V5 实时对战游戏,服务器端使用 C/C++ 开发,同时支持 Linux 和 Windows 系统部署:客户端使用 C# + Unity3D 开发. 我们先来看下 ...
iOS卡片式立体轮播仿英雄联盟选择皮肤效果展示
第二次更新:更加丰富的相册图片展示 1.由于不在继承与FlowLayout,只是单纯继承与UIColletionLayout 2.关键方法 layoutAttributesForItemAtIndex ...
源码分享，仿英雄联盟对战游戏！
源码介绍这是一款类似英雄联盟的 5V5 实时对战游戏,同时支持 Linux 和 Windows 系统部署. 我们先来看下这个游戏的内容吧,这是在我机器上编译后运行的效果图: 登录界面进入后台配置 ...

第一个html--仿英雄联盟

第一个html--仿英雄联盟相关推荐

最新文章

热门文章