今天心血来潮，想搞搞《英雄联盟》官网首页那个样子，作为一个LOL老玩家，这个必须得实践一下。
我直接浏览器打开官网地址，然后右键“查看网页源代码”，想直接把人家的代码扒下来。结果发现，这代码也太复杂，各种看不懂的标签和乱七八糟的样式，头都大！这要是直接拿来用，估计得改到猴年马月。
然后我就想，能不能简单点，先搭个框架出来？于是我就开始回忆，官网首页都有.. ... 最上面是导航栏，然后中间是各种图片轮播，还有新闻资讯啥的，下面好像是一些活动入口和合作伙伴之类的。
有这个思路，我就开始动手。先用<div>标签把整个页面分成几个大块：
小编温馨提醒：本站只提供游戏介绍，下载游戏推荐89游戏，89游戏提供真人恋爱/绅士游戏/3A单机游戏大全，点我立即前往》》》绅士游戏下载专区
- 头部导航
- 轮播图
- 新闻资讯
- 活动入口
- 底部信息
然后，在每个大块里面再细分。比如头部导航，我记得有“游戏资料”、“攻略中心”、“赛事中心”等等，就用<ul>和<li>来做个列表。轮播图嘛这个比较麻烦，先放着，用几个<div>占个位，以后再说。
新闻资讯这块，我想想，就用几个<p>标签，里面写上标题和简要内容。活动入口，就用几个带点样式的<div>，里面放上活动图片和文字。底部信息，一般就是版权信息、联系方式之类的，也用<p>标签搞定。
写完这些，我发现页面基本结构已经出来，虽然光秃秃的很难看，但起码有个样子。接下来就是填充内容和美化样式。
内容方面，我直接去官网找一些文字和图片素材。比如导航栏的文字，新闻的标题，活动的图片等等。把这些内容填到对应的标签里面，页面顿时就充实不少。
美化样式
美化样式，我用CSS。我直接在<style>标签里写样式，给每个标签设置颜色、大小、边框等等。后来发现这样太乱，就把样式单独写到一个CSS文件里，然后在HTML里引用。
经过一番折腾，总算是把官网首页的样子给弄出来。虽然跟原版的肯定没法比，但作为一个练手的小项目，我已经很满意！
对，我还看到官网上说，新手玩家有成长礼包，达到5/10/15/20级的时候分别能领，里面有双倍BUFF卡和符文，这福利还不错！
这回实践，让我对网页前端开发有更直观的认识。以后再看到好看的网页，我也能大概猜到是怎么做出来的，哈哈！
